animate-expo

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

Updated Sep 5, 2023
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill animate-expo-eyenalxai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animate-expo
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/animate-expo
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill animate-expo-eyenalxai

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 apps often stutter, feel wrong, or break on real devices because they run on the wrong thread, use approximated curves, or ignore gesture velocity handoff. This Skill turns a motion request into an implementation that survives review on a real device, deciding first whether something should animate at all. ## 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. - UI-thread correctness: Enforces Reanimated worklets, shared values with .get()/.set(), scheduleOnRN instead of deprecated runOnJS, and bans setState in gesture or scroll handlers. - 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: You need a bottom sheet the user can drag to dismiss. The Skill provides the full gesture implementation with momentum projection, rubber-banding, velocity-aware springs, and a haptic on snap-back. ## Quick Start Use the animate-expo skill to build a draggable bottom sheet with spring dismissal and haptic feedback in my Expo app.

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 Gesture.Pan with a shared value for translateY, capture the current value in onStart, apply rubber-banding past the top edge, 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.

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 JS is busy.

Why does my React Native animation stutter on device?

Stutter usually comes from setState in a gesture or scroll handler, scheduling back to the JS runtime per frame, or animating layout properties like height or width. Move values into shared values with useAnimatedStyle and animate only transform and opacity.

Does Reanimated 4 work with Expo Go and the New Architecture?

Reanimated 4 requires the New Architecture, and babel-preset-expo configures the worklets plugin automatically in Expo projects. Expo Go is not a valid performance environment — judge feel in a release build on the slowest device you support.

When should I not animate something in a mobile app?

Skip animation for interactions happening 100+ times a day like tab switches, keyboard open/close, and scrolling — use platform defaults instead. Tab switches should never slide since tabs are peers, not a hierarchy; use animation: 'none'.

How do I add haptic feedback to animations in Expo?

Use expo-haptics: selectionAsync for value ticks, impactAsync for snaps and commits, and notificationAsync for success or failure. Fire the haptic on the same frame as the visual cause, at most once per user action, and schedule it from worklets with scheduleOnRN.