How to use Reanimated worklets in React Native?

Question

Accepted Answer

**Worklets** — functions that run on the UI thread.

**Basic worklet:**
```tsx
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

function AnimatedBox() {
  const offset = useSharedValue(0);

// Worklet runs on UI thread
  const animatedStyle = useAnimatedStyle(() => {
    'worklet';
    return {
      transform: [{ translateX: offset.value }],
    };
  });

return <Animated.View style={[styles.box, animatedStyle]} />;
}
```

**Shared value updates:**
```tsx
// On JS thread
offset.value = withSpring(100);

// In worklet
'worklet';
const x = interpolate(
  offset.value,
  [0, 1],
  [0, 200]
);
```

**Benefits:**
- 60fps animations.
- No JS thread blocking.
- Direct access to shared values.

**Limitations:**
- Cannot access JS closures.
- Limited API access.

React Native: How to use Reanimated worklets in React Native?