React Native Reanimated

Overview

UI-thread animation library for React Native. Reanimated 4.x runs animations on the native UI thread for guaranteed 60fps performance, replacing Framer Motion for mobile applications. Provides shared values, animated styles, declarative entering/exiting transitions, and gesture integration.

Install: pnpm add react-native-reanimated (included with Expo SDK 54+)

Workflows

Adding animations to a screen:

1. Import from react-native-reanimated: Animated, useSharedValue, useAnimatedStyle, withTiming
2. Create shared values for animated properties
3. Define animated styles using useAnimatedStyle
4. Apply to Animated.View, Animated.Text, etc.
5. Check useReducedMotion() and skip animations when true
6. Test on device for smooth 60fps