What is react-native-reanimated?

software-mansion/react-native-reanimated — explained in plain English

Analysis updated 2026-06-24

★ 10,826TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((repo))
    What It Does
      Smooth mobile animations
      Thread-based execution
      Replaces Animated API
    Key Packages
      Reanimated 4
      Worklets
    Use Cases
      Gesture animations
      Screen transitions
      Parallax effects
    Requirements
      React Native
      New architecture for v4
    Audience
      Mobile developers

mindmap root((repo)) What It Does Smooth mobile animations Thread-based execution Replaces Animated API Key Packages Reanimated 4 Worklets Use Cases Gesture animations Screen transitions Parallax effects Requirements React Native New architecture for v4 Audience Mobile developers

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add 60fps gesture-driven animations to a React Native app, card swipes, bottom sheets, or drag-and-drop, without performance jank.

USE CASE 2

Build interactive parallax effects or animated transitions between screens in a React Native mobile app.

USE CASE 3

Migrate an existing React Native app's Animated API usage to thread-based animations for smoother performance on low-end devices.

What is it built with?

TypeScriptJavaScriptReact Native

How does it compare?

	software-mansion/react-native-reanimated	vrtmrz/obsidian-livesync	nitrojs/nitro
Stars	10,826	10,819	10,818
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	moderate	hard	easy
Complexity	3/5	3/5	3/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Version 4 requires the new React Native architecture, older apps must stay on version 3.

Free to use in any project, personal or commercial, with no restrictions.

So what is it?

React Native Reanimated is a library for building smooth animations in React Native apps. React Native is a framework for writing mobile apps using JavaScript, and it comes with a basic animation system built in. Reanimated replaces and significantly extends that built-in system, focusing on making animations feel fluid by running them on a separate thread rather than the main JavaScript thread where most app logic lives. This repository contains two related packages. The first is Reanimated itself, which provides the tools developers use to define animations, handle gestures, and create interactive transitions. The second package, called Worklets, is a lower-level piece that enables JavaScript code to run on a separate thread in React Native apps. Reanimated is built on top of Worklets to achieve its performance characteristics. The current major version, Reanimated 4, only supports the new React Native architecture. If an app is still using the older React Native architecture, it needs to stay on version 3. The README points to dedicated documentation sites for both packages rather than explaining the full API inline. The library is maintained by a Polish software agency called Software Mansion, with financial backing from Shopify and Expo. It is released under the MIT license, which allows free use in commercial and personal projects. Developers looking to try it out can find an example app in the repository under the apps directory to see the API in action without needing to set up a full project.

Copy-paste prompts

Prompt 1

Show me how to build a swipeable card stack in React Native using Reanimated 4 and the gesture handler, the card should fly off screen when swiped past a threshold.

Prompt 2

I want a bottom sheet in my React Native app that the user can drag up and down smoothly. Walk me through implementing it with Reanimated shared values and gesture handling.

Prompt 3

What is the difference between useAnimatedStyle and useSharedValue in Reanimated? Give me a simple counter animation example that shows how they work together.

Prompt 4

How do I animate a header that shrinks when the user scrolls down in a React Native FlatList using Reanimated 4?

Frequently asked questions