Reanimated Insights

Critical Patterns

Worklet Execution

Functions marked with 'worklet' run on the UI thread. This means:

• No access to JS closures or variables outside the worklet
• No console.log, Date.now(), or other non-reanimated APIs
• Use runOnJS to bridge back to JS thread when needed

Streaming Text Animation

For AI streaming text effects:

const scale = useSharedValue(1)
React.useEffect(() => {
  scale.value = withSpring(1.02, {}, () => {
    scale.value = withSpring(1)
  })
}, [text.length])

Gesture Integration

Reanimated v4+ with Gesture Handler:

• Babel plugin auto-workletizes gesture callbacks
• Use SharedValue directly in gesture config for thread-safe updates
• disableReanimated: true forces gesture callbacks to run on JS thread

Performance Considerations

• Native driver - Animations run on UI thread when possible via native driver
• Reduce re-renders - Use useAnimatedStyle to update styles without triggering React re-renders
• Avoid LayoutAnimation conflicts - Don't mix Reanimated layout animations with React Native's built-in LayoutAnimation

Version Notes

• v4 breaking changes - Reanimated 4.x requires react-native-worklets package and react-native-worklets/plugin babel plugin
• Migration from v3 - runOnJS syntax unchanged, but workletization behavior is stricter in v4