Installing Reanimated and Shared Values
Install react-native-reanimated, add the Babel plugin, create shared values with useSharedValue, and connect them to animated styles using useAnimatedStyle.
Why Reanimated Exists
React Native Reanimated is a more powerful animation library that goes beyond what the built-in Animated API can achieve. While the Animated API moves animation config to native once and runs it there, Reanimated lets you run arbitrary JavaScript-like logic — called worklets — directly on the UI thread, frame by frame.
This enables gesture-driven animations where the animation responds in real time to finger position, impossible with the Animated API's pre-configured approach. Reanimated 3 is the current version and is the foundation of React Native Gesture Handler's smooth interactions.
Installing react-native-reanimated
Install Reanimated from npm, then add the Babel plugin to babel.config.js. The Babel plugin transforms worklet functions at build time so they can run on the UI thread. Without the plugin the library will silently fail at runtime.
For Expo managed workflow, the library must be compatible with your SDK version. Check the Reanimated compatibility table before installing. After installation you must rebuild the native app — Reanimated cannot be added via OTA update.
// Terminal:
// npx expo install react-native-reanimated
// babel.config.js:
module.exports = {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
// IMPORTANT: Reanimated plugin must be listed LASTAll lessons in this course
- Installing Reanimated and Shared Values
- Worklets and Running Code on the UI Thread
- Pan and Swipe Gestures with Gesture Handler
- Pinch-to-Zoom and Rotation