Buttery 60fps Gestures With React Native Reanimated 3

The classic React Native Animated API runs on the JS thread, so heavy logic causes dropped frames. Reanimated runs animations on the UI thread via worklets, keeping gestures smooth even under load.

Shared Values and Animated Styles

const offset = useSharedValue(0);

const style = useAnimatedStyle(() => ({
  transform: [{ translateX: offset.value }],
}));

// Animate on the UI thread
offset.value = withSpring(100);

Gesture-Driven Motion

const pan = Gesture.Pan().onChange((e) => {
  offset.value += e.changeX; // runs on the UI thread, no bridge
});

<GestureDetector gesture={pan}>
  <Animated.View style={style} />
</GestureDetector>;

Worklets

A worklet is a JS function marked to run on the UI thread. Reanimated handles the marking automatically inside useAnimatedStyle and gesture callbacks — that's the secret to its smoothness.