# software-mansion/react-native-reanimated

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/software-mansion-react-native-reanimated).**

10,674 stars · 1,456 forks · TypeScript · mit

## Links

- GitHub: https://github.com/software-mansion/react-native-reanimated
- Homepage: https://docs.swmansion.com/react-native-reanimated/
- awesome-repositories: https://awesome-repositories.com/repository/software-mansion-react-native-reanimated.md

## Topics

`animation` `gesture` `javascript` `react-native`

## Description

This project is a cross-platform animation library for React Native that provides a declarative engine for building high-performance user interfaces. It functions by offloading animation logic and interaction processing to the native UI thread, ensuring that visual transitions remain smooth and responsive even when the main application thread is under heavy load.

The library distinguishes itself through a specialized architecture that transforms standard functions into units capable of executing directly on the native thread. It utilizes shared-memory synchronization to maintain consistent data values between the application logic and the native environment, enabling real-time updates without bridge latency. By employing a physics-based interpolation engine, the system simulates natural motion, inertial deceleration, and spring-based transitions that mimic real-world physical behavior.

The framework covers a broad range of interactive capabilities, including gesture-driven interface design, sensor-based motion, and dynamic layout management. It provides mechanisms to track hardware sensor data and virtual keyboard states, allowing interface elements to adjust automatically to device movement or on-screen input changes. These features are supported by a node-based system that caches evaluations to optimize performance and maintain high frame rates during complex interactions.

## Tags

### Mobile Development

- [React Native Libraries](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-libraries.md) — Provides a high-performance, gesture-driven animation library specifically for the React Native ecosystem.

### User Interface & Experience

