react-native-reanimated
- React Native course
- Advanced
- Lesson 61/83
- 5 min
Learn the react-native-reanimated library.
react-native-reanimated
react-native-reanimated is a high performance animation library for React Native. It runs animations on the UI thread; this way it does not block the JavaScript bridge. It provides smooth 60 fps animations. Install with npx expo install react-native-reanimated.
The core building blocks are useSharedValue (shared value), useAnimatedStyle (animated style), withTiming (timing) and withSpring (spring). Combined, you can write smooth animations for button presses, swipes, card flips and more. Reanimated is the default animation tool in modern React Native projects.
Core building blocks
Reanimated has four core functions. useSharedValue creates a value shared between the UI and JS threads; this is the base state of the animation. useAnimatedStyle produces an animated style object based on this value.
withTiming and withSpring are animation types that take the value to a target. withTiming goes linearly in a fixed time; withSpring bounces like a physical spring. When rotating a card withSpring feels natural; for an opacity change withTiming is preferred.
Practice Import Reanimated
Complete the empty file. Import Animated from react-native-reanimated. Export it with export { Animated }.
Starter code
// import and export Animated from react-native-reanimatedSample solution
import { Animated } from 'react-native-reanimated';
export { Animated };Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where do Reanimated animations run?
- Only on the JavaScript thread
- On the UI thread Correct answer
- Only on the network side
- Only on the file system
Explanation: Reanimated runs on the UI thread; it does not block JavaScript.
2 Import the library
import ____ from 'react-native-reanimated';import Animated from 'react-native-reanimated';Explanation: The Animated namespace carries animated components.
3 Match each part to its role
| Term | Meaning |
|---|---|
useSharedValue |
Shared value |
useAnimatedStyle |
Animated style |
withTiming |
Linear timing |
withSpring |
Spring animation |