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 native.you can easy and simply animation in react native app.below's this example.
Step 1: Download ProjectIn the first step run the following command to create a project.
expo init ExampleAppStep 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.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;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.
Output:

It will help you...