Reanimated

ELI5 — The Vibe Check

Reanimated is React Native's animation library on steroids. It runs animations directly on the UI thread using worklets — tiny JavaScript functions that execute on native. The result? 60fps animations even when your JS thread is busy.

Real Talk

A React Native animation library (react-native-reanimated) that executes animation logic on the UI thread using worklets — small JavaScript functions compiled to run outside the JS thread. Reanimated v2+ provides hooks (useSharedValue, useAnimatedStyle), supports gesture-driven animations, and enables layout animations.

Show Me The Code

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

const offset = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: withSpring(offset.value) }],
}));

<Animated.View style={animatedStyle} />

When You'll Hear This

"Reanimated worklets run on the UI thread — that's why animations stay at 60fps even during heavy JS work." / "Combine Reanimated with Gesture Handler for interactive, gesture-driven animations."