Javatpoint Logo
Javatpoint Logo

React Native Animation

React Native Animations provide extra effects and great user experience in the app. Animations convey physically believable motion in your interface.

There are two types of complementary animation systems in React Native. These are:

  • Animated: The Animated API is used to interactive control the specific values. It focuses on declarative relationships between inputs and outputs. It has a start and stop methods to control the time-based animation execution.
  • Animated exports four different animated component as View, Text Image and ScrollView. We can also create our own animated component using Animated.createAnimatedComponent().

  • LayoutAnimated: The LayoutAnimated is used to animate the global layout transactions.
  • Animated Methods

    Methods Description
    Animated.timing() It animates a value over time using various easing function, or by using own.
    Animated.event() It maps event directly to animated values.
    Animated.spring() It tracks the velocity of state to create fluid motion using toValue updates.
    Animated.decay() It starts the animations with initial velocity and gradually goes slows to stop.

    React Native Animation Example 1 (Animated.timing())

    In this example, we will create a spinning animation on image using Animated.timing().

    App.js

    The interpolate() method call any Animated.Value. It interpolates the value before updating the property. In above example, we map 0 (zero) degrees to 360 degrees.

    We pass an inputRange [0,1] and get the outputRange['0deg', '360deg'] array.

    Output:

    React Native Animation

    React Native Animation Example 2 (Animated.timing())

    In this example, we declare a single animated value this.aninatedValue and use it with interpolate to create multiple animations, such as: marginLeft, opacity, fontSize, and rotate. We will interpolate this property for styling such as opacity, margins, text sizes, and rotation properties.

    App.js

    Output:

    React Native Animation

    LayoutAnimation API

    LayoutAnimation allows to globally configure create and update animations. This will be used for all views in the next render/layout cycle.

    The LayoutAnimation is quite useful, it has much less control than Animated and other animation libraries.

    To use this API in Android we need to set the following flags via UIManager:

    React Native LayoutAnimation Example

    In this example, we create a TouchableOpacity and a View component. Pressing the TouchableOpacity component calls the _onPress() method and it animates the View component by increases the width and height of View by 15 unit.

    Output:

    React Native Animation React Native Animation
    Next TopicReact Native Image




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA