animation-with-react-compiler_skill

Overview

This skill provides clear, actionable guidelines for using React Native Reanimated shared values when a project uses the React Compiler. It explains why you should avoid direct .value access and shows the safe get()/set() alternatives for reading and updating shared values. The guidance focuses on compatibility, type safety, and predictable behavior with the React Compiler.

How this skill works

The skill inspects code patterns that read or write useSharedValue instances and recommends replacing direct .value access with sv.get() and sv.set(...). It covers reading inside worklets and effects, updating via direct values, updater functions, and animation wrappers (withSpring/withTiming). It enforces API usage that aligns with React Compiler constraints and TypeScript safety.

When to use it

• Working in a project with React Compiler enabled
• Implementing animations or derived values with useSharedValue
• Accessing shared value data inside worklets (useAnimatedStyle, useDerivedValue, etc.)
• Reading or logging shared values in effects or callbacks
• Updating shared values in response to user interaction or animation events

Best practices

• Always use sv.get() when reading a shared value instead of sv.value
• Use sv.set(value) or sv.set(current => next) to modify shared values
• Wrap animated updates with animation helpers: sv.set(withSpring(...)) or sv.set(withTiming(...))
• Prefer updater functions (sv.set(current => ...)) for atomic, predictable increments
• Keep reads inside worklets and useEffect as appropriate — get() is valid in both contexts

Example use cases

• Animating width/opacity inside useAnimatedStyle using sv.get()
• Incrementing a counter on button press with sv.set(current => current + 1)
• Triggering spring/timing animations via sv.set(withSpring(...)) for smooth transitions
• Logging a shared value in useEffect with sv.get() for debugging or persistence
• Deriving values with useDerivedValue that read other shared values with get()