React Native - animate image height without scaling (reanimated v2)

Question

I'm trying to create an effect in my React Native app whereby a pixelated version of an image grows in height over another image. I'm using react-native-reanimated v2. The issue I'm having is that I can't get the image to animate in height without the image scaling/re-positioning.

To illustrate the effect I'm currently getting, and what I want, see this image:

I've tried different resizeMethod inputs and the closest I've found is repeat however this performs inconsistently over different device sizes. Ideally I'd just want the image to not scale but that's likely just ignorance on my side in terms of understanding the way images are rendered.

Current code:

const AnimatedDemo = () => {
  const overlayPicHeight = useSharedValue(0);

  useEffect(() => {
    overlayPicHeight.value = withTiming(100, {
      duration: 5000,
    });
  }, []);

  const animatedHeight = useAnimatedStyle(() => ({
    height: `${overlayPicHeight.value}%`,
  }));

  return (
    <View style={styles.container}>
      <Animated.Image
        source={require("./dog2.jpeg")}
        style={[{ width: "100%", height: "100%" }]}
      />
      <Animated.Image
        source={require("./dog2-pixel.jpeg")}
        style={[
          { width: "100%", position: "absolute", zIndex: 1 },
          animatedHeight,
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: "90%",
    alignItems: "center",
  },
});

Note - if I can achieve the same kind of effect without needing to use the 2nd , I'm all ears, as this would likely resolve my issue too

React Native - animate image height without scaling (reanimated v2)

0 Answers0