On my React Native app’s homepage, I have an animation in which an array of images is constantly moving upwards in the background. However, every time I use my navigation bar to switch pages, the app crashes.

I think this issue is due to having to load the animation every swap since my code is not at all optimized (shown below).

If you have any suggestions on what I could do, it would be really helpful!

const AnimatedImage = ({ source }: any) => {
  const screenHeight = Dimensions.get('window').height;
  // Calculate initial top position randomly spread over the screen
  const initialTop = Math.random() * screenHeight;

  // useRef to keep the value constant across re-renders
  const position = useRef(new Animated.Value(initialTop)).current;
  const duration = useRef(getRandomDuration(initialTop));

  useEffect(() => {
    const moveImage = () => {
      Animated.timing(position, {
        toValue: -100,
        duration: duration.current,
        easing: Easing.linear,
        useNativeDriver: false  // Maybe using true is better, but I'm unsure how to implement :(
      }).start(() => {
        position.setValue(screenHeight);
        duration.current = getRandomDuration(screenHeight);
        moveImage();
      });
    };
    moveImage();
  }, []);

  return (
    <Animated.View style={{ position: 'absolute', top: position }}>
      <Image source={source} style={getRandomStyle()} />
    </Animated.View>
  );
};

I’ve tried to use the native driver, but so far I have not found a workaround of not altering the “top” property without breaking the animation somehow.