React Native Animation Tutorial Series (Part 9): How to Create Delays in between Animations in React Native

Last Updated on December 15, 2020.

In the previous blog post, we went through how the multiple animations are managed using methods such as parallel() and sequence(). Now, let’s discuss how to add delays in between animations in react native.

When you are composing animations with sequence() and stagger() you can use Animated.delay() method to begin animations after a delay. Let’s see how to use the delay() method.

Animated.sequence([
      Animated.timing(this.state.initialMove, {
        toValue: this.state.endMove,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
      Animated.delay(1000),
      Animated.timing(this.state.initialOpacity, {
        toValue: this.state.endOpacity,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
    ]).start();

Here, there’s a delay of 1000 ms in between two animations. You should place the delay appropriately matching your needs.

Here’s the full example of creating delays in react native animation.

Class Component

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

export default class Delay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initialOpacity: new Animated.Value(1),
      initialMove: new Animated.Value(0),
      endOpacity: 0,
      endMove: 100,
      duration: 3000,
    };
  }

  componentDidMount() {
    Animated.sequence([
      Animated.timing(this.state.initialMove, {
        toValue: this.state.endMove,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
      Animated.delay(1000),
      Animated.timing(this.state.initialOpacity, {
        toValue: this.state.endOpacity,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
    ]).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              opacity: this.state.initialOpacity,
              translateX: this.state.initialMove,
            },
          ]}
        />
      </View>
    );
  }
}

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

Function Component

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

const Delay = () => {
  const initialOpacity = new Animated.Value(1);
  const initialMove = new Animated.Value(0);
  const endOpacity = 0;
  const endMove = 100;
  const duration = 3000;

  useEffect(() => {
    Animated.sequence([
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.delay(1000),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();
  }, [initialMove, endMove, initialOpacity, endOpacity, duration]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            opacity: initialOpacity,
            translateX: initialMove,
          },
        ]}
      />
    </View>
  );
};

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

export default Delay;

Here’s the output of the delayed animation example:

react native delay animation example

You can get the source code of all my animation examples given in this tutorial series from this Github repository.

Leave a Reply

%d bloggers like this: