How to Create Moving Animations in React Native

What if you want to create animated moving objects in your react native app? Then, you are in the right place. This is the third part of the react native animation tutorial series.

As we did earlier, in order to move a view over the x-axis, the y-axis, or both you have to use Animated API and transform property.

So, let’s check how to move a square through the x-axis. Let’s set Animated.Value() as 0. The end value is set as 150, which means the square translates 150 units related to the current position. The duration is set as 5000 ms, which is five seconds.

  const startValue = useRef(new Animated.Value(0)).current;

Animated.timing() is used to start the translate animation of the x position over a fixed period of time.

Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();

Then we use Animated.View and translateX prop of transform to bring the animation visually.

<Animated.View
        style={[
          styles.square,
          {
            transform: [
              {
                translateX: startValue,
              },
            ],
          },
        ]}
      />

Following is the complete example of react native moving animation through the x-axis.

import React, {useEffect, useRef} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const MoveX = () => {
  const startValue = useRef(new Animated.Value(0)).current;
  const endValue = 150;
  const duration = 5000;

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

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

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

export default MoveX;

Here’s the output of react native animation example.

When we need to create moving animation through the y-axis, just replace translateX prop with translateY as given in the full example below.

import React, {useEffect, useRef} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const MoveY = () => {
  const startValue = useRef(new Animated.Value(0)).current;
  const endValue = 150;
  const duration = 5000;

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

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

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

export default MoveY;

The following is the output.

If you want to move the square through both axes then you need to initiate with Animated.ValueXY(). That’s because we use both x coordinates and y coordinates to move the square. See the full example given below.

import React, {useEffect, useRef} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const MoveXY = () => {
  const startValue = useRef(new Animated.ValueXY(0, 0)).current;
  const endValue = 150;
  const duration = 5000;
  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue]);

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

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

export default MoveXY;

The following is the output of the animation example.

You can get the source code of all my examples given in this tutorial series from this Github repository.