When React Native Reanimated nodes get evaluated

React Native Reanimated is a reimplementation of React Native’s Animated library. It is powerful and removes many limitations the latter has. However, it lacks good documentation and is difficult for beginners to start. In the past couple of weeks, I spent some time playing with this library to see when an animated node gets evaluated / updated in different scenarios. After many experiments, I figured several things out. Let’s have a look at them.

In Animated.useCode

Based on the official documentation, Animated.useCode hook is used in this way

As you can see, the first parameter in useCode hook is a factory function that should return an optional animated node or an array of nodes. Sometimes we want the node or the array of nodes to be evaluated, so that we can update the value used in the view to have the latest value. For example, in the code below, in useCode hook, we set the current value of opacity to the opacity returned from a timer and the opacity value is used to control the opacity of a view.