Using React Native Reanimated

In the React Native world, we have a lot of libraries and approaches to animate our components, including the built-in Animated API. But in this chapter, I would like to opt for a library called React Native Reanimated and compare it with the Animated API to learn why it is the best choice.

Animated API

The Animated API is the most common tool used to animate components in React Native. It has a set of methods that help you to create an animation object, control its state, and process it. The main benefit is that it can be used with any component, and not just animated components such as View or Text.

But, at the same time, this API has been implemented in the old architecture of React Native. Asynchronous communications between JavaScript and UI Native threads are used with the Animated API, delaying updates by at least one frame and lasting approximately 16 ms. Sometimes, the delay may last even longer if the JavaScript thread is running React...