animate-expo

Implements React Native and Expo animations using Reanimated, Gesture Handler, and native screen transitions.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill animate-expo-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate-expo
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/emilkowalski/animate-expo
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill animate-expo-quanthubbr

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? Mobile animations in React Native often stutter, feel wrong on real devices, or animate things that should not animate at all. This Skill applies a disciplined decision sequence — whether to animate, which thread to run on, which properties to use, spring versus timing, and gesture handoff — so motion survives a strict review on a release build on the slowest supported device. ## Core Features & Use Cases - Decision-first build sequence: Gates every request by frequency and purpose before writing code, then picks the cheapest tool that works, from CSS transitions to shared values to native stack options. - UI-thread correctness: Enforces Reanimated worklets, shared values with .get()/.set(), and scheduleOnRN discipline to keep motion off the JS thread and avoid per-frame React renders. - Ready-to-build recipes: RECIPES.md ships implementations for press feedback, drag-to-dismiss sheets, swipe-to-delete, collapsing headers, list entrances, keyboard-synced UI, tab indicators, screen transitions, and toasts. - Use Case: When asked to add a draggable bottom sheet to an Expo screen, the Skill decides between presentation: 'formSheet' and a custom gesture-driven sheet, then writes the Reanimated and Gesture Handler code with velocity handoff, rubber-banding, haptics, and reduced-motion support. ## Quick Start Ask the assistant to build a drag-to-dismiss bottom sheet with spring physics and haptics for your Expo app.

Frequently Asked Questions about animate-expo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
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. 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 a gesture or scroll handler, scheduling back to the RN runtime per frame, or animating layout properties like height or width. Move values into shared values with useAnimatedStyle and animate only transform and opacity.

When should I use a spring versus a timing animation?▼

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

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

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

How do I add haptics to animations in an Expo app?▼

Use expo-haptics with one haptic per user action, fired on the same frame as the visual cause, such as a detent catching. From a worklet, schedule the call back to the RN runtime with scheduleOnRN, and never rely on haptics as the only feedback.