How to Making Animations In React Native

How to Making Animations In React Native

A good to mention we will be comparing the examples we are going to create with rnal (react native animations library) the library I’ve created a library that does that all the kind of the animations you may want use

The animations are an important part of the UX of an app, and interacting with the user using the animations create a better experience for the user, the most successful user experience are made with animations, that’s why we are goin to play around animations in React Native, technically React Native provide a great animations API that give us the ability to do different transitions and the animations .

New to React Native? check my article introduction to React Native check this out!

You may want how to style a React Native app and the options you can use to do the Job check Styling in React Native.

Now, what are we gonna is create animations like Fade,slideUpslideDownrotate ..etc. using the animations API.

A good to mention we will be comparing the examples we are going to create with rnal (react native animations library) the library I’ve created a library that does that all the kind of the animations you may want use. 

First, of all to start using animations, we are using Animated module that react-native provides to do the magic things for us

When building components, I’d advise using Bit to share and manage them across projects as a team- so you can build faster and stay in sync. Try it:

React animations as Bit components: reusable building blocks

LayoutAnimation !!!

import {Animated} from "react-native";

Let’s start first with Fade

 :Fade animation

The Animated method takes parameters as values and turns those values into animated values then we can use those values to animate our

Components, okay! show me the code!

import React, { Component } from "react";
    import {
      Text,
      View,
      StyleSheet,
      Animated,
      TouchableOpacity
    } from "react-native";


export default class Fade extends Component {
  state = {
    fadeValue: new Animated.Value(0)
  };


  _start = () => {
    Animated.timing(this.state.fadeValue, {
      toValue: 1,
      duration: 1000
    }).start();
  };


  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.btn} onPress={() => this._start()}>
          <Text style={styles.textBtn}>Start</Text>
        </TouchableOpacity>
        <Animated.View
          style={{
            opacity: this.state.fadeValue,
            height: 250,
            width: 200,
            margin: 5,
            borderRadius: 12,
            backgroundColor: "#347a2a",
            justifyContent: "center"
          }}
        >
          <Text style={styles.text}>Fade </Text>
        </Animated.View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    alignItems: "center",
    justifyContent: "center"
  },
  item: {},
  btn: {
    backgroundColor: "#480032",
    width: 100,
    height: 40,
    padding: 3,
    justifyContent: "center",
    borderRadius: 6
  },
  text: {
    fontSize: 20,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  item1: {
    backgroundColor: "red",
    padding: 20,
    width: 100,
    margin: 10
  },


  textBtn: {
    color: "#f4f4f4",
    fontWeight: "bold",
    textAlign: "center"
  }
});

Let’s break it down!

First, we need to initialize a value so we can give this value to the Animatedmethod :

state = {

fadeValue: Animated.Value(0) };

Then let’s create a function called _start that will start our animations:

