animate-expo

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

Updated Sep 7, 2026
One-click install
npx skills add https://github.com/raphaelmans/spectralpointengineering --skill animate-expo-raphaelmans
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animate-expo
Source: https://github.com/raphaelmans/spectralpointengineering/tree/main/.skillshare/skills/animate-expo
Command: npx skills add https://github.com/raphaelmans/spectralpointengineering --skill animate-expo-raphaelmans

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? React Native animations often stutter on real devices because they run on the wrong thread, use layout-triggering properties, or ignore gesture velocity handoff. This Skill turns a motion request into a reviewed implementation that survives a release build on a slow device. ## Core Features & Use Cases - Decision-first build sequence: Gates every request by frequency and purpose, then picks the cheapest tool — CSS transitions, layout animations, shared values, or native stack options. - UI-thread correctness: Enforces Reanimated worklets, scheduleOnRN discipline, and transform/opacity-only properties to keep motion off the JS thread. - Ready-to-build recipes: Provides implementations for drag-to-dismiss sheets, swipe-to-delete, collapsing headers, keyboard-synced UI, tab indicators, toasts, and haptics. - Use Case: When asked to add a draggable bottom sheet to an Expo screen, it produces a gesture-driven sheet with momentum projection, rubber-banding, velocity-aware springs, and a haptic on snap — plus what to feel-check on device. ## Quick Start Ask the assistant to build a drag-to-dismiss bottom sheet animation for 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 Gesture.Pan handler with a shared value, capture the current position in onStart, and decide dismissal from projected velocity rather than distance alone. Hand the gesture velocity to a spring so there is no seam when the finger releases, and add overshootClamping on dismissal.

Should I use Reanimated or the core Animated API in Expo?

Use Reanimated for anything a finger touches or anything that must stay smooth while JS is busy. Core Animated cannot be driven by a gesture without crossing the bridge, and useNativeDriver only supports transform and opacity.

Why does my React Native animation stutter on device?

Stutter usually comes from setState in gesture or scroll handlers, animating layout properties like height or width, or scheduling back to the RN runtime every frame. Move values into shared values with useAnimatedStyle and verify on a release build, not Expo Go.

Does Expo Router support native sheet presentations?

Yes, presentation: 'formSheet' gives a real native sheet on both platforms with detents via sheetAllowedDetents. Android caps detents at three, shows no grabber, and cannot host nested stacks inside the sheet.

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

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