freeCodeCamp/guide/english/react-native/animations/index.md

title

title
Animations in React Native

Animations in React Native

In React Native, moving objects on screen is not as hard as you thought. There is a API named Animated. The API has several functions to animate things as decay, spring and timing. Timing function is the most used one and we will create a demo withAnimated.timing().

Let's start with importing our API and View component that will be moving.

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

There are 3 fundamental steps of applying Animated API

1. Assign a value that the animation will progress with
2. Determine what type of animation will be applied
3. Wrap the component to be animated

For first step we need to declare a animated value in constructor method.

constructor() {
 super();
 this.spinValue  =  new  Animated.Value(0);
}

Initially, we set the value to 0.

Timing function will help us change that spinValue in a specific duration. As second step, we need to determine the animation type with animated functions.

spin() {
 Animated.timing(this.spinValue, {
     toValue:  1,
     duration:  4000,
     easing: Easing.linear 
 }).start(() => {
     this.spinValue.setValue(0);
     this.spin();
 });
}

The function takes our animated value as first parameter. Basically, timing function will move the given animated value to a number that is given in toValue: 1. The good thing timing function provides us is the duration. Since we set duration to 4000ms , it will take 4 seconds for the value to be 1 from 0. After 4 seconds, timing function will stop and the call given callback in start(). We set our value to 0 and call spin again in callback function. Therefore, spin function becomes recursive and we have the infinite animation.

The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

Linear function is chosen above because we want our animation to be nonstop. You can simply experience the difference by removing Easing.linear line.

componentDidMount life-cycle method is great place to call spin method because it's called once the components are mounted on screen.

componentDidMount() {
  this.spin();
}

Everything looks great, we have a value that is changing 0 to 1 in 4 seconds. Why don't we use this changing value to interpolate our style objects ?

getMovement() {
  const  rotate  =  this.spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  });
  return  rotate;
}

The interpolate function allows animated values to be derived from other animated values.

While timing function changing animated value to 1, interpolate function creates values with the given ratio in inputRange and outputRange.

• If input is 0 then give '0deg'
• If input is 1 then give '360deg'

There is only one step left to complete. The third one ' Wrap the component to be animated'. We can either wrap a component as

<Animated.View>
  <View />
</Animated.View>

or we can directly move the Animated.View itself. I will go with the second option.

render() {
  return (
    <View  style={{ flex:  1, justifyContent:  'center', alignItems:  'center'}}>
      <Animated.View
        style={{
          transform: [{ rotate:  this.getMovement() }],
          width:  100,
          height:  100,
          backgroundColor:  'pink'
        }}
      />
    </View>
  );
}

getMovement returns our interpolated value and we set it to transform property of our style object. Eventually, we have the spining pink square in the middle of screen. As a challange you can try to create a ball jumping on screen.

Happy Hacktoberfest !

Sources

• AnimationBook
• React Native Documents