- [Native Thread Animation Engines](https://awesome-repositories.com/f/user-interface-experience/animation-optimization-tools/animation-performance-optimizers/native-thread-animation-engines.md) — Reanimated runs animation logic on a separate thread to ensure smooth performance and prevent frame drops during complex interactions. ([source](https://docs.swmansion.com/react-native-reanimated/docs/1.x/))
- [Cross-Platform UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-frameworks.md) — Provides a cross-platform framework for building fluid, physics-based motion and interactive interfaces.
- [Declarative Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations.md) — Implements a declarative animation engine that offloads heavy computation to the native thread for high-performance UI updates.
- [UI Animations](https://awesome-repositories.com/f/user-interface-experience/ui-animations.md) — Provides a high-performance animation engine that offloads logic to the native UI thread for fluid mobile transitions.
- [Physics-Based Property Interpolators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/physics-based-property-interpolators.md) — Calculates physics-based motion, including springs and friction, on the UI thread for natural interface transitions.
- [Gesture Interaction Frameworks](https://awesome-repositories.com/f/user-interface-experience/gesture-interaction-frameworks.md) — Enables gesture-driven interface design by mapping touch inputs to physics-based motion and inertial deceleration.
- [Animation Components](https://awesome-repositories.com/f/user-interface-experience/animation-components.md) — Executes complex visual transitions on the native thread to ensure smooth motion. ([source](https://docs.swmansion.com/react-native-reanimated/))
- [Physics-Based Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/physics-based-animation-libraries.md) — Triggers smooth movements between values using spring-based physics to mimic real-world motion. ([source](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation))
- [Touch Gesture Detectors](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-detectors.md) — Attaches gesture definitions to interface components to capture and respond to touch interactions like taps and pans. ([source](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/handling-gestures))
- [Touch Gesture Handlers](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-handlers.md) — Processes touch input events to drive fluid, tactile animations for responsive navigation. ([source](https://docs.swmansion.com/react-native-reanimated/))
- [Physics-Based Animations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations.md) — Calculates momentum-based movement after gesture release to simulate physical friction and natural stopping behavior. ([source](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/handling-gestures))
- [Component Transitions](https://awesome-repositories.com/f/user-interface-experience/component-transitions.md) — Applies motion effects to elements as they enter or exit the screen to create smooth visual transitions. ([source](https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations))
- [Physics-Based Interactions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-libraries/physics-based-interactions.md) — Integrates real-time device sensor data into physics-based interaction models for immersive user interfaces.
- [Motion Sensor Readers](https://awesome-repositories.com/f/user-interface-experience/input-device-detection/motion-sensor-readers.md) — Polls hardware sensors like accelerometers and gyroscopes to drive interactive, motion-responsive animations. ([source](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedSensor))
- [Keyboard Management](https://awesome-repositories.com/f/user-interface-experience/keyboard-management.md) — Manages UI layout adjustments to accommodate virtual keyboard visibility and movement.
- [Animation Properties](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties.md) — Updates component styles and layout values using timing or spring functions to respond to state changes. ([source](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/handling-gestures))
- [Layout Animation Engines](https://awesome-repositories.com/f/user-interface-experience/layout-animation-engines.md) — Animates visual shifts when elements enter or leave the screen to maintain consistent interface flow. ([source](https://docs.swmansion.com/react-native-reanimated/))
- [Layout Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-animation-utilities.md) — Updates component styles and positions dynamically to maintain visual consistency during layout changes. ([source](https://docs.swmansion.com/react-native-reanimated/](https://docs.swmansion.com/react-native-reanimated/))

### Development Tools & Productivity

- [Worklet Compilers](https://awesome-repositories.com/f/development-tools-productivity/ast-transformation-tools/standardized-ast-transformation/worklet-compilers.md) — Transforms standard functions into specialized units that execute directly on the UI thread. ([source](https://docs.swmansion.com/react-native-reanimated/docs/3.x/))
- [Thread-Safe Communication Channels](https://awesome-repositories.com/f/development-tools-productivity/thread-managers/thread-safe-communication-channels.md) — Provides thread-safe data structures for real-time value synchronization between JavaScript and native UI threads.

### DevOps & Infrastructure

- [Native Execution Offloading](https://awesome-repositories.com/f/devops-infrastructure/execution-node-managers/native-execution-offloading.md) — Offloads animation logic and interaction processing to the native UI thread for high-performance execution.

### Programming Languages & Runtimes

- [Build-Time Transformations](https://awesome-repositories.com/f/programming-languages-runtimes/class-method-definitions/class-extensions/build-time-transformations.md) — Transforms standard functions into native-executable bytecode units during the build process to enable high-performance UI thread execution.
- [Multi-threaded Execution](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/concurrency-models/concurrency/execution-models/multi-threaded-execution.md) — Executes animation logic in parallel threads to offload heavy computations from the main thread. ([source](https://cdn.jsdelivr.net/gh/software-mansion/react-native-reanimated@main/README.md))

### Software Engineering & Architecture

- [UI Thread Responsiveness](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/ui-thread-responsiveness.md) — Offloads animation logic to a dedicated native thread to maintain high frame rates and interface responsiveness. ([source](https://docs.swmansion.com/react-native-reanimated/docs/3.x/))
- [Declarative Scene Graphs](https://awesome-repositories.com/f/software-engineering-architecture/declarative-scene-graphs.md) — Represents animation logic as a reactive directed graph that maps state changes to native view property updates.

### Web Development

- [Gesture Handling](https://awesome-repositories.com/f/web-development/gesture-handling.md) — Captures and processes touch events directly on the native layer to drive animations without bridge latency.
- [State Synchronization Handlers](https://awesome-repositories.com/f/web-development/state-update-handlers/state-synchronization-handlers.md) — Maintains shared data values between application logic and native environments to drive real-time updates. ([source](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation))

### Hardware & IoT

- [Sensor-to-UI Mappers](https://awesome-repositories.com/f/hardware-iot/embedded-robotics/sensor-processing/sensor-to-ui-mappers.md) — Maps real-time hardware sensor data to visual properties for physically reactive interface motion. ([source](https://docs.swmansion.com/react-native-reanimated/))

### Data & Databases

- [Node Result Caches](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching-strategies/query-result-caching/method-result-caches/node-result-caches.md) — Caches computed output values of animation nodes within a single frame to prevent redundant execution. ([source](https://docs.swmansion.com/react-native-reanimated/docs/1.x/))

### Operating Systems & Systems Programming

- [Keyboard Input Synchronizers](https://awesome-repositories.com/f/operating-systems-systems-programming/keyboard-input-synchronizers.md) — Tracks virtual keyboard visibility and height to synchronize layout elements and prevent content overlap. ([source](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedKeyboard))