How can you achieve native performance for animations in React Native?

Moderator: Reach-Native-gp

Post Reply
Anisha Sharma
Posts: 11
Joined: Fri May 08, 2020 12:30 pm

How can you achieve native performance for animations in React Native?

Post by Anisha Sharma »

This is a common question and many developers do get confused about it. There are certain animation types in React Native such as Animation.timing and Animation.spring. Both of these types can be serialized and sent through an asynchronous bridge before the developer executes it.

With this, the runtime can defer the drawing of the animation to the native side. This is done instead of the runtime trying to send positional values through the asynchronous bridge and having the frame re-rendered each time.

This solution is not possible for animations that cannot be computed before execution or ahead of time.

Let us take an example to understand it:

Animated.timing(new Animated.Value(0), {
useNativeDriver: true,
toValue: 100,
duration: 100
}) .start()

The above example will serialize the components and it across the bridge to the native side, way before starting it.

Post Reply