Animated API lets us animate component styles.
There are 4 fundamental parts to this API:
Animated.Value- wrap a number value that we want to use in a style
Animated.Text, ... - use a component that supports animated styles
Animated.spring, ... - choose an animation type
.start()- start the animation
1. Create an
To wrap a number value, call
2. Choose an
Animated provides specially wrapped versions of the standard
Image components. These wrapped components can have Animated.Values in their style prop. To animate something other than one of these three, we can wrap any component, e.g.
const AnimatedButton = Animated.createAnimatedComponent(Button).
Then, we can use the
Animated.Value we created earlier in a style.
This won't animated, since we haven't specified a style we want to animate yet.
Pick an animation function, e.g.
Animated.timing and then call
.start() imperatively. Now we can should see an animation when we click the button.
We'll typically use the
useNativeDriver option when possible - this improves animation performance, but we can only use it when animating styles that don't affect layout (e.g.
transform but not
To animate styles in more complex ways, we can use a single animated value, but interpolate its value into different ranges for different styles.
There are other types of animations we can run besides
spring. We can also choose the easing curve to use with a timing animation.
We can also perform other operations on animated values besides
The documentation covers all of the available options in more detail.
Want to learn React Native in-depth?