expo-animation

Implements React Native and Expo animations with Reanimated, Gesture Handler, and haptics.

Updated Mar 27, 2026
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-animation-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-animation
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-animation
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-animation-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-haptics, expo-router, react-native-keyboard-controller.

What problem does it solve? Building animations in React Native often results in motion that stutters on real devices, fights gestures, or animates things that should not move at all. This Skill provides a decision sequence and implementation recipes so animations run on the UI thread, hand off gesture velocity correctly, and degrade gracefully for reduced motion. ## Core Features & Use Cases - Decision-first build sequence: Gates every request by frequency and purpose, then picks the cheapest tool that works, from Reanimated CSS transitions to native stack screen transitions in Expo Router. - UI-thread correctness rules: Enforces shared values, worklets, and scheduleOnRN patterns that keep motion off the JS thread, with explicit never-ship rules for PanResponder, per-frame setState, and layout-property animation. - Ready-to-build recipes: RECIPES.md covers press feedback, drag-to-dismiss bottom sheets, swipe-to-delete rows, collapsing headers, list entrances, keyboard-synced UI, tab indicators, screen transitions, toasts, and threshold-triggered haptics. - Use Case: When asked to add a draggable bottom sheet to an Expo app, the Skill writes the full Gesture.Pan plus withSpring implementation with momentum projection, rubber-banding, velocity handoff, and a haptic on snap-back. ## Quick Start Use the expo-animation skill to build a drag-to-dismiss bottom sheet with spring physics and haptic feedback in my Expo app.

Frequently Asked Questions about expo-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a drag-to-dismiss bottom sheet in React Native?▼

Use Gesture.Pan from react-native-gesture-handler with a Reanimated shared value, capturing the current position in onStart and projecting velocity in onEnd. Settle with withSpring using duration 300, dampingRatio 0.8, and the gesture velocity so there is no seam when the finger releases.

Reanimated vs core Animated for React Native gestures?▼

Reanimated is required for anything a finger touches because its worklets run on the UI thread and keep running while JS is busy. Core Animated cannot be driven by a gesture without crossing the bridge, and useNativeDriver only supports transform and opacity.

Why does my React Native animation stutter on device?▼

Stutter usually comes from calling setState in a gesture or scroll handler, scheduling back to the RN runtime per frame, or animating layout properties like height and width. Move values into shared values with useAnimatedStyle and animate only transform and opacity.

Does Reanimated 4 work with Expo and the New Architecture?▼

Reanimated 4 requires the New Architecture and installs via npx expo install react-native-reanimated react-native-worklets, which resolves SDK-matched versions. In Expo projects, babel-preset-expo configures the worklets plugin automatically with no manual babel.config.js step.

When should I not animate something in a mobile app?▼

Skip animation for actions happening over 100 times a day like tab switches, keyboard open and close, scrolling, and settings toggles. Tab switches should use animation: 'none' since sliding implies hierarchy between peers, and frequent interactions get at most a sub-150ms near-imperceptible response.

How do I add haptic feedback to animations in Expo?▼

Use expo-haptics with selectionAsync for value ticks, impactAsync Light for snap-home moments, and notificationAsync for success or failure. Fire the haptic in the same frame as the visual cause, limit to one per user action, and schedule it from worklets via scheduleOnRN.