expo-animation

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

Updated Sep 11, 2026
One-click install
npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-animation-cyrus-pinto
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expo-animation
Source: https://github.com/CYRUS-pinto/pi-bot/tree/main/.agents/skills/expo-animation
Command: npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-animation-cyrus-pinto

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? Animations in React Native often stutter on real devices because they run on the wrong thread, use layout-triggering properties, or ignore gesture velocity handoff. This Skill provides a decision framework and ready-to-build recipes so motion in an Expo app feels right on a release build, not just in the simulator. ## Core Features & Use Cases - Decision-first build sequence: Gates every animation by frequency and purpose, then picks the cheapest tool — CSS transitions, layout animations, shared values, native stack transitions, or formSheet. - Ready-to-build recipes: Press feedback, drag-to-dismiss bottom sheets, swipe-to-delete rows, collapsing headers, list entrances, keyboard-synced UI, tab indicators, screen transitions, and toasts. - UI-thread discipline: Enforces Reanimated worklets, scheduleOnRN placement, spring velocity handoff, reduced-motion support, and haptics paired with visuals. - Use Case: When asked to add a draggable bottom sheet to an Expo screen, it produces a Gesture.Pan + shared value implementation with momentum projection, rubber-banding, spring velocity handoff, and a haptic on snap — plus what to feel-check on a physical device. ## Quick Start Use the expo-animation skill to build a drag-to-dismiss bottom sheet with spring physics and haptic feedback for 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 for translateY, capture the current value in onStart, and decide dismissal from projected velocity rather than distance alone. Hand the gesture velocity to withSpring so there is no seam when the finger releases, and derive the backdrop opacity from the same value.

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, while Reanimated worklets run on the UI thread even when JS is busy.

Why does my React Native animation stutter on device?

Stutter usually comes from setState in gesture or scroll handlers, animating layout properties like height or width, or scheduling back to the JS runtime every frame. Move values into shared values with useAnimatedStyle and verify on a release build, since Expo Go hides these problems.

When should I use a spring versus a timing animation?

Use a spring whenever a finger was involved, because springs carry velocity through an interruption while timing curves restart. Everything else uses timing with ease-out for entering or exiting elements and ease-in-out for on-screen movement, staying under 300ms for UI.

Does Expo Router support native sheet presentations?

Yes, presentation: 'formSheet' gives a real native sheet on both platforms with detents via sheetAllowedDetents. Android caps detents at three, shows no grabber, and cannot host nested stacks inside the sheet, so keep sheet content to a single screen.

Why do my Reanimated gestures do nothing with no error?

The most common cause is a missing GestureHandlerRootView wrapping the app root, which silently disables all gestures. Also confirm dependencies were installed with npx expo install so versions match the SDK, and that the worklets Babel plugin is configured.