React Native Animations Using the Animated API

Getting up and running with React Native Animations

Looking to learn React Native? Check out React Native Training.

The recommended way to animate in React Native for most cases is by using the Animated API.

The final github repo for this project is here.

There are three main Animated methods that you can use to create animations:

1. Animated.timing() — Maps time range to easing value.
2. Animated.decay() — starts with an initial velocity and gradually slows to a stop.
3. Animated.spring() — Simple single-spring physics model (Based on Rebound and Origami). Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.

We will be covering Animated.timing() and Animated.spring() as they are the most useful in my experience.

Along with these three Animated methods, there are three ways to call these animations along with calling them individually. We will be covering all three of these as well:

1. Animated.parallel() — Starts an array of animations all at the same time.
2. Animated.sequence() — Starts an array of animations in order, waiting for each to…