react-native-reanimated

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.

Exercise Import Reanimated

Complete the empty file. Import Animated from react-native-reanimated. Export it with export { Animated }.

Show example solution

import { Animated } from 'react-native-reanimated';

export { Animated };

Test yourself

Where do Reanimated animations run?
- Only on the JavaScript thread
- On the UI thread
- Only on the network side
- Only on the file system
Show answer

On the UI thread — Reanimated runs on the UI thread; it does not block JavaScript.

Import the library

import ____ from 'react-native-reanimated';

Show answer

import Animated from 'react-native-reanimated';

Match each part to its role

useSharedValue

Shared value
useAnimatedStyle

Animated style
withTiming

Linear timing
withSpring

Spring animation

Next lesson: useSharedValue

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies