software-mansion/react-native-reanimated

★ 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

Things people build with this

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.

Tech stack

TypeScriptJavaScriptReact Native

Getting 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.

In plain English

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?

Open on GitHub → Explain another repo

← software-mansion on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.