Scaling Issue

[alexvcasillas]

Hello, I'm opening this issue because I couldn't find any related issue to this one.

So here's the thing: I have a Horizontal ScrollView with elements within it and I'm transitioning the Image within it and also a Text, when I apply the transitions, happens a slightly weird scale effect and I'm not sure how to approach to fix it or what's going on with it.

Here's a screen record of the visual "bug" that's happening to me.

https://drive.google.com/open?id=1LKhjGJR_7L4oG0DXYwsqK9OiB1y5Zd_B

As you can see by the screen record, it seems to be somehow related to some scale issues but... I'm not sure how this could be fixed.

Transition From

<TouchableHighlight
  style={{ flex: 1 }}
  onPress={() => navigation.navigate("PlanetDetails", { planet: planet })}
  underlayColor="rgba(255, 255, 255, 0.2)"
>
  <Transition shared={planet.key}>
   <Image
      style={[styles.planetPicture, { width: cardWidth }]}
      source={{ uri: `http://192.168.0.102:3000/images/${planet.picture}.jpg` }}
    >
  </Transition>
</TouchableHighlight>

Transition To

const PlanetDetails = ({ navigation }) => {
  const planet = navigation.getParam("planet", "");
  const uri = `http://192.168.0.102:3000/images/${planet.picture}.jpg`;
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Transition shared={planet.key}>
          <Image style={styles.planetPicture} source={{ uri }} />
        </Transition>
      </View>
      <Transition shared={`${planet.key}-name`}>
        <View style={styles.titleHolder}>
          <Text style={styles.title}>{uppercase(planet.name)}</Text>
        </View>
      </Transition>
    </View>
  );
};

Thanks :)

[chrfalch]

Hi @alexvcasillas! Thanks for submitting the issue!

The main issue here is that you’re not transitioning between two similar elements - the second image HS a different aspect ratio which is something the Fluid Transitions library doesn’t have any knowledge about.

What you could do is to either change the aspect ratio of the images to be equal or (the more advanced solution) you could use the transition animation to drive the aspect ratio. You can read more about how this can be done using the animated property [here](url
https://github.com/fram-x/FluidTransitions/blob/develop/docs/Transition.md). There is also an example of how this is done in the example code [here](url
https://github.com/fram-x/FluidTransitions/blob/develop/Examples/src/AnimatedProperty.js).

[alexvcasillas]

Thank you so much @chrfalch !! I'll take a look at those docs and the example :)

[chrfalch]

Do that! I'll close this issue.