React Native Reanimated: Off-Thread Animations

Why it exists

Standard React Native animations run on the same JavaScript thread as your app's logic. If that thread is busy calculating state changes or processing data, your animation will stutter and drop frames, leading to a janky user experience. Reanimated was created to solve this by decoupling animation logic from the JS thread.

The mental model

Think of your app having two main workers: a JavaScript worker and a UI worker. Normally, the JS worker has to tell the UI worker what to do for every single frame of an animation. If the JS worker gets busy, it can't give instructions fast enough. Reanimated lets you give the UI worker a complete set of instructions upfront, like "animate this from A to B over 500ms," so it can execute the entire animation smoothly on its own without constantly checking back with the busy JS worker.

How it works

Reanimated uses a declarative API and special hooks. You define animated values using useSharedValue. These are special objects whose .value property can be read and written from both the JavaScript thread and the UI thread. You then define animation logic inside functions marked as "worklets" (often implicitly, like in useAnimatedStyle). Reanimated sends this worklet code to the native UI thread, where it can run independently, updating styles or properties directly without crossing the React Native bridge on every frame. This is what enables 60-120 fps performance.

When to use it

Use Reanimated for any animation where performance and a native feel are critical. This includes: first, user-driven gestures like dragging, swiping, and pinching, which require immediate feedback; second, complex layout animations where items are added, removed, or reordered; and third, any animation that needs to run smoothly while the app is doing heavy lifting on the JS thread.

When not to use it

For very simple, one-off animations that are not interactive (like a simple fade-in on a static screen), the built-in Animated API might be sufficient and require less setup. Reanimated introduces its own concepts like shared values and worklets, so for trivial cases, it can be overkill. However, most modern apps with rich interactions benefit from using Reanimated as the default.

One canonical example

A common use case is creating a button that smoothly changes its width on press. You would initialize a shared value: const width = useSharedValue(100);. The press handler would update this value with an animation helper: width.value = withSpring(width.value + 50);. Finally, an Animated.View component would use an animated style to link its width directly to the shared value. The withSpring function and the style update all run on the UI thread, ensuring a fluid animation.