How to Create Delays in between Animations in React Native?

Nov 04, 2022 . Admin

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 can easy and simply animation in react native app.below's this example.

Step 1: Download Project

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

expo init ExampleApp
Step 2: App.js

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.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
  }, [initialMove, endMove, initialOpacity, endOpacity, duration]);

  return (
    <View style={styles.container}>
            opacity: initialOpacity,
            translateX: initialMove,

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
  square: {
    height: 100,
    width: 100,
    backgroundColor: 'blue',

export default Delay;
Step 3: Run Project

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

expo start

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


It will help you...

#React Native