Repeat animation with new animated api

Question

React-native introduce new Animated API, I want to make a loop animation such as a bubble scale up then scale down and repeat that progress.

However I can n

Answer 1

Here's another example for an infinite animation using hooks and iterations set to "infinity". Avoids the use of the recursion in previous answers which sometimes led to funky behaviour during e2e testing for us.

  const rotation = React.useRef(new Animated.Value(0)).current;

  function runAnimation() {
    return Animated.loop(
      Animated.timing(rotation, {
        toValue: 1,
        duration: 1200,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
      {resetBeforeIteration: true, iterations: Number.MAX_SAFE_INTEGER},
    );
  }

  React.useEffect(() => {
    const animation = runAnimation();
    return () => animation.stop();
  }, []);