React Native Blog • Feb 14, 2017

Using Native Driver For Animated

Article Summary

Your React Native animations are probably running on the wrong thread. Here's how one config flag can eliminate frame drops when JavaScript gets blocked.

React Native's Animated library got a major performance upgrade through the Native Driver, a community effort led by developers from Expo, li.st, and the React Native core team. This technical deep dive explains how animations can now run entirely on the native UI thread instead of JavaScript.

Key Takeaways

Animations serialize to native once, eliminating per-frame bridge calls
Native driver uses CADisplayLink/Choreographer instead of requestAnimationFrame
Enable with one line: useNativeDriver: true in animation config
Works for transform and opacity, but not layout properties like flexbox
Already powers Touchable components and React Navigation animations

Critical Insight

By moving animation execution from JavaScript to native threads, React Native animations can run smoothly even when JS is blocked.

The serialization approach that makes this possible reveals an elegant pattern for offloading other performance-critical work to native.

About This Article

Problem

React Native animations ran JavaScript code on every frame and sent updates across the bridge to native code. When the JS thread got blocked by user code or React rendering, animations would skip frames.

Solution

Krzysztof Magiera and Brandon Withrow built a native driver that serializes the Animated API's node graph to native code at animation start. This lets the native side handle all frame updates directly on the UI thread without needing callbacks from JavaScript.

Impact

React Native 0.40 and later shipped with the native driver ready for production use. Touchable components and React Navigation adopted it, which meant animations stayed smooth even when JavaScript was busy doing other work.