AppDividend
Latest Code Tutorials

React Native Animation Tutorial With Example

263

Get real time updates directly on you device, subscribe now.

React Native Animation Tutorial With Example is the today’s leading topic. The recommended way to animate in React Native for most cases is by using the Animated API. It is a basic demo app. in which we move the square from top to bottom with animation. 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 the React Native using Expo.

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

React Native Animation Tutorial With Example

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

#1: Install React Native.

Type the following command.

react-native init AnimationApp

Go into the project.

cd AnimationApp

Now 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

#2: Animations With React Native.

There are two kinds of Animation system in React Native.

  1. Layout Animations
  2. Animated

#Layout Animations

In Layout Animations system, it 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 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 is we are going to move?

The answers to all 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.

#3: Create Square Animation.

Now, open the project folder inside your favorite editor. I am recommending that you should start using VSCode if you are not using already. For JavaScript development, it is the best open source and free editor out there.

Related Posts
1 of 8

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

// 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, here, 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 componentWillMount() lifecycle method, we have set the Square position to 0, and then 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 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. So right now that is it for the React Native Animation Tutorial.

Leave A Reply

Your email address will not be published.

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