React Native Animation Tutorial Series (Part 3): How to Create Moving Animations in React Native

Last Updated on December 15, 2020.

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.

this.state = {
      startValue: new Animated.Value(0),
      endValue: 150,
      duration: 5000,
    };

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

Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.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: this.state.startValue,
                },
              ],
            },
          ]}
        />

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

Class Component

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

export default class MoveX extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(0),
      endValue: 150,
      duration: 5000,
    };
  }

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

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

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

Function Component

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

const MoveX = () => {
  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',
    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, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class MoveY extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(0),
      endValue: 150,
      duration: 5000,
    };
  }

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

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

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

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, {Component} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

export default class MoveXY extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.ValueXY(0, 0),
      endValue: 150,
      duration: 5000,
    };
  }

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

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

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

The following is the output of the animation example.

react native move animation

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

Leave a Reply

%d bloggers like this: