---
title: "A First Look at Reanimated 2"
description: "Reanimated 2 is presented as a new approach to building gestures and animations in React Native, replacing the declarative domain-specific language of Reanimated 1 with animation worklets. Worklets are JavaScript functions declared with the “worklet” directive that execute independently on the UI thread, can receive parameters, access JavaScript-thread constants, call other worklets synchronously, and invoke JavaScript-thread functions asynchronously. The API introduces five hooks for creating shared and derived values, handling gesture events, and assigning animated styles or properties; a drag example combines shared values, gesture context, and velocity-based decay. The article also describes a liquid-swipe example using bezier interpolation, gesture handling, and physics-based animation, and reports that the new design lowers the entry barrier, supports cases previously requiring the bridge, and improves initialization performance."
---

# A First Look at Reanimated 2

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Jul 2, 2020

**Type:** Explainer

## Summary

Reanimated 2 is presented as a new approach to building gestures and animations in React Native, replacing the declarative domain-specific language of Reanimated 1 with animation worklets. Worklets are JavaScript functions declared with the “worklet” directive that execute independently on the UI thread, can receive parameters, access JavaScript-thread constants, call other worklets synchronously, and invoke JavaScript-thread functions asynchronously. The API introduces five hooks for creating shared and derived values, handling gesture events, and assigning animated styles or properties; a drag example combines shared values, gesture context, and velocity-based decay. The article also describes a liquid-swipe example using bezier interpolation, gesture handling, and physics-based animation, and reports that the new design lowers the entry barrier, supports cases previously requiring the bridge, and improves initialization performance.

## Context

Reanimated 1 used a declarative domain-specific language that had a steep learning curve, verbose implementations for some operations, limitations in its instruction set, initialization-time performance costs, and cases that required crossing the React Native bridge. Memoizing animation nodes was also challenging and could introduce bugs.

## Approach / What changed

Reanimated 2 uses animation worklets: JavaScript functions that run independently on the UI thread. Its API provides five hooks for shared and derived values, gesture handling, and animated styles or properties, while allowing asynchronous calls back to the JavaScript thread.

## Takeaways

- Reanimated 1 required animation nodes to be declared ahead of time, creating JavaScript-to-UI thread messaging and making memoization important for performance and correctness.
- useSharedValue creates values available on both the JavaScript and UI threads, while useDerivedValue computes a shared value from worklet execution.
- The drag example stores translation offsets in gesture context, updates positions during the active gesture, and applies a velocity-based decay animation on release.

**Tags:** [JavaScript](https://yomu.fyi/topic/javascript), [Performance](https://yomu.fyi/topic/performance), [React Native](https://yomu.fyi/topic/react-native)

- Source: [Shopify](https://shopify.engineering/first-look-reanimated-2)
- Source URL: https://shopify.engineering/first-look-reanimated-2
- Ingested by Yomu: 2026-08-31T01:12:21.204Z

[Read original post](https://shopify.engineering/first-look-reanimated-2)