reanimated-core
Core Hooks & the Worklet Model
The foundation of every Reanimated animation: shared values, worklets, and the two-thread model. Get this right and everything else composes cleanly.
The two-thread model
React Native runs your JS logic on the JS thread. Reanimated runs animations on the UI thread via worklets — small functions that are copied to a separate JS runtime on the UI thread and executed there, in sync with the display's refresh rate.
| JS thread | UI thread (worklets) | |
|---|---|---|
| Runs | React render, effects, event handlers, business logic | useAnimatedStyle, useDerivedValue, gesture callbacks, functions marked 'worklet' |
| Blocked by | Heavy JS work, list rendering, network parsing | Nothing you write should block it — keep worklets tiny |
| Frame budget | Not frame-critical | 16.6ms @ 60fps, 8.3ms @ 120fps ProMotion |
| Can call | runOnUI to schedule worklets |
runOnJS to call back into JS-only code |
Shared values are the bridge: they can be read/written from both threads, and mutating one on the UI thread never round-trips through React.
Keep all motion on the UI thread: everything that animates must run in a worklet (useAnimatedStyle, useDerivedValue, gesture callbacks). Never setState on every frame to drive motion — that hops to the JS thread and drops frames.