animating-react-native-expo_skill

Overview

This skill builds performant animations and gesture-driven interactions in React Native (Expo) apps using React Native Reanimated v4 and React Native Gesture Handler. It provides clear defaults, recipes, and troubleshooting guidance for state-driven transitions, layout/mount animations, and interactive, per-frame gestures. Use it to implement smooth UI motion, scroll-linked effects, and responsive drag/pinch/swipe interactions on the UI thread.

How this skill works

The skill recommends the right primitive based on the animation driver: CSS-style transitions for simple state changes, layout entering/exiting animations for mount/unmount and reflow, and shared values plus worklets for gestures and per-frame motion. It shows how to wire useSharedValue, useAnimatedStyle, withTiming/withSpring, and the GestureDetector/hook API to keep animation work on the UI runtime. It also includes setup notes for Expo, troubleshooting steps for worklets and gestures, and patterns to avoid cross-thread performance issues.

When to use it

• Animate style changes triggered by component state or props (use CSS transitions).
• Animate mounting, unmounting, and layout reflows (use layout/entering/exiting animations).
• Drive interactive gestures (pan/pinch/drag/swipe) or physics-based motion (use shared values + worklets).
• Create scroll-linked animations or per-frame visual effects that must run on the UI thread.
• Debug animation performance, worklet failures, or gesture conflicts during development.

Best practices

• Identify the driver first: state, layout, gesture, or scroll before choosing primitives.
• Keep per-frame work on the UI thread using worklets; avoid setting React state every frame.
• Prefer withTiming for tweens and withSpring for physics-based motion.
• Use one Gesture Handler API style per subtree (prefer the hook API) and wrap root in GestureHandlerRootView.
• Avoid transitionProperty: 'all' and large objects captured into worklets to prevent jank.

Example use cases

• A press-to-expand card that smoothly transitions width and elevation using CSS transitions.
• A draggable item that follows finger movement with useSharedValue and snaps back with withSpring.
• Animating list items entering and exiting during filter or pagination using layout animations.
• A parallax header or scroll-linked reveal driven by scroll shared values and tiny worklets.
• Pinch-to-zoom image viewer implemented with GestureDetector and UI-thread transforms.