animate-expo

Build and review motion, gestures, and transitions in React Native and Expo apps.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill animate-expo-alex-jordan547
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animate-expo
Source: https://github.com/alex-jordan547/agent-setup/tree/main/skills/animate-expo
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill animate-expo-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building fluid animations in React Native and Expo is error-prone: gestures steal scroll, animations restart from zero mid-drag, keyboard-driven UI lags, and layout animations stutter. This Skill provides version-aware guidance and tested recipes for Reanimated 4, Gesture Handler, and Expo Router so motion work is correct the first time. ## Core Features & Use Cases - Gesture-driven interactions: Recipes for draggable bottom sheets, swipe-to-delete rows, and press feedback with momentum projection, rubber-banding, and velocity-aware springs. - Scroll and layout animation: Collapsing headers, staggered list entrances, tab indicators, and toasts using shared values and layout animation builders without per-frame React renders. - Native navigation and platform behavior: Expo Router screen transitions, formSheet detents, back-gesture matching, and keyboard-synced UI via react-native-keyboard-controller. - Use Case: When adding a drag-to-dismiss sheet to an Expo screen, the Skill directs you to the matching recipe, explains why velocity must be passed to the spring, and flags platform differences like Android's three-detent cap. ## Quick Start Ask the agent to implement a swipe-to-delete row or review the animation code in your Expo screen using the animate-expo skill.

Frequently Asked Questions about animate-expo

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 Reanimated shared value driven by a Gesture.Pan handler, capturing the current position in onStart and projecting flick velocity in onEnd. Pass gesture velocity into the settling spring and clamp overshoot so the sheet never flashes past the screen edge.

How do I implement swipe to delete in a React Native list?

Gesture Handler ships ReanimatedSwipeable, which handles swipe-to-reveal actions on the UI thread. Build a custom pan gesture only for swipe-to-commit with momentum projection, and declare activeOffsetX so the row does not steal vertical scrolling.

Does Expo Router formSheet work the same on Android and iOS?

No. Android caps sheetAllowedDetents at three, shows no grabber, and cannot host native headers or nested stacks inside form sheets. Design for three detents and use presentation modal when the sheet needs its own navigation.

Why does my collapsing header animation stutter on scroll?

Animating the header's height forces a layout pass on every scroll frame, competing with the scroll itself. Give the container a fixed height, translate content inside it with overflow hidden, and always use Extrapolation.CLAMP on interpolations.

Should I animate list rows with entering animations in FlatList?

No. Virtualized lists recycle rows, so entering animations re-fire every time a row scrolls back into view, causing flicker. Animate the list container once on mount or use itemLayoutAnimation for reflow only.

How do I sync UI with the keyboard in Expo?

Install react-native-keyboard-controller, wrap the root layout in KeyboardProvider, and drive styles from useReanimatedKeyboardAnimation on the UI thread. Keyboard.addListener plus a timing animation will always lag the system keyboard curve.