React Native Reanimated has become the go-to animation library for developers building mobile apps. The latest version delivers 60 FPS performance on both iOS and Android, running animations directly on the UI thread.
You need smooth animations that feel native, not laggy interactions that frustrate users. Reanimated 4 now includes CSS-style animations alongside its powerful worklet-based API, making complex animations simpler to build.
This guide shows you how to use React Native Reanimated for production-ready animations, from basic fades to complex drag-and-drop interfaces.
What Makes React Native Reanimated Different in 2026
Reanimated runs your animations on the native UI thread instead of the JavaScript thread. This single change eliminates the performance bottleneck that causes dropped frames in most React Native animations.
The library reached version 4.2.0 in December 2025, bringing CSS Transitions and Animations to React Native. You can now write familiar CSS-style animations that compile to native code.
Core Features That Set It Apart
Reanimated 4 requires React Native’s New Architecture (Fabric) and works with React Native 0.76 or newer. If your app uses the old architecture, stick with Reanimated 3, which remains actively maintained.
The library uses worklets, small JavaScript functions that compile to native code and execute on the UI thread. Mark any function with 'worklet' to run it natively without bridge communication.
Version 4 introduced a separate react-native-worklets package for better modularity. You need to install both packages and update your Babel configuration when migrating from version 3.
Performance Numbers That Matter
Reanimated delivers 3x faster performance than React Native’s built-in Animated API for complex gestures. Apps using Reanimated maintain 60 FPS even during simultaneous animations across multiple components.
Tests on modern devices show Reanimated consistently hitting 120 FPS on high-refresh-rate displays. The library handles thousands of animated elements without frame drops when properly optimized.
Two Animation Systems in One Package
CSS animations work declaratively for state-driven changes like showing modals or expanding accordions. You describe what should happen, and Reanimated handles the transition automatically.
Worklet-based animations give you precise control over gesture-driven interactions. Use these for drag-and-drop, swipe gestures, and scroll-linked animations where you need frame-by-frame control.
Installing React Native Reanimated in Your Project
Installing Reanimated 4 takes two steps in Expo projects. Run npm install react-native-reanimated react-native-worklets to add both required packages.
Expo automatically configures the Babel plugin when you install these packages. No manual Babel configuration needed in Expo projects running SDK 51 or newer.
React Native CLI Setup
CLI projects need manual Babel configuration. Add react-native-worklets/plugin to your babel.config.js file as the last plugin in the array.
Make sure to list the worklets plugin last in your plugins array. Other Babel plugins should run before it to work correctly with Reanimated.
Verifying Your Installation
Test your setup by creating a simple animated component. Import useSharedValue and useAnimatedStyle from react-native-reanimated to verify everything works.
If you see errors about TurboModuleRegistry.get('NativeReanimated'), the native modules are not properly linked. Run pod install on iOS or clean your Android build and rebuild.
Building Your First Animation With Reanimated
Shared values hold animation state that persists across renders. Create them with useSharedValue and update them to trigger animations that run on the UI thread.
The useAnimatedStyle hook connects shared values to component styles. Changes to shared values automatically trigger style recalculations without crossing the JavaScript bridge.
Creating a Fade-In Animation
Start with an opacity animation that fades an element into view. Create a shared value initialized to 0, then use withTiming to smoothly transition it to 1.
The animation takes 300 milliseconds by default. You can customize duration, easing, and delay by passing a configuration object to withTiming.
Adding Spring Physics
Replace withTiming with withSpring for physics-based animations. Spring animations feel more natural because they simulate real-world motion with mass and friction.
Adjust stiffness, damping, and mass parameters to control spring behavior. Higher stiffness creates snappier animations, while more damping reduces bounce.
Gesture Integration
Reanimated integrates with React Native Gesture Handler for touch interactions. Use Gesture.Pan() to create draggable elements that follow your finger smoothly.
Connect gestures to animations using useAnimatedGestureHandler. Update shared values inside gesture callbacks to create responsive, interactive animations.
React Native Drag and Drop With Reanimated
Drag-and-drop functionality requires smooth 60 FPS performance. Several libraries built on Reanimated handle the complex logic for you while maintaining native feel.
The react-native-reanimated-dnd library provides complete drag-and-drop components. It includes Draggable, Droppable, and Sortable components ready to use.
Setting Up Drag and Drop
Wrap your app in DropProvider to manage global drag state. Every drag-and-drop interaction needs this context provider at the root level.
For mobile app development in Ohio or anywhere else, check out professional mobile app development ohio services that specialize in building performant React Native applications with advanced animations.
Create draggable items by wrapping components in the Draggable component. Pass a unique ID and any data you want available when the item is dropped.
Implementing Sortable Lists
Use react-native-draggable-flatlist for lists where users reorder items by dragging. The library uses FlatList virtualization to handle thousands of items efficiently.
Call the drag function in onLongPress to activate drag mode. Users long-press an item, then drag it to a new position in the list.
Handle the onDragEnd callback to save the new order. The callback receives the reordered data array, which you can immediately update in state for instant feedback.
Performance Optimization
Keep individual item render times under 100 milliseconds. Complex renderItem functions cause lag during dragging, even with proper virtualization.
Remove console.log statements from production code. Logging blocks the JavaScript thread and creates noticeable stuttering during animations.
Configuring Expo Metro for Reanimated Projects
Metro is the official bundler for React Native and Expo projects. Proper Metro configuration ensures Reanimated works correctly across all platforms including web.
Create a metro.config.js file in your project root using npx expo customize metro.config.js. This generates the template with required Expo defaults.
Essential Metro Settings
Import getDefaultConfig from expo/metro-config to extend Expo’s base configuration. This ensures compatibility with Expo CLI and all required transformers.
The Reanimated Babel plugin is automatically included in expo/metro-config for SDK 51 and newer. Manual plugin configuration is only needed for bare React Native CLI projects.
Adding Custom Asset Types
Extend resolver.assetExts to support additional file types. Add extensions like db for SQLite databases or custom formats your app needs.
Metro requires explicit definition of all asset extensions before starting the bundler. This strict approach optimizes bundle size and load times.
Web Bundling Configuration
Metro supports web bundling starting in Expo SDK 49. Set expo.web.bundler to "metro" in your app config to enable web support.
Add @babel/plugin-proposal-export-namespace-from to your Babel plugins when targeting web. List this plugin before react-native-worklets/plugin in your configuration.
Advanced Animation Techniques
Sequence multiple animations by chaining withTiming or withSpring calls. Use withSequence to run animations one after another automatically.
Create repeating animations with withRepeat. Pass -1 as the repeat count for infinite loops, perfect for loading indicators.
Layout Animations
Layout animations automatically animate component size and position changes. Add layout={Layout.springify()} to any Animated component to enable this feature.
These animations work without shared values or manual style calculations. Reanimated detects layout changes and smoothly transitions between states.
Scroll-Linked Animations
Use useAnimatedScrollHandler to create animations driven by scroll position. Update shared values in the scroll handler to sync animations with scrolling.
Parallax effects, collapsing headers, and sticky elements all use scroll-linked animations. The pattern keeps animations perfectly synchronized with user input.
Custom Easing Functions
Reanimated includes common easing functions like Easing.bezier, Easing.bounce, and Easing.elastic. Choose easing that matches your animation’s purpose and feel.
Create custom easing curves by defining bezier control points. Match your brand’s motion design system by using consistent easing across all animations.
Debugging Animation Performance
Enable the debug logger by passing { debug: true } to Reanimated configuration. This shows frame times and identifies performance bottlenecks.
Check the framerate counter in React Native Dev Menu. Smooth animations maintain 60 FPS consistently, while drops below 50 FPS become noticeable to users.
Common Performance Issues
Animations running on the JavaScript thread instead of UI thread cause the most performance problems. Make sure all animation functions include the 'worklet' directive.
Complex style calculations inside useAnimatedStyle slow down animations. Move expensive operations outside the animated style hook or memoize results.
Profiling With React DevTools
Use React DevTools Profiler to identify slow components. Components that take more than 16 milliseconds to render will cause frame drops at 60 FPS.
Record a profiling session while interacting with animations. Look for components that render frequently or take excessive time during animation frames.
Migrating From Reanimated 3 to 4
Reanimated 4 maintains backward compatibility with version 3 worklet-based APIs. Your existing animations continue working without modification after upgrading.
The major change is worklets moving to react-native-worklets package. Install both packages and update your Babel configuration to use react-native-worklets/plugin.
Architecture Requirements
Version 4 exclusively supports React Native’s New Architecture (Fabric). Projects still on the old architecture must upgrade to React Native 0.76 or newer.
The New Architecture enables features like concurrent rendering and improved performance. Plan your migration carefully as it requires changes to native code.
Updated Dependencies
Update React Native Gesture Handler to the latest version compatible with Reanimated 4. Check the compatibility table in official documentation before upgrading.
Test all animations thoroughly after migration. Pay special attention to gesture-driven interactions and complex animation sequences.
Real-World Animation Patterns
Bottom sheets use drag gestures combined with spring physics. Track finger position during drag, then snap to open or closed position when released.
Calculate snap points based on drag velocity and position. Fast upward swipes open the sheet fully even from partially closed positions.
Carousel Implementations
Carousels combine horizontal scrolling with scale and opacity animations. Items near the center scale up while edge items fade out for depth effect.
Use useAnimatedScrollHandler to track scroll position. Calculate each item’s distance from center to determine its scale and opacity values.
Tab Bar Animations
Animate tab indicators smoothly between tabs using shared values. Track the active tab index and interpolate the indicator position based on that value.
Add micro-interactions like scale bounce when switching tabs. These small details make interfaces feel polished and responsive.
Frequently Asked Questions
What’s the difference between Reanimated 3 and 4?
Reanimated 4 adds CSS Transitions and Animations while maintaining all worklet-based APIs from version 3. Version 4 requires React Native’s New Architecture, while version 3 supports both old and new architectures.
Worklets moved to a separate react-native-worklets package in version 4 for better modularity. You need to install both packages and update your Babel configuration when upgrading.
Can I use Reanimated with Expo?
Yes, Reanimated works perfectly with Expo projects. Install react-native-reanimated and react-native-worklets through npm, and Expo automatically handles Babel configuration.
Expo SDK 51 and newer include automatic Reanimated plugin setup. No manual Babel configuration needed for Expo projects.
How do I fix slow animation performance?
Check that all animation functions include the 'worklet' directive to run on the UI thread. Move complex calculations outside useAnimatedStyle or memoize expensive operations.
Remove console.log statements from animated code as they force execution on the JavaScript thread. Profile with React DevTools to find components that render too slowly.
Does Reanimated work on web platforms?
Reanimated 4 supports web through React Native Web. Configure Metro to bundle for web and add the required Babel plugin for export namespace support.
Web animations run at 60 FPS using requestAnimationFrame. Most Reanimated APIs work identically across native and web platforms.
How do I implement drag and drop with Reanimated?
Use libraries like react-native-reanimated-dnd or react-native-draggable-flatlist built on top of Reanimated. These handle collision detection, positioning, and animation automatically.
For custom implementations, combine React Native Gesture Handler with Reanimated worklets. Track gesture position in shared values and update component transforms in useAnimatedStyle.
What’s the bundle size impact of adding Reanimated?
React Native Reanimated adds approximately 150-200 KB to your bundle size after minification. The performance benefits far outweigh the size cost for most applications.
Tree shaking removes unused APIs in production builds. Only import the specific functions you need to minimize bundle impact.
Can I use Reanimated with React Navigation?
Yes, Reanimated integrates seamlessly with React Navigation. Use it for custom screen transitions, animated headers, and interactive navigation gestures.
React Navigation uses Reanimated internally for smooth native transitions. You can enhance default transitions with custom Reanimated animations.
Making Your Animation Decision
React Native Reanimated stands as the most capable animation library for production apps in 2025. Version 4 brings CSS-style animations for simpler use cases while maintaining the powerful worklet API for complex interactions.
Choose Reanimated when you need 60 FPS performance across all devices. The library handles everything from simple fades to complex gesture-driven interfaces.
Start experimenting with basic animations this week. Build a simple fade-in component, then add gesture controls. Focus on one animation type before moving to complex sequences.
