How to repeat animation with React Native?

Sometimes, we want to repeat animation with React Native.

In this article, we’ll look at how to repeat animation with React Native.

How to repeat animation with React Native?

To repeat animation with React Native, we can use the Animated.loop method.

For instance, we write:

import * as React from 'react';
import { View, Animated, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const c = new Animated.Value(0);

export default function App() {
  React.useEffect(() => {
    Animated.loop(
      Animated.timing(c, {
        toValue: 300,
        duration: 3000,
      }),
      { iterations: 5 }
    ).start();
  }, []);

  const color = c.interpolate({
    inputRange: [0, 200, 300],
    outputRange: ['orange', 'lightgreen', 'yellow'],
  });

  return (
    <Animated.View style={{ backgroundColor: color }}>
      <Text>hello world</Text>
    </Animated.View>
  );
}

to call Animated.loop with the animation object we created from Animated.timing and an object to set the iterations to 5 to repeat the animation 5 times.

Then we call interpolate to interpolate the color for the animation.

And use color as the backgroundColor‘s value.

Conclusion

To repeat animation with React Native, we can use the Animated.loop method.