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 native.you can easy and simply create multi 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 Sequence = () => {
  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.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: 100,
    width: 100,
    backgroundColor: 'green',
  },
});

export default Sequence;

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...