UseTransition() and Reanimated 1.3.0

I am getting a weird behaviour with different animations after updating to react-native-reanimated 1.3.0.

Here my specs:

"react-native-gesture-handler": "^1.4.0",
"react-native-redash": "^8.1.2",
"react-native-reanimated": "1.3.0",
"react-native": "0.61.1",
"react": "16.9.0",

The animation gets triggered every time as shown in the video below:

Here the code:

    const [isOnFocus, setOnFocus] = useState<0 | 1>(0);
    let animatedValue = isOnFocus || value ? 1 : 0;
    const transition = useTransition(
      animatedValue,
      not(animatedValue),
      animatedValue,
      160,
      Easing.ease,
    );
    const inputRange = [0, 1];
    const fontSize = interpolate(transition, {
      inputRange,
      outputRange: [18, 10],
    });
    const top = interpolate(transition, {
      inputRange,
      outputRange: [20, 5],
    });
 
    return (...); 

It used to work with Reanimated 1.2.0, but I need to upgrade it due to other problems.

Any suggestions? Am I missing something? Thanks for the help in advance 😃

[wcandillon]

This particular issue didn’t appear to be fixed, will test it further

[lucaspelloni2]

We found the solution together with @warrioru. The problem of react-native-reanimated 1.3.0 is that is causes a re-render in the hook everytime the animatedValue gets updated.

the soluton was to introduce a componentDidUpdate hook for checking the prev state. the animation happens now only when the animated state changes.

function usePrevious(x: any) {
  // The ref object is a generic container whose current property is mutable ...
  // ... and can hold any value, similar to an instance property on a class
  const ref = useRef();

  // Store current value in ref
  useEffect(() => {
    ref.current = x;
  }, [x]); // Only re-run if value changes

  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

    let animatedValue = isOnFocus || value ? 1 : 0;
    const prev = usePrevious(animatedValue);
    const transition = useTransition(
      animatedValue,
      not(animatedValue),
      animatedValue,
      400,
      Easing.ease,
    );
    const inputRange = [0, 1];

    let fontSize, top;
    if (prev !== animatedValue) {
      fontSize = interpolate(transition, {
        inputRange,
        outputRange: [FONT_SIZE, FONT_SIZE - 5],
      });
      top = interpolate(transition, {
        inputRange,
        outputRange: [normalize(18), 10],
      });
    }