_start = () => {

return Animated.timing(this.state.fadeValue, { toValue: 1, // output duration: 3000, // duration of the animation }).start(); };

What we just did here? we used timing method from Animated , it takes some values:

  • The first argument is the value we want to animate
  • The second is an object of options to define how our animation should work.
  • And finally, the start() callback that starts the animations!

Now we have an animated value, the next step is to use it to animate the component. we use Animated.View as a wrapper to our component in order to make the animations happen !

<Animated.View

style={{

opacity: this.state.fadeValue,

height: 250,

width: 200,

margin: 5,

borderRadius: 12,

backgroundColor: "#347a2a",

justifyContent: "center"

}}

>

<Text style={styles.text}>Fade </Text>

</Animated.View>

You see we passed the fadeValue to the opacity property so we can handle the opacity of the element so when the component start appears it happens smoothly and in an animated behavior! and that gives us the fadeanimation !

Now let's call the _start() function when an action is taken , in our case we call the function when button is clicked. you can trigger the function whenever you like for example within componentDidMount() .

<TouchableOpacity style={styles.btn} onPress={() => this._start()}>

Doing the Fade animation with rnal

rnal made things for us more easy to create the fade animation:

First, let’s install the package :

With Yarn hit yarn add rnal , or npm run npm i rnal

Then Import The Fade element :

import React, { Component } from "react";
    import {
      Text,
      View,
      StyleSheet,
      Animated,
      TouchableOpacity
    } from "react-native";
    import { Fade } from "rnal";

export default class MyComponent extends Component {
  state = {
    ready: false
  };


  render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity
          style={styles.btn}
          onPress={() =&gt; this.setState({ ready: true })}
        &gt;
          &lt;Text style={styles.textBtn}&gt;Start&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;Fade startWhen={this.state.ready}&gt;
          &lt;View
            style={{
              height: 250,
              width: 200,
              margin: 5,
              borderRadius: 12,
              backgroundColor: "#347a2a",
              justifyContent: "center"
            }}
          /&gt;
          &lt;Text style={styles.text}&gt;Fade &lt;/Text&gt;
          &lt;View /&gt;
        &lt;/Fade&gt;
      &lt;/View&gt;
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    alignItems: "center",
    justifyContent: "center"
  },
  item: {},
  btn: {
    backgroundColor: "#480032",
    width: 100,
    height: 40,
    padding: 3,
    justifyContent: "center",
    borderRadius: 6
  },
  text: {
    fontSize: 20,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  item1: {
    backgroundColor: "red",
    padding: 20,
    width: 100,
    margin: 10
  },


  textBtn: {
    color: "#f4f4f4",
    fontWeight: "bold",
    textAlign: "center"
  }
});

And:

Fade has startWhen props, it’s a type of boolean and it determines when the animation should start by default it starts when the component mount, you can discover more options to customize your animations

Let’s try with something more awesome like making the component goes from the bottom or SlideDown animation. we will use the same code above but we need to change some values! and we will use interpolate method to interpolate the AnimatedValue cool let’s do it 

SlideDown animation

import React, { Component } from "react";
    import {
      Text,
      View,
      StyleSheet,
      Animated,
      TouchableOpacity
    } from "react-native";
    import { Fade } from "rnal";

export default class MyComponent extends Component {
  state = {
    ready: false,
    animatedValue: new Animated.Value(0)
  };


  _start = () =&gt; {
    Animated.timing(this.state.animatedValue, {
      toValue: 1,
      duration: 1000
    }).start();
  };
  render() {
    let { animatedValue } = this.state;
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity style={styles.btn} onPress={() =&gt; this._start()}&gt;
          &lt;Text style={styles.textBtn}&gt;Start&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;Animated.View
          style={{
            transform: [
              {
                translateY: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [-600, 0]
                })
              }
            ],
            height: 250,
            width: 200,
            margin: 5,
            borderRadius: 12,
            backgroundColor: "#347a2a",
            justifyContent: "center"
          }}
        /&gt;
        &lt;Text style={styles.text}&gt;Fade &lt;/Text&gt;


        &lt;Animated.View /&gt;
      &lt;/View&gt;
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    alignItems: "center",
    justifyContent: "center"
  },
  item: {},
  btn: {
    backgroundColor: "#480032",
    width: 100,
    height: 40,
    padding: 3,
    justifyContent: "center",
    borderRadius: 6
  },
  text: {
    fontSize: 20,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  item1: {
    backgroundColor: "red",
    padding: 20,
    width: 100,
    margin: 10
  },


  textBtn: {
    color: "#f4f4f4",
    fontWeight: "bold",
    textAlign: "center"
  }
});

Replace gif with the slideDown animation

The interpolate method takes an Object of properties.

  • inputRange : The start point of the animatedValue: for example, we want the translateX to start from 1 level :
inputRange:[0,1]
  • outputRange : gives us an outputRange based on the inputRange
transform:[

{translateY:animatedValue.interpolate({

inputRange:[0,1],

outputRange:[-600,0]})} ]

