AppDividend
Latest Code Tutorials

React Native Animation: The Complete Guide

This example is Kickstarter for React Native Animation, and complex cases will be covered in the future. But right now, we start our project by installing React Native using Expo.

If you are not familiar with the expo, I suggest that you first check this tutorial on How To Setup React Native Using ExpoIt will help you set up the expo, and you will be up and running with React Native on your physical device.

React Native Animation

React Native provides two complementary animation systems:

  1. Animated: For granular and interactive control of specific values, and
  2. LayoutAnimation: For animated global layout transactions.

The recommended way to animate in React Native for most cases is by using the Animated API.

#Layout Animations

The Layout Animations system is easy to set up, and we do not have much control. Some parts of our application will also be animated, whether we have intended it or not. So there is not much control over all of our components. So we do not use this kind of Animation.

#Animated

It is more complicated to set up, but it is perfect to create complex animations, and it allows us to handle the Gesture animations. The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between the inputs and outputs, with configurable transforms in between and simple start/stop methods to control time-based animation execution.

Three questions describe the whole animation system.

  1. Where is our primary object or item right now? So it’s X and Y position in the current scenario.
  2. Where is the Element moving to? So the place where we need to shift our element.
  3. Which element are we going to move?

The answers to all the above questions define the Animation system.

So the Animated Module consists of three things.

  1. Values: The Current XY values of an element
  2. Types: Which type of Animation we will use like Spring, Timing, Decay
  3. Components: On which components like Text, View, Image.

It is a basic demo app, and we move the square from top to bottom with Animation.

Now, if you do not want to use expo and create a project and test in Simulator or Emulator, you can type the following command to install React Native on Mac. On the other hand, if you are using Expo, you can skip the first step.

Step 1: Install React Native.

Type the following command.

react-native init AnimationApp

Go into the project.

cd AnimationApp

To open the app inside our iOS Simulator, type the following command.

react-native run-ios --simulator="iPhone X"

React Native Animation Tutorial With Example

Step 2: Create Square Animation.

Now, open the project folder inside your favorite editor. I recommend that you start using VSCode if you are not using it already. It is the best open source and free editor for JavaScript development.

Okay, now, create one folder in the root called components, and inside this folder, create a component called  SquareAnimation.js and add the following code.

// SquareAnimation.js

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

class SquareAnimation extends Component {

    componentWillMount() {
        this.position = new Animated.ValueXY(0, 0);
        Animated.spring(this.position, {
            toValue: { x: 225, y: 575 }
        }).start();
    }

    render() {
        return (
            <Animated.View style={ this.position.getLayout() }>
                <View style={ styles.square } />
            </Animated.View>
        );
    }
}

const styles = {
    square: {
        width: 120,
        height: 120,
        backgroundColor: '#00BCD4'
    }
}
export default SquareAnimation;

So, first, I have defined the View, and that view’s shape is Square based on its styles. So we are moving the square from top to bottom and see how basic Animation works in React Native.

On the componentWillMount() lifecycle method, we have set the Square position to 0, and we start immediately moving our object to values of X = 225 and Y = 575.

Also, we have wrapped the View with the Animated.View. So we can see the Animation from  (0, 0) to (225, 575).

Animated.spring() function will take the first argument as an initial position and then takes the second argument to how far we need to move that object, and then we are called the start function().

Here, we are moving the Square View. So we have wrapped  Squared View (View which has style square)with the Animated.View.

So, with the help of this.position.getLayout(), we can fetch the style of the previous and current location of the object, and we can see a complete animation.

We take as many elements inside <Animated.view>. As of right now, we have just picked the Square. But you can add as many items as you want.

Now, finally, Add the SquareAnimation.js component inside the App.js file.

// App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import SquareAnimation from './components/SquareAnimation';

export default class App extends Component {
  render() {
    return (
      <View>
        <SquareAnimation />
      </View>
    );
  }
}

Save the file and see the iPhone X Simulator. Refresh the Simulator again and again, and you can see that the Square is moving from top to bottom as per defined positions.

React Native Animations Example

So this example is the Very Easy Implementation of React Native Animation Tutorial. We will create a Gesture-based animation in the future post.

That’s it.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.