useNativeDriver in the Animated API

WHAT THIS TESTS Whether you understand the threading model behind janky animations and the precise tradeoff the native driver makes between performance and which properties it can animate.

A GOOD ANSWER COVERS Without the native driver, Animated recalculates each frame on the JavaScript thread and pushes the value across the bridge to native every frame, so if JS is busy with work like rendering or data processing, frames are delayed and the animation stutters. Setting useNativeDriver: true serializes the animation to the native side once, where the UI thread drives it independently of JavaScript, keeping it at sixty frames per second even when JS is blocked. The limitation is that the native driver only animates properties that do not trigger layout, namely transform values like translateX, scale, and rotate, plus opacity. Layout and paint properties such as width, height, top, left, and backgroundColor are not supported and will warn or fail. So you express motion via transform and opacity to qualify.

COMMON WRONG ANSWERS Enabling it for width, height, or color and expecting it to work; thinking it speeds up all animations universally; or believing it eliminates the bridge entirely rather than moving the per-frame work off it. Forgetting it must be set per Animated configuration is a small slip.

LIKELY FOLLOW-UPS Why can it not animate layout properties? How do you achieve a size-change effect using transform scale instead? How does Reanimated improve on this model?

ONE CONCRETE EXAMPLE Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }).start() fades a view in smoothly on the UI thread. To 'grow' a card without animating width, you animate transform: [{ scale }] from 0.9 to 1 with the native driver, since scale is supported, instead of animating width, which the native driver rejects.