Doing the same with react-native-animations-library! is more much simple, there is theSlideDown element so you can wrap the component you want to animate!

import React, { Component } from "react";
    import {
      Text,
      View,
      StyleSheet,
      Animated,
      TouchableOpacity
    } from "react-native";
    import { Fade, SlideDown } from "rnal";

export default class MyComponent extends Component {
  state = {
    ready: false
  };


  render() {
    let { animatedValue } = this.state;
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity
          style={styles.btn}
          onPress={() =&gt; this.setState({ ready: true })}
        &gt;
          &lt;Text style={styles.textBtn}&gt;Start&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;SlideDown
          startWhen={this.state.ready}
          duration={1000}
          style={{
            height: 250,
            width: 200,
            margin: 5,
            borderRadius: 12,
            backgroundColor: "#347a2a",
            justifyContent: "center"
          }}
        /&gt;
        &lt;Text style={styles.text}&gt;Fade &lt;/Text&gt;


        &lt;SlideDown /&gt;
      &lt;/View&gt;
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    alignItems: "center",
    justifyContent: "center"
  },
  item: {},
  btn: {
    backgroundColor: "#480032",
    width: 100,
    height: 40,
    padding: 3,
    justifyContent: "center",
    borderRadius: 6
  },
  text: {
    fontSize: 20,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  item1: {
    backgroundColor: "red",
    padding: 20,
    width: 100,
    margin: 10
  },


  textBtn: {
    color: "#f4f4f4",
    fontWeight: "bold",
    textAlign: "center"
  }
});

There are cases when need to make the animations to run indefinitely, Animated gives us Animated.loop() method to make this happen let’s see how it works! the best example to demonstrate that is to create a spinner!

import React, { Component } from "react";
    import {
      Text,
      View,
      StyleSheet,
      Animated,
      TouchableOpacity
    } from "react-native";

export default class Infinite extends Component {
  state = {
    rotateValue: new Animated.Value(0)
  };


  componentDidMount() {
    this._start();
  }
  _start = () =&gt; {
    Animated.loop(
      Animated.timing(this.state.rotateValue, {
        toValue: 1,
        duration: 400,
        Infinite: true
      })
    ).start();
  };


  render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Animated.View
          style={{
            transform: [
              {
                rotate: this.state.rotateValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: ["0deg", "380deg"]
                })
              }
            ],
            height: 50,
            width: 50,
            margin: 5,
            borderWidth: 2,
            borderColor: "#888",
            borderBottomColor: "#8bffff",
            borderRadius: 50,
            justifyContent: "center"
          }}
        /&gt;


        &lt;Text style={styles.text}&gt;Fade &lt;/Text&gt;
        &lt;Animated.View /&gt;
      &lt;/View&gt;
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    alignItems: "center",
    justifyContent: "center"
  },
  item: {},
  btn: {
    backgroundColor: "#480032",
    width: 100,
    height: 40,
    padding: 3,
    justifyContent: "center",
    borderRadius: 6
  },
  text: {
    fontSize: 20,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  item1: {
    backgroundColor: "red",
    padding: 20,
    width: 100,
    margin: 10
  },


  textBtn: {
    color: "#f4f4f4",
    fontWeight: "bold",
    textAlign: "center"
  }
});

Here we go!

What we just did is give the Animated.loop our animations as an argument to run it in a loop cycle.

With react-native animation library(rnal), you can just addinifinite props to make this happen!

import { Rotate } from "rnal";

<Rotate infinite>

<View

style={{

height: 50,

width: 50,

margin: 5,

borderWidth: 2,

borderColor: "#888",

borderBottomColor: "#8bffff",

borderRadius: 50,

justifyContent: "center"

}}

/>

<Text style={styles.text}>Fade </Text>

<View />

</Rotate>

If you take a look at the examples above, we don’t actually change much, the same function we just determine where we use then animatedValue yeah it’s all about a value transformed to an animated value and allow us to do the animation we want using translate,scale, rotate and all other supported animations 

