Reanimated 3 Worklets: Writing JavaScript That Runs on the UI Thread

Insight

Reanimated 3 introduces worklets – tiny JavaScript functions that are compiled to native bytecode and run on the UI thread. Because they bypass the React‑Native bridge, you can update layout, opacity, or transform values at 60 fps without costly setState cycles. The key is to keep worklet code pure (no side‑effects, no async calls) and to annotate it with the worklet directive.

Example

import { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function Card() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => {
    'worklet'; // <- tells Reanimated to compile this block
    return { transform: [{ scale: withTiming(scale.value, { duration: 200 }) }] };
  });

  return (
    <Pressable onPressIn={() => (scale.value = 0.95)} onPressOut={() => (scale.value = 1)}>
      <Animated.View style={animatedStyle}>/* content */</Animated.View>
    </Pressable>
  );
}

Takeaway

When performance matters, move any animation‑related math into a Reanimated worklet. Keep the function synchronous and side‑effect‑free, and you’ll get native‑speed UI updates without extra bridge traffic.