React Native Reanimated

React Native Reanimated is a comprehensive animation library that reimagines React Native’s Animated API to run animations and gesture handling on the native UI thread instead of the JavaScript thread. By executing small JavaScript functions called worklets on a separate runtime, it delivers consistently smooth, high-frame-rate motion that never stutters when the JS thread is busy.

Maintained by Software Mansion and backed by Shopify and Expo, Reanimated exposes a declarative, hooks-based API built around shared values, animated styles, and layout animations. It powers physics-based springs, timing curves, interpolation, and coordinated gesture interactions, and is one of the most widely used building blocks in the React Native ecosystem.

What You Get

• A worklet runtime that runs animation logic on the native UI thread for jank-free 60/120fps motion
• Shared values plus hooks like useSharedValue, useAnimatedStyle, and useDerivedValue for reactive, declarative animation state
• Built-in animation primitives such as withTiming, withSpring, withDecay, and easing/interpolation helpers
• Layout animations and shared element transitions for entering, exiting, and reordering components
• First-class gesture integration for building fluid, interruptible touch interactions

Common Use Cases

• Building custom swipeable, draggable, and gesture-driven components that stay responsive under load
• Animating screen transitions, bottom sheets, carousels, and expanding/collapsing layouts
• Creating physics-based spring and decay motion for natural-feeling UI feedback
• Interpolating scroll position or gesture progress to drive parallax and reveal effects

Under The Hood

Architecture Reanimated splits work across two runtimes: the React/JS thread and a dedicated UI-thread worklet runtime. Small functions marked as worklets are serialized and executed on the UI thread, where shared values (defined in src/mutables.ts and consumed via src/hook/useSharedValue.ts) act as reactive, thread-shared state. Mappers (src/mappers.native.ts) re-run animated-style worklets whenever their dependent shared values change, and native modules bridge the two worlds through JSI. The public entry point src/index.ts initializes the Reanimated module before re-exporting the Animated component factory, hooks, animation builders, and layout-animation APIs.

Tech Stack The library is roughly 79% TypeScript with a substantial native layer: C++ (14%) for the shared JSI/host logic under Common, plus Kotlin and Objective-C++ implementations for Android and Apple platforms. It builds with react-native-builder-bob, tests with Jest, and enforces style with ESLint, clang-tidy, and clang-format. It declares react, react-native, and react-native-worklets as peer dependencies, delegating multi-threaded JS execution to the companion Worklets package.

Code Quality The codebase is well-organized by concern (hook, animation, layoutReanimation, css, component, platformFunctions) and ships 32 Jest test files covering bezier math, color normalization/interpolation, props, sensors, and individual hooks. TypeScript is used throughout with dedicated type tests (typetests), and the project runs strict-API type checks plus native linting in CI, indicating a mature, actively enforced quality bar.

API Design The public API is hook-centric and declarative: useSharedValue holds animation state, useAnimatedStyle/useAnimatedProps map it onto components, and withTiming/withSpring/withDecay compose motion. Naming is consistent and self-describing, and the extensive external documentation and in-repo example app (apps/common-app) lower the barrier to entry. The main conceptual cost is the worklet/threading mental model, which introduces a moderate learning curve for developers new to UI-thread execution.