gitwtfhub

wtf is react-native-reanimated?

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

Analysis updated 2026-06-24

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

TL;DR

React Native Reanimated is a library that makes mobile app animations fluid by running them on a dedicated thread separate from JavaScript, replacing React Native's built-in animation system with a far more powerful one.

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

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

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

REASON 2

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

REASON 3

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

What's in the stack?

TypeScriptJavaScriptReact Native

How it stacks up

software-mansion/react-native-reanimatedvrtmrz/obsidian-livesyncnitrojs/nitro
Stars10,82610,81910,818
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatehardeasy
Complexity3/53/53/5
Audiencedeveloperdeveloperdeveloper

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

How do you spin it up?

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.

Wtf does this do

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.

Yoink these 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

wtf is react-native-reanimated?

React Native Reanimated is a library that makes mobile app animations fluid by running them on a dedicated thread separate from JavaScript, replacing React Native's built-in animation system with a far more powerful one.

What language is react-native-reanimated written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, React Native.

What license does react-native-reanimated use?

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

How hard is react-native-reanimated to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is react-native-reanimated for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane