animate-expo

Implements UI-thread animations, gestures, and haptics in React Native and Expo apps.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill animate-expo-seyamalam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animate-expo
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/animate-expo
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill animate-expo-seyamalam

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? React Native animations often stutter on real devices because they run on the wrong thread, use approximated curves, or animate layout properties. This Skill provides a decision sequence and production-ready recipes for building motion that holds up on a release build on slow hardware. ## Core Features & Use Cases - Decision framework: Gates whether something should animate at all, then picks the cheapest tool (CSS transitions, layout animations, shared values, native stack options) and the right spring or easing curve. - 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. - Use Case: When adding a swipe-to-delete gesture to a transaction list in an Expo app, the Skill produces a Reanimated worklet with velocity-based momentum projection, rubber-banding, and a haptic on commit — all on the UI thread. ## Quick Start Ask the assistant to add a drag-to-dismiss bottom sheet with haptic feedback to your Expo screen using Reanimated and Gesture Handler.

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 value in onStart and projecting velocity in onEnd to decide dismissal. Hand the gesture velocity to a spring so the release continues seamlessly, and use overshootClamping so the sheet never springs past the screen edge.

How do I add swipe-to-delete to a FlatList row in Expo?

Use Gesture.Pan with activeOffsetX so it does not fight vertical scrolling, drive the row's translateX with a shared value, and commit deletion when projected velocity crosses a threshold. Close the gap with itemLayoutAnimation on the list rather than animating the row's height.

Should I use Reanimated or the core Animated API for gestures?

Use Reanimated for anything a finger touches. 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 and keep running while JavaScript is busy.

Why does my React Native animation stutter on real devices?

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 judge feel only on a release build, not Expo Go.

Does Reanimated 4 work with Expo and the New Architecture?

Yes, Reanimated 4 requires the New Architecture and installs via npx expo install react-native-reanimated react-native-worklets. In Expo projects, babel-preset-expo configures the worklets plugin automatically, and GestureHandlerRootView must wrap the app root.

When should I not animate a UI element on mobile?

Skip animation for actions happening over 100 times a day like tab switches, keyboard changes, and scrolling, and keep frequent interactions under 150ms. Tab switches should use animation: 'none' since sliding implies a hierarchy that does not exist between peers.