How to Create Moving Animations in React Native?

Nov 02, 2022 . Admin

In this post, we will learn how to animate in react native. Here you will learn how to create animation movie in mobile. let’s discuss about how to create a moving animation. you will learn react native animation tutorial. You just need to some step to done how to make moving animation.

In this example,We will create to animation in react native.you can easy to simply move to animation in react native.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 App= () => {
  const startValue = new Animated.Value(0);
  const endValue = 150;
  const duration = 5000;

  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue, endValue, duration]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            transform: [
              {
                translateX: startValue,
              },
            ],
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  square: {
    height: 70,
    width: 70,
    backgroundColor: 'red',
  },
});

export default App;

Step 3: Run Project

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