In this post, we will learn react native animation delay code example. let’s discuss about react native delay animation. I would like to show you how to create animation in react native. Here you will learn react native animated example. Alright, let’s dive into the steps.

In this example,We will create to delays between animations in react native.you can easy and simply animation in react native app.below's this example.

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the code.

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 = 4000;

  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',
    flex: 1,
  },
  square: {
    height: 100,
    width: 100,
    backgroundColor: 'blue',
  },
});

export default Delay;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...