How to Use Animated View in React Native

Animated View is a powerful way to animate components in React Native. It can be used to create smooth and fluid animations which can be used to enhance the user experience. In this tutorial, we will learn how to use Animated View in React Native to create 5 different animation examples.

Example 1: Animated Fade

The first example is an animated fade. This animation will fade in and out a view. To create this animation, we will use the Animated.timing method.

import React, { useState, useEffect } from 'react';
import { Animated } from 'react-native';

const FadeInView = (props) => {
  const [fadeAnim] = useState(new Animated.Value(0))  // Initial value for opacity: 0

  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 10000,
      }
    ).start();
  }, [])

  return (
    <Animated.View                 // Special animatable View
      style={{
        ...props.style,
        opacity: fadeAnim,         // Bind opacity to animated value
      }}
    >
      {props.children}
    </Animated.View>
  );
}

In this code, we use the useState hook to create the fadeAnim value. This is the value that will be used to animate the view. Next, we use the useEffect hook to trigger the Animated.timing method. This method takes two parameters, an animated value and an object which contains the toValue and duration of the animation. The toValue specifies the value we want to animate to, and the duration specifies the duration of the animation. Finally, we use the Animated.View component to wrap the children and apply the animation to the opacity style.

Example 2: Animated Scale

The second example is an animated scale. This animation will scale up and down a view. To create this animation, we will use the Animated.spring method.

import React, { useState, useEffect } from 'react';
import { Animated } from 'react-native';

const ScaleInView = (props) => {
  const [scaleAnim] = useState(new Animated.Value(0))  // Initial value for scale: 0

  React.useEffect(() => {
    Animated.spring(
      scaleAnim,
      {
        toValue: 1,
        friction: 3,
        useNativeDriver: true
      }
    ).start();
  }, [])

  return (
    <Animated.View                 // Special animatable View
      style={{
        ...props.style,
        transform: [{scale: scaleAnim}]
      }}
    >
      {props.children}
    </Animated.View>
  );
}

In this code, we use the useState hook to create the scaleAnim value. This is the value that will be used to animate the view. Next, we use the useEffect hook to trigger the Animated.spring method. This method takes two parameters, an animated value and an object which contains the toValue, friction and useNativeDriver of the animation. The toValue specifies the value we want to animate to, the friction specifies the amount of friction to apply to the animation, and the useNativeDriver specifies whether to use the native animation driver. Finally, we use the Animated.View component to wrap the children and apply the animation to the transform style.

Example 3: Animated Rotate

The third example is an animated rotate. This animation will rotate a view. To create this animation, we will use the Animated.loop method.

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

const RotateInView = (props) => {
  const [rotateAnim] = useState(new Animated.Value(0))  // Initial value for rotate: 0

  React.useEffect(() => {
    Animated.loop(
      Animated.timing(
        rotateAnim,
        {
          toValue: 1,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: true
        }
      )
    ).start();
  }, [])

  const rotateInterpolate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })

  const animatedStyle = {
    transform: [{
      rotate: rotateInterpolate
    }]
  }

  return (
    <Animated.View                 // Special animatable View
      style={{
        ...props.style,
        ...animatedStyle
      }}
    >
      {props.children}
    </Animated.View>
  );
}

In this code, we use the useState hook to create the rotateAnim value. This is the value that will be used to animate the view. Next, we use the useEffect hook to trigger the Animated.loop method. This method takes one parameter, an Animated.timing method. The Animated.timing method takes two parameters, an animated value and an object which contains the toValue, duration, easing and useNativeDriver of the animation. The toValue specifies the value we want to animate to, the duration specifies the duration of the animation, the easing specifies the easing function to use, and the useNativeDriver specifies whether to use the native animation driver.

Next, we use the interpolate method to map the rotateAnim value to an output range of 0deg to 360deg. Finally, we use the Animated.View component to wrap the children and apply the animation to the transform style.

Example 4: Animated Parallel

The fourth example is an animated parallel. This animation will run multiple animations in parallel. To create this animation, we will use the Animated.parallel method.

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

const ParallelInView = (props) => {
  const [fadeAnim] = useState(new Animated.Value(0))  // Initial value for opacity: 0
  const [scaleAnim] = useState(new Animated.Value(0))  // Initial value for scale: 0
  const [rotateAnim] = useState(new Animated.Value(0))  // Initial value for rotate: 0

  React.useEffect(() => {
    Animated.parallel([
      Animated.timing(
        fadeAnim,
        {
          toValue: 1,
          duration: 10000,
        }
      ),
      Animated.spring(
        scaleAnim,
        {
          toValue: 1,
          friction: 3,
          useNativeDriver: true
        }
      ),
      Animated.loop(
        Animated.timing(
          rotateAnim,
          {
            toValue: 1,
            duration: 1000,
            easing: Easing.linear,
            useNativeDriver: true
          }
        )
      )
    ]).start();
  }, [])

  const rotateInterpolate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })

  const animatedStyle = {
    opacity: fadeAnim,
    transform: [{
      scale: scaleAnim
    }, {
      rotate: rotateInterpolate
    }]
  }

  return (
    <Animated.View                 // Special animatable View
      style={{
        ...props.style,
        ...animatedStyle
      }}
    >
      {props.children}
    </Animated.View>
  );
}

In this code, we use the useState hook to create the fadeAnim, scaleAnim and rotateAnim values. These values will be used to animate the view. Next, we use the useEffect hook to trigger the Animated.parallel method. This method takes an array of animations as its parameter. In this case, we are using the Animated.timing, Animated.spring and Animated.loop methods. We then use the interpolate method to map the rotateAnim value to an output range of 0deg to 360deg. Finally, we use the Animated.View component to wrap the children and apply the animation to the opacity and transform styles.

Example 5: Animated Sequence

The fifth example is an animated sequence. This animation will run multiple animations in sequence. To create this animation, we will use the Animated.sequence method.

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

const SequenceInView = (props) => {
  const [fadeAnim] = useState(new Animated.Value(0))  // Initial value for opacity: 0
  const [scaleAnim] = useState(new Animated.Value(0))  // Initial value for scale: 0
  const [rotateAnim] = useState(new Animated.Value(0))  // Initial value for rotate: 0

  React.useEffect(() => {
    Animated.sequence([
      Animated.timing(
        fadeAnim,
        {
          toValue: 1,
          duration: 10000,
        }
      ),
      Animated.spring(
        scaleAnim,
        {
          toValue: 1,
          friction: 3,
          useNativeDriver: true
        }
      ),
      Animated.loop(
        Animated.timing(
          rotateAnim,
          {
            toValue: 1,
            duration: 1000,
            easing: Easing.linear,
            useNativeDriver: true
          }
        )
      )
    ]).start();
  }, [])

  const rotateInterpolate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })

  const animatedStyle = {
    opacity: fadeAnim,
    transform: [{
      scale: scaleAnim
    }, {
      rotate: rotateInterpolate
    }]
  }

  return (
    <Animated.View                 // Special animatable View
      style={{
        ...props.style,
        ...animatedStyle
      }}
    >
      {props.children}
    </Animated.View>
  );
}

In this code, we use the useState hook to create the fadeAnim, scaleAnim and rotateAnim values. These values will be used to animate the view. Next, we use the useEffect hook to trigger the Animated.sequence method. This method takes an array of animations as its parameter. In this case, we are using the Animated.timing, Animated.spring and Animated.loop methods. We then use the interpolate method to map the rotateAnim value to an output range of 0deg to 360deg. Finally, we use the Animated.View component to wrap the children and apply the animation to the opacity and transform styles.

Conclusion

In this tutorial, we have learned how to use Animated View in React Native to create 5 different animation examples. We have seen how to create an animated fade, scale, rotate, parallel and sequence. We have also seen how to use the Animated.timing, Animated.spring, Animated.loop, Animated.parallel and Animated.sequence methods to create these animations.