React Native Reanimated

Overview

Reanimated runs animations on the native UI thread — no JS bridge bottleneck, no dropped frames. Animations stay at 60fps even when your JavaScript thread is busy. It uses "worklets" — small JavaScript functions that execute on the UI thread via JSI. The standard for production-quality animations in React Native: gesture-driven interactions, layout transitions, scroll-based effects, and shared element transitions.

When to Use

• Any animation in React Native beyond simple opacity/transform
• Gesture-driven interactions (swipe to delete, drag to reorder, pinch to zoom)
• Scroll-driven animations (parallax headers, sticky elements)
• Layout animations (items entering/leaving lists)
• Shared element transitions between screens

Instructions

Setup