How to Implement React Native Animations Using Animated API

Table of Contents

Introduction

Animations are an essential part of a UX of an application. Animations significantly impact the user for a better interaction experience and smoothen the user engagement. Whenever there is an extended functionality to perform, the animation is a great idea to engage users.

Animation has a movement from the static state to the state of motion for better user interaction. Animations have various transitions to show elements and thus make it enjoyable.

You might be tempted to implement React Native Animations using animated API, and maybe you are searching for how to get started with React Native animations. Here is a step-by-step guide on adding React Native animations from scratch.

Tutorial Goal: Learn to Implement React Native Animations

We will learn about how to get started with React Native Animations using the React Native Animated library. The video is the final output of advanced animations in React Native.

The main workflow is to create an Animated Value and use it for different components. We will be discussing the following React Native Animation Types also:

Please add some information to these points as well

Animated.timing()
It allows us to define an animation to a specific value over a certain amount of time.

Animated.spring()
It allows us to define animation from start points to endpoints without defining time as we did in timing.

Animated.parallel()
It allows us to have all the defined animations in the array to trigger at the same time.

Animated.sequence()
It allows us to have all the defined animations in the array to trigger one after another.

Working with React Native Animations

We will start the animation by using the start() function to our animation-type methods.

start() takes a completion callback called when the animation task is completed, creating an infinite animation.

Using start function with Animated.timing() :-

Animated.timing(value,{}).start()

Animated.timing() will take two parameters here, a value and an object. The object can take values such as toValue, duration, opacity, etc.

Another parameter we will be using is useNativeDriver.The native driver helps send out everything about the animation to the native code before animation starts, through which native code can perform the Animation UI on the thread.

Use this in the animation configuration:

useNativeDriver: true

There are multiple React Native Animatable components and only these components can be animated.

• Animated.View
• Animated.Image
• Animated.FlatList
• Animated.SectionList
• Animated.Text
• Animated.ScrollView

You May Also Like to Read: React Native Firebase Auth | Set-up Email Authentication

Steps to Quickly Add Animations in React Native App

The entire source code is available here – Github repo

Creating a React Native App

Initially, we will create a react native app using:

react-native init Animation

Installing dependencies for Navigation

Install stack navigation for navigating screens using:

npm install react-native-gesture-handler 
react-native-safe-area-context @react-navigation/native 
@react-navigation/stack.

Creating Components

We will create basic animation screens such as-

1. Fade Animation
2. Spin Animation
3. Scale Animation
4. Spring Animation
5. Parallel Animation
6. Sequence Animation

And a main.js file in which we will import all these screens for navigating.

We will pass the type of animation of the component in useEffect() as the argument, so whenever we navigate to the screen respective component is rendered immediately based on the type.

Fade Animation

This screen will create an animation on the image component, which fades in on render.

Create an Animated.Value() for animation every time to make component animatable :

const Fade= new Animated.Value(0)

We will call Animated.timing() in useEffect(). The purpose of Animated.Timing() is to change the input value to a specified output value after a certain amount of time.

useEffect(()=>{
    Animated.timing(Fade,{
       toValue:1,
       duration:3000, 
       useNativeDriver: true 
     }).start()
 },[Fade])

Animated.Timing() takes the first argument as the value which needs to be updated; a second argument is an object containing three values. The first value toValue:1 updates the value of Fade to 1. The second argument duration:3000 is the specific amount of time after which it should reflect animation, and the third argument is useNativeDriver: true, which I have explained above.

< Animated.Image
   style= { {marginTop:5,height:200,width:200,opacity:Fade, } }
   source= { { uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" } }
 >
< /Animated.Image >

opacity : Fade takes the value of Fade to implement animation after the duration of 3000ms.

Spin Animation

Spin animation rotates and makes the component spin according to the output degree values.

const Spin =  new Animated.Value ( 0 )
const SpinValue =  Spin.interpolate ({
inputRange :  [ 0, 1 ],
outputRange :  [ '0deg', '360deg' ]
} )

Interpolation: Interpolation is a way to estimate function at intermediate points defined from input range and output range. We can change colors, rotate and scale the animation component using interpolation.

useEffect(()=>{
   Animated.timing(Spin,{
      toValue:1,
      duration:3000,
      useNativeDriver:true
  }).start()
},[Spin])

< Animated.Image
style={{height:150,width:180,marginTop:8,borderRadius:20,transform:[{rotate:SpinValue}]}} 
source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }}
>
< /Animated.Image >

We have used transform configuration in the image style, which suggests rotating with the parameter SpinValue as output range of 360 degrees defined with the interpolation above.

Create Scaling Animations in React Native

Scale animation grows and expands the component.

const Scale = new Animated.Value ( 0 )
const ScaleValue= Scale.interpolate ( {
inputRange: [ 0, 1 ],
outputRange: [ 1, 2 ]
} )

useEffect(()=>{
   Animated.timing(Scale,{
      toValue:1,
      duration:3000,
      useNativeDriver:true
  }).start()
},[Scale])

< Animated.Image
style={{height:100,width:130,transform:[{scale:ScaleValue}]}}
source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }}
>
< /Animated.Image >

We have used transform configuration in the image style, which suggests scaling with the parameter ScaleValue of specified output range defined with the interpolation above.

Spring Animation

Spring Animation is like what spring looks like when it’s in motion.

const Spring= new Animated.Value(0.2)

useEffect(()=>{
Animated.spring(Spring,{
    toValue:1.1,
    friction:1,
    useNativeDriver:true}).start()
},[Spring])

Here Animated.spring() animation takes a configuration similar to the Animated.timing() instead of duration it uses friction and tension as the physics spring model.

< Animated.Image
style={{height:150,width:180,transform:[{scale:Spring}]}}
source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }}
>
< /Animated.Image >

Parallel Animation

Parallel animation takes an array of different Animation type configurations to animinate them parallelly.

Here we are taking three different animatable components,i.e., Scale, spring, and rotate, to make them animate parallelly.

Initializing animated values with interpolation for three scenario:

const Scale = new Animated.Value(0)
  const ScaleValue = Scale.interpolate({
    inputRange: [0, 1],
    outputRange: [-3, 2]
  });
  const Spin = new Animated.Value(0)
  const SpinValue = Spin.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"]
  });

  const SpringVal = new Animated.Value(1)
Starting Animation for parallel animation type in use effect:
 useEffect(() => {
    Animated.parallel(
      [
        Animated.timing(Scale, { 
            toValue: 1, 
            duration: 3000, 
            useNativeDriver: true 
       }), //scaling

         Animated.spring(SpringVal, { 
             toValue: 2, 
             friction: 1, 
             tension: 0.5, 
             useNativeDriver: true 
        }),    //spring

        Animated.timing(Spin, { 
             toValue: 1, 
             duration: 3000, 
             useNativeDriver: true 
       })  //spin
     ])
      .start()
 }, [Scale, SpringVal, Spin])

Rendering Animated components(View and text) on the screen with types:

 < Animated.View
        style={{ height: 50, width: 80, 
         backgroundColor: 'red', 
         transform: [{ scaleX: ScaleValue }] }}
  >
 
 
      What's up
 
 
        Welcome here !!
< /Animated.Text >

Sequence Animation

Sequence Animation takes an array of different Animation type configurations and animates them one by one after the previous one ends.

Here we are taking three different animatable components,i.e., Scale, spring, and rotate, to make them animate sequentially; everything else is similar to parallel animation.

Initializing steps will be similar to the parallel except the starting of the animation component.It uses Animated.sequence() type in useeffect :

 useEffect(() => {
    Animated.sequence(
      [
        Animated.timing(Scale, { 
           toValue: 1, 
           duration: 3000, 
           useNativeDriver: true 
        }), //scaling
        Animated.spring(SpringValue, { 
           toValue: 2, 
           friction: 1, 
           tension: 0.5, 
           useNativeDriver: true 
        }),    //spring
        Animated.timing(Spin, { 
            toValue: 1, 
            duration: 3000, 
            useNativeDriver: true 
        })  //spin
     ]).start()
}, [Scale, SpringValue, Spin])

Conclusion