expo-animation

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

Updated Sep 8, 2026
One-click install
npx skills add https://github.com/bmiit145/leadBee --skill expo-animation-bmiit145
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-animation
Source: https://github.com/bmiit145/leadBee/tree/main/mobile/.agents/skills/expo-animation
Command: npx skills add https://github.com/bmiit145/leadBee --skill expo-animation-bmiit145

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-haptics, expo-router, react-native-keyboard-controller, lottie-react-native, @shopify/react-native-skia.

What problem does it solve? Animations in React Native often stutter on real devices because they run on the wrong thread, use approximated curves, or ignore gesture velocity handoff. This Skill turns a request for motion into an implementation that survives review on a release build, deciding first whether something should animate at all, then which thread, properties, and spring or timing curve to use. ## Core Features & Use Cases - Decision-first build sequence: Gates every animation by frequency and purpose, then picks the cheapest tool that works, from Reanimated CSS transitions to shared values, layout animations, and native stack transitions in Expo Router. - Ready-to-build recipes: RECIPES.md ships implementations for press feedback, drag-to-dismiss bottom sheets, swipe-to-delete rows, collapsing headers, list entrances, keyboard-synced UI, tab indicators, screen transitions, and toasts. - Mobile-specific craft: Enforces UI-thread worklets, velocity-aware springs, rubber-banding, haptics paired with visuals, reduced-motion support, and 120fps ProMotion configuration. - Use Case: A user asks for a draggable bottom sheet in their Expo app. The Skill checks whether presentation: 'formSheet' covers it, and if not, writes a Gesture.Pan implementation with momentum projection, velocity handoff to a spring, and a haptic on snap-back. ## Quick Start Use the expo-animation skill to add a drag-to-dismiss bottom sheet with spring physics and haptic feedback to 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 with a shared value, capture the current position in onStart, and project momentum from release velocity to decide dismissal. Hand the velocity to a spring so the animation continues seamlessly from the finger, and add overshootClamping so the sheet never springs past the screen edge.

Should I use Reanimated or the core Animated API in Expo?▼

Use Reanimated for anything a finger touches or anything derived from scroll. Core Animated cannot be driven by a gesture without crossing the bridge, and useNativeDriver only supports transform and opacity. Reanimated worklets run on the UI thread and keep running while JavaScript is busy.

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 JS 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 Expo Router support native screen transitions and sheets?▼

Yes. Expo Router's native stack supports animation options, presentation: 'modal', and presentation: 'formSheet' with detents, which maps to a real UISheetPresentationController. Never rebuild screen transitions in JavaScript, since the native ones keep the interactive back gesture.

When should I not add an animation to a mobile UI?▼

Skip animation for interactions happening over 100 times a day like tab switches, keyboard changes, and scrolling, where the platform default is correct. Frequent interactions like presses get only near-imperceptible motion under 150ms, and tabs should never slide since they are peers, not a hierarchy.

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

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