Animations API in React Native

Animations API in React Native

Animations are fundamental to creating a great user experience. Stationary objects must overcome inertia as they start moving, and objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

React Native provides two complementary animation systems: Animated for granular and interactive control of specific values and Layout Animation for animated global layout transactions.

Animated API

The Animated API is designed to concisely express a wide variety of engaging animation and interaction patterns in a very performing way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms between start/stop methods to control time-based animation execution.

Configuring animations

Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.

Animated provides several animation types, the most commonly used one being Animated. timing(). It supports animating a value over time using various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.

Composing animations

Animations can be combined and played in sequence or parallel, and sequential animations can play immediately after the previous animation has finished or started after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which takes an array of animations to execute and automatically calls start()/stop() as needed.

If one animation is stopped or interrupted, then all other animations in the group are also eliminated. Animated. Parallel has a stopTogether option that can be false to disable this.

Combining animated values

You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value.

Tracking dynamic values

Animated values can also track other values by setting the toValue of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations.

Tracking gestures

Gestures, like panning or scrolling, and other events can map directly to animated values using Animated. Event. This is done with a structured map syntax to extract values from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.

Using the native driver

The Animated API is designed to be serializable. Using the native driver, we send everything about the animation to NativeNative before starting the animation, allowing the native code to perform the animation on the UI thread without going through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.

LayoutAnimation API

LayoutAnimation allows you to globally configure, create and update animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties to animate them directly and is especially useful when layout changes may affect ancestors.