That was the way we run a single animation what about making a group of animations? sequence and parallel methods got you covred!

Run a group of animationsWe can usesequence or parallel methods to run a group of animations, the two methods do almost the same job, the only difference is that parallel run the group of animations at once whereas the sequence method blocks the next animation until the previous animation is finished and done, and if one of the animations stops or break the next animation won’t be able to run.

import React, { Component } from "react";
    import {
      Text,
      View,
      StyleSheet,
      Animated,
      TouchableOpacity
    } from "react-native";

export default class MyComponent extends Component {
  state = {
    ready: false,
    SlideInLeft: new Animated.Value(0),
    slideUpValue: new Animated.Value(0),
    fadeValue: new Animated.Value(0)
  };


  _start = () =&gt; {
    return Animated.parallel([
      Animated.timing(this.state.SlideInLeft, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true
      }),
      Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true
      }),
      Animated.timing(this.state.slideUpValue, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true
      })
    ]).start();
  };
  render() {
    let { slideUpValue, fadeValue, SlideInLeft } = this.state;
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity style={styles.btn} onPress={() =&gt; this._start()}&gt;
          &lt;Text style={styles.textBtn}&gt;Start&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;Animated.View
          style={{
            transform: [
              {
                translateX: slideUpValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [-600, 0]
                })
              }
            ],
            flex: 1,
            height: 250,
            width: 200,
            borderRadius: 12,
            backgroundColor: "#c00",
            justifyContent: "center"
          }}
        &gt;
          &lt;Text style={styles.text}&gt;SlideUp &lt;/Text&gt;
        &lt;/Animated.View&gt;
        &lt;Animated.View
          style={{
            transform: [
              {
                translateY: SlideInLeft.interpolate({
                  inputRange: [0, 1],
                  outputRange: [600, 0]
                })
              }
            ],
            flex: 1,
            height: 250,
            width: 200,
            borderRadius: 12,
            backgroundColor: "#347a2a",
            justifyContent: "center"
          }}
        &gt;
          &lt;Text style={styles.text}&gt;SlideInLeft &lt;/Text&gt;
        &lt;/Animated.View&gt;
        &lt;Animated.View
          style={{
            opacity: fadeValue,
            flex: 1,
            height: 250,
            width: 200,
            borderRadius: 12,
            backgroundColor: "#f4f",
            justifyContent: "center"
          }}
        &gt;
          &lt;Text style={styles.text}&gt;Fade &lt;/Text&gt;
        &lt;/Animated.View&gt;
      &lt;/View&gt;
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    alignItems: "center"
  },
  item: {},
  btn: {
    backgroundColor: "#480032",
    width: 100,
    height: 40,
    padding: 3,
    justifyContent: "center",
    borderRadius: 6,
    marginTop: 29
  },
  text: {
    fontSize: 20,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  item1: {
    backgroundColor: "red",
    padding: 20,
    width: 100,
    margin: 10
  },


  textBtn: {
    color: "#f4f4f4",
    fontWeight: "bold",
    textAlign: "center"
  }
});

  • Using parallel method:

With sequence :

Ggenerally, there is much to talk about React Native animations and it’s a huge subject we won’t be able to cover it in one post we will have a chance to talk about other parts in upcoming articles but anyway we just covered the most parts of it and you will be able to create your own animations after reading this article. you can always use the react-native animations library I’ve created it’s so simple and easy to use. Thanks for reading. Keep Visiting

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ Best 50 React Interview Questions for Frontend Developers in 2019

☞ JavaScript Basics Before You Learn React

☞ Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

☞ Reactjs vs. Angularjs — Which Is Best For Web Development

☞ React + TypeScript : Why and How

☞ How To Write Better Code in React

☞ React Router: Add the Power of Navigation

☞ Getting started with React Router

☞ Using React Router for optimizing React apps

react-native reactjs javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.