expo-animation

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

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

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, feel wrong, or shouldn't exist at all — this Skill provides a decision framework and implementation recipes for building motion in Expo apps that runs on the UI thread and holds up on real devices. ## Core Features & Use Cases - Decision-first workflow: Gates every animation by frequency and purpose, then picks the cheapest tool — CSS transitions, layout animations, shared values, or native stack options. - Ready-to-build recipes: Drag-to-dismiss bottom sheets, swipe-to-delete rows, collapsing headers, keyboard-synced UI, tab indicators, toasts, and screen transitions via Expo Router. - Thread-correct implementation: Enforces Reanimated worklets, scheduleOnRN instead of deprecated runOnJS, and spring configs with velocity handoff for gesture-driven motion. - Use Case: When asked to add a draggable bottom sheet to an Expo app, it produces a gesture-driven implementation with momentum projection, rubber-banding, haptic feedback, and reduced-motion support. ## Quick Start Use the expo-animation skill to build a drag-to-dismiss bottom sheet with spring physics and haptics 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 a Gesture.Pan handler with a shared value, capturing the current position in onStart and projecting velocity in onEnd to decide dismissal. Hand the gesture velocity to a spring so the animation continues seamlessly after release, and add rubber-banding past the top 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 gestures without crossing the bridge, and useNativeDriver only supports transform and opacity, while Reanimated worklets run on the UI thread.

Why does my React Native animation stutter on device?

Stutter usually comes from calling 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 test on a release build, not Expo Go.

Does Expo Router support native bottom sheets and screen transitions?

Yes, Expo Router's native stack supports presentation: 'formSheet' for real platform sheets and animation options for screen transitions. Never rebuild screen transitions in JS, since the native ones keep the interactive back gesture and match platform behavior.

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

Skip animation for actions happening over 100 times a day like tab switches, keyboard changes, and scrolling. For tens of daily uses, keep it under 150ms; tab switches should use animation: 'none' since sliding implies hierarchy that does not exist.