The 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.View, Animated.Text, ... - use a component that supports animated styles
• Animated.timing, Animated.spring, ... - choose an animation type
• .start() - start the animation

Let's walk through setting up an animation.

1. Create an Animated.Value

To wrap a number value, call new Animated.Value(value).

2. Choose an Animated component

Animated provides specially wrapped versions of the standard View, Text, and 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.

3. Animate!

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. color, opacity, and transform but not width or flex)

Don't forget .start()!

Interpolate

To animate styles in more complex ways, we can use a single animated value, but interpolate its value into different ranges for different styles.

Other animations

There are other types of animations we can run besides timing: delay and spring. We can also choose the easing curve to use with a timing animation.

We can also perform other operations on animated values besides interpolate.

The documentation covers all of the available options in more detail.