How to Manage Multiple Animations in React Native?

Nov 05, 2022 . Admin

This tutorial is focused on react native animated multiple animations on one element. I explained simply about how to manage multiple animations in react native. I would like to show you how to add animation in react native. this example will help you react native multiple animations.

In this example,We will create multi animation in react can easy and simply create multi 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 Sequence = () => {
  const initialOpacity = new Animated.Value(1);
  const initialMove = new Animated.Value(0);
  const endOpacity = 0;
  const endMove = 100;
  const duration = 3000;

  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',
    alignItems: 'center',
    flex: 1,
  square: {
    height: 100,
    width: 100,
    backgroundColor: 'green',

export default Sequence;
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