Home Code Using Native Driver for Animated · React Native

Using Native Driver for Animated · React Native

by TM

The past year has been focused on improving the performance of animations using the Animated library. Animations are crucial for creating a great user experience but can be challenging to implement correctly. The goal is to make it easy for developers to create high-performing animations without causing lag.

The Animated API has an important feature – it is serializable. This means that everything about the animation can be sent to native code before it starts, allowing the native code to handle the animation on the UI thread without going through the bridge on every frame. This is beneficial because even if the JS thread is blocked, the animation will still run smoothly. This is especially useful since user code and React renders can often lock up the JS thread for extended periods.

The project began when Expo built the li.st app on Android, with Krzysztof Magiera handling the initial implementation on Android. The app was successful, becoming the first to ship with native-driven animations using Animated. Later, Brandon Withrow implemented it on iOS, followed by Ryan Gomba and others adding missing features and fixing bugs. The development was a community effort, with Expo sponsoring a significant part of it.

The native driver of Animated moves most of the animation steps to native code. It serializes the animation graph and sends it to native only once when the animation starts. This eliminates the need to continuously communicate with the JS thread and the bridge on every frame. The animation is updated directly on the UI thread, resulting in faster and smoother animations.

To use the native driver, developers can simply add ‘useNativeDriver: true’ to the animation configuration when starting it. It also works with Animated.event, which is useful for animations that need to follow the scroll position. However, not all features of Animated are supported in Native Animated. For example, only non-layout properties like transform and opacity can be animated, while Flexbox and position properties cannot.

Overall, the focus has been on improving animation performance by offloading work to native code, resulting in faster and smoother animations.

Source link

You may also like

Leave a Comment

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?
Update Required Flash plugin