Explain Animations in React Native

Animations in React Native: React Native has an Animated API that handles animations in the app. It has various functions to create most types of animation(E.g Fading, color change, width and Height change, position change). We will mostly be using Animated.parallel, Animated.timing, Animated.value, and Animated.View this example.

Implementation: Now let’s start with the implementation:

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init animationDemo

• Step 3: Now go into your project folder i.e. animationDemo

  cd animationDemo

Project Structure: It will look like the following.

Directory Structure

Steps to Create Animation:

1. Defining State: We will import Animated from ‘react-native’.Then we will declare our state that will be later changed by the animate function. In this, we are using “right” which will shift the <Animated.View> from left-to-right and vice-versa. And “radius” state which will change borderRadius of the View during animation.
2. Defining Animation functions: We will define two functions leftToRight and rightToLeft which will animate the View when called. In this, we are using Animated.parallel() function which is used to run multiple animations simultaneously. And Animated.timing() function which takes state, duration of the animation, final value as parameter. The Start() for starting the animation.
3. Creating the View: Now we will create a View using <Animated.View> and in style pass the animation state.

Note: Use <Animated.View> for creating a View that will animate based on animated state.Normal <View> will throw Stack limit exceeded error.

App.js

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      right: new Animated.Value(
        Dimensions.get('window').width - 200),
      radius: new Animated.Value(0),
    };
  }

  leftToRight = () => {
    Animated.parallel([
      Animated.timing(this.state.radius, {
        toValue: 200,
        duration: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(this.state.right, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: false,
      }),
    ]).start();
  };

  rightToLeft = () => {
    Animated.parallel([
      Animated.timing(this.state.radius, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(this.state.right, {
        toValue: Dimensions.get('window').width - 200,
        duration: 1000,
        useNativeDriver: false,
      }),
    ]).start();
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Animated.View
          style={{
            marginTop: '30%',
            backgroundColor: 'red',
            height: 200,
            width: 200,
            right: this.state.right,
            position: 'absolute',
            justifyContent: 'center',
            borderRadius: this.state.radius,
          }}>
          <Text
            style={{
              textAlign: 'center',
              color: 'white',
            }}>
            Animated View
          </Text>
        </Animated.View>
        <View
          style={{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            height: '20%',
            justifyContent: 'space-evenly',
          }}>
          <Button title="Left to right"
            onPress={() => this.leftToRight()} />
          <Button title="right to left"
            onPress={() => this.rightToLeft()} />
        </View>
      </View>
    );
  }
}

export default App;

Start the server by using the following command.

npm run android

Output:

Output

Interpolation: Let’s suppose we want to use “%” instead of a number for defining our right style property.If we pass “%” as in <Animated.View> and try to change it in our Animated.timing() function we will get an error. This is where interpolation helps.It maps input ranges to output ranges(E.g. 0-100 into 0%-100%).We just have to apply interpolation in <Animated.View> right style prop and the rest of the code will be the same.

App.js

<Animated.View
  style={{
    marginTop: '30%',
    backgroundColor: 'red',
    height: 200,
    width: 200,
    right: this.state.right.interpolate({
      inputRange: [0, 100],
      outputRange: ['0%', '100%'],
    }),
    position: 'absolute',
    justifyContent: 'center',
    borderRadius: this.state.radius,
  }}>
  <Text
    style={{
      textAlign: 'center',
      color: 'white',
    }}>
    Animated View
  </Text>
</Animated.View>

Reference: https://reactnative.dev/docs/animations