Animated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution.
The core workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing().
Don't modify the animated value directly. You can use the useRef Hook to return a mutable ref object. This ref object's current property is initialized as the given argument and persists throughout the component lifecycle.
Example
The following example contains a View which will fade in and fade out based on the animated value fadeAnim
Refer to the Animations guide to see additional examples of Animated in action.
Overview
There are two value types you can use with Animated:
Animated.Value()for single valuesAnimated.ValueXY()for vectors
Animated.Value can bind to style properties or other props, and can be interpolated as well. A single Animated.Value can drive any number of properties.
Configuring animations
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay()starts with an initial velocity and gradually slows to a stop.Animated.spring()provides a basic spring physics model.Animated.timing()animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
Animated.timing({}).start(({finished}) =>