47. Reanimated and worklets

`react-native-reanimated` runs animation logic in "worklets" — small JS functions executed on the UI thread — enabling smooth 60fps gesture-driven interactions like a swipeable transaction row, without round-tripping to the JS thread per frame.

import { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";

function useSwipeAnimation() {
  const translateX = useSharedValue(0);
  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));
  function dismiss() {
    translateX.value = withSpring(-400);
  }
  return { style, dismiss };
}

Because worklets run on the UI thread, they can't directly call arbitrary JS functions or access most React state; `runOnJS` is the escape hatch when a worklet needs to trigger JS-side logic, like updating a store after a swipe completes.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges