In this lesson, you will learn how Reanimated bypasses the traditional React Native "bridge" to make animations feel buttery smooth.
The Problem: The Bottleneck
In standard React Native, every time you move your finger on the screen, that touch event must travel from the native side (the OS) across the "bridge" to the JavaScript thread. The JavaScript thread then calculates the new position, sends a message back across the bridge to the UI thread, and finally updates the screen.
When you have complex gestures, this back-and-forth communication creates a bottleneck. If the JavaScript thread gets busy with other tasks, the bridge lags, resulting in "jank" or stuttering.
The Solution: Staying on the UI Thread
Reanimated changes the game by using a declarative approach. Instead of telling the JavaScript thread to calculate positions on every frame, you define the animation logic using Reanimated’s worklets. These are functions that are automatically offloaded and executed directly on the UI thread.
By writing your animation logic declaratively, Reanimated ensures that the gesture handling and the resulting UI update happen entirely on the native side. Because the logic never leaves the UI thread, it doesn't have to wait for the JavaScript thread to respond.
// A conceptual look at a Reanimated worklet
const gestureHandler = useAnimatedGestureHandler({
onActive: (event) => {
// This logic runs directly on the UI thread!
// No bridge crossing required for these calculations.
translateX.value = event.translationX;
},
});
Because the execution lives where the pixels are drawn, your gestures feel instantaneous and stay locked at a smooth 60 or 120 frames per second, regardless of how heavy your JavaScript logic is. You are essentially writing code that runs in the native layer while keeping the clean, familiar syntax of React.
Key Takeaway: By using Reanimated, you move your animation logic into worklets that execute entirely on the UI thread, effectively bypassing the bridge and eliminating the communication lag that causes UI jank.