react-native-reanimated: Reanimated: The Engine That Stole the Render Loop

How Software Mansion turned React Native’s biggest weakness into a 120fps superpower through the magic of UI-thread Worklets.

8 min read • View on GitHub • More from software-mansion

A massive, glowing engine bolted directly onto a sleek mobile chassis, representing Reanimated bypassing the bridge.
Reanimated bypasses the standard React Native bridge, fusing JavaScript logic directly to native execution.
Key Takeaways

The Ghost in the Render Loop

Standard React Native animations suffer from a fundamental architectural flaw. The framework relies on an asynchronous bridge to communicate between the JavaScript thread and the native UI thread. When you animate a component, the logic calculates the next frame in JavaScript, serializes the data, sends it across the bridge, and waits for the native side to render it.

This works fine for simple transitions. But when the application is busy fetching data or processing complex business logic, the JavaScript thread chokes. The bridge becomes a traffic jam. Frames drop, animations stutter, and the illusion of a native app shatters.

A crowded glass bridge above a high-speed express tunnel.
The asynchronous bridge creates a bottleneck for UI updates, a problem Reanimated solves with a dedicated express lane.

Worklets: JavaScript’s Second Home

To fix the bridge, Software Mansion realized they had to bypass it entirely. Their solution was to run a secondary JavaScript virtual machine directly on the UI thread. This is the core of Reanimated.

They introduced Worklets. A worklet is a tiny piece of JavaScript code marked with a special directive. A custom Babel plugin captures this function, isolates its dependencies, and sends it over the JavaScript Interface (JSI) to the native side. Once there, it executes synchronously with the screen's refresh rate.

A flow diagram showing a React component on the left (JS Thread) and a Native View on the right (UI Thread). A Babel plugin extracts a function labeled 'worklet' from the JS Thread

Worklets have become a very important part of the React Native ecosystem and have inspired a lot of other projects to build on these foundations. This major release takes the worklets to the next level, while also bringing a new, declarative, CSS-compatible animation API that aims to replace worklets in many of the use cases.

Krzysztof Magiera, Reanimated 4 Stable Release — the Future of React Native Animations

From Calculus to CSS

The early versions of Reanimated required a steep learning curve. Developers had to write declarative animations that felt like solving complex math equations rather than styling a user interface.

To build those with Reanimated 1.0 you need to adapt to a totally new mindset of writing animations in a declarative way. We never designed the old declarative API to work that way, instead it was just a reflection of how the library functioned underneath.

Krzysztof Magiera, Introducing Reanimated 2 - Software Mansion

Reanimated 4 changes the paradigm entirely. It introduces a declarative, CSS-compatible animation and transition API. Instead of manually orchestrating shared values and imperative hooks for simple state changes, developers can now define keyframes just as they would on the web.

A split screen showing complex calculus on a chalkboard versus a simple toggle switch.
Moving from imperative math to declarative CSS significantly lowers the barrier to entry for complex animations.

The Physics of Feel

A beautiful animation is only half the battle. Mobile apps need to feel physical, responding to user gestures with zero latency. Reanimated achieves this through deep integration with React Native Gesture Handler.

Touch events are piped directly into Shared Values on the UI thread. When a user swipes a card, the gesture data updates the Shared Value synchronously, and the UI re-renders at 120 frames per second. The main JavaScript thread can be completely blocked by a heavy network request, and the gesture will still feel flawless.

A slider interface showing two separate tracking boxes. As the user moves the slider

The Animation Hierarchy

With multiple animation solutions available in the React Native ecosystem, choosing the right tool is a matter of architectural fit. While the built-in Animated API handles basic transitions, Reanimated is the definitive choice for gesture-driven, layout-aware interfaces.

Library Execution Thread Layout Animations Primary Use Case
React Native Animated JS (mostly) / Native (limited) No Simple opacity and transform toggles.
Reanimated UI Thread via Worklets Yes Complex, gesture-driven, 60-120fps interactions.
Moti UI Thread (Wraps Reanimated) Yes Rapid prototyping with web-like Framer Motion syntax.

By treating the UI thread as a first-class execution environment, Software Mansion has effectively rewritten the rules of React Native performance. Reanimated proves that with the right architecture, cross-platform tools can match the physical feel of pure native development.