Incorrect usage of Animated.Value causing gestures and state to be reset

[gaearon]

It is not correct to re-create Animated.Value on every render like this:

• react-native-image-viewing/src/hooks/usePanResponder.ts

  Lines 66 to 67 in 8a91a9c

  	const scaleValue = new Animated.Value(initialScale);
  	const translateValue = new Animated.ValueXY(initialTranslate);

• react-native-image-viewing/src/hooks/useAnimatedComponents.ts

  Lines 18 to 19 in 8a91a9c

  	const headerTranslate = new Animated.ValueXY(INITIAL_POSITION);
  	const footerTranslate = new Animated.ValueXY(INITIAL_POSITION);

• react-native-image-viewing/src/components/ImageItem/ImageItem.ios.tsx

  Lines 62 to 64 in 8a91a9c

  	const scrollValueY = new Animated.Value(0);
  	const scaleValue = new Animated.Value(scale || 1);
  	const translateValue = new Animated.ValueXY(translate);

This is not valid because Animated values are stateful, and so they should be kept in state or a ref. Otherwise, any state update to the component will interrupt the current animation and/or gesture.

I'm filing this for future readers or whoever has a fork of this code in their codebase.

A potential fix would look like this: bluesky-social/social-app#1618