React Native Animation Tutorial Series (Part 5): How to Create Looping Animations in React Native

Last Updated on December 15, 2020.

In the previous blog post about animation, we discussed how to create spring animation in react native and now, let’s see how to create animations that loop over how much iterations we define.

In order to create looping animations in react native, we should use Animated.loop() method. Wrap your Animations within Animated.loop() and the animations will act as a loop.

Animated.loop(
      Animated.spring(this.state.startValue, {
        toValue: this.state.endValue,
        friction: 1,
        useNativeDriver: true,
      }),
      {iterations: 1000},
    ).start();

As you see, the Animated.Spring() animation now loops over 1000 iterations. If you don’t define iterations then the default value of iteration is -1 which means infinity.

Following is the full example of react native looping animation.

Class Component

import React, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class Loop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(1),
      endValue: 1.5,
    };
  }

  componentDidMount() {
    Animated.loop(
      Animated.spring(this.state.startValue, {
        toValue: this.state.endValue,
        friction: 1,
        useNativeDriver: true,
      }),
      {iterations: 1000},
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              transform: [
                {
                  scale: this.state.startValue,
                },
              ],
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    height: 50,
    width: 50,
    backgroundColor: 'red',
  },
});

Function Component

import React, {useEffect} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const Loop = () => {
  const startValue = new Animated.Value(1);
  const endValue = 1.5;

  useEffect(() => {
    Animated.loop(
      Animated.spring(startValue, {
        toValue: endValue,
        friction: 1,
        useNativeDriver: true,
      }),
      {iterations: 1000},
    ).start();
  }, [startValue, endValue]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            transform: [
              {
                scale: startValue,
              },
            ],
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    height: 50,
    width: 50,
    backgroundColor: 'red',
  },
});

export default Loop;

And here’s the output:

react native animation loop

This blog post is a part of react native animation tutorial series. You can get the source code of all the animation examples in this series from this GitHub repository.

Leave a Reply

%d bloggers like this: