React Native Reanimated — Fluid Animations at 60 fps

Introduction

React Native Reanimated replaces the original Animated API with a worklet-based architecture that executes animation calculations directly on the UI thread. This eliminates bridge serialization overhead and allows animations to stay at 60 fps even when the JS thread is busy.

What React Native Reanimated Does

• Runs animation worklets on the UI thread via a custom JSI-based runtime
• Provides shared values that synchronize state between JS and UI threads
• Supports spring, timing, decay, and custom easing-based animations
• Enables layout animations for automatic enter, exit, and layout-change transitions
• Integrates with react-native-gesture-handler for gesture-driven animations

Architecture Overview

Reanimated compiles worklet functions at build time using a Babel plugin that extracts them into a separate UI-thread runtime. Shared values act as thread-safe containers, readable from both JS and UI threads. The animated style hook reads shared values on the UI thread each frame, applies transforms, and updates native views without crossing the bridge.

Self-Hosting & Configuration

• Add the Reanimated Babel plugin to babel.config.js
• Run npx pod-install after installation for iOS native module linking
• Enable Hermes engine (recommended) for optimal worklet compilation
• Use react-native-reanimated/plugin in Metro bundler configuration
• Configure ProGuard rules for Android release builds

Key Features

• Worklet architecture keeps animations jank-free at 60 fps
• Layout animations with entering, exiting, and layout transition presets
• Shared value interpolation for scroll-driven and gesture-driven effects
• Keyframe animation API for complex multi-step sequences
• Sensor-driven animations via useAnimatedSensor for accelerometer and gyroscope data

Comparison with Similar Tools

• Animated (built-in) — simpler API but runs on the JS thread, causing jank under load
• Moti — higher-level wrapper around Reanimated for common animation patterns
• Lottie React Native — plays After Effects animations; Reanimated handles programmatic motion
• react-spring — web-focused spring animation library; Reanimated is mobile-native

FAQ

Q: Do I need the Babel plugin? A: Yes. The plugin transforms worklet functions so they can run on the UI thread. Without it, animations fall back to the JS thread.

Q: Does it work with Expo? A: Yes. Reanimated is included in the Expo SDK. Managed workflow users get it out of the box.

Q: Can I animate non-style properties? A: Yes. Use useAnimatedProps to animate props on native components like SVG paths or text content.

Q: How does it interact with gesture handler? A: Reanimated and react-native-gesture-handler share the same UI-thread runtime, enabling zero-latency gesture-to-animation pipelines.

Sources

• https://github.com/software-mansion/react-native-reanimated
• https://docs.swmansion.com/react-native-reanimated/