skills.rest
aadilmallick
aadilmallickCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-animation

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

Updated Sep 13, 2026
Search Tags:#animation#react native#expo#gestures#haptics#reanimated#mobile ui
One-click install
npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill expo-animation-aadilmallick
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-animation
Source: https://github.com/aadilmallick/myfitness-pal-clone/tree/main/.agents/skills/expo-animation
Command: npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill expo-animation-aadilmallick

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? Animations in React Native 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 animation 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-made recipes: Provides implementations for press feedback, drag-to-dismiss sheets, swipe-to-delete, collapsing headers, keyboard-synced UI, tab indicators, toasts, and Expo Router screen transitions. - Use Case: When adding a bottom sheet to an Expo app, the Skill decides between formSheet and a custom gesture-driven sheet, then writes the spring config with velocity handoff, rubber-banding, haptics, and reduced-motion support. ## Quick Start Use the expo-animation skill to build a drag-to-dismiss bottom sheet with spring physics and haptic feedback for my Expo app.

Frequently Asked Questions about expo-animation

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 for translateY, capture the current value in onStart, and decide dismissal with momentum projection rather than distance alone. Hand the gesture velocity to a spring so the release continues seamlessly, and add overshootClamping when dismissing.

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, while Reanimated worklets run on the UI thread.

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 JS runtime every frame. Move values into shared values with useAnimatedStyle and judge feel only on a release build.

Does Expo Router support native bottom sheets and screen transitions?▼

Yes. Use presentation: 'formSheet' for a real native sheet with detents, and configure the native stack's animation options for screen transitions instead of rebuilding them in JS. Note Android caps detents at three and shows no grabber.

When should I not animate something in a mobile app?▼

Skip animation for actions happening 100+ times a day like tab switches, keyboard changes, and scrolling. Tab switches should use animation: 'none' since tabs are peers, and frequent interactions get at most a sub-150ms press feedback.

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 exactly one haptic per user action on the same frame as the visual, and from a worklet call it via scheduleOnRN.

Related Skills

Explore More Software Engineering Skills→
RepairYourTechRepairYourTech
6

react-native

Develops cross-platform mobile apps with React Native, Expo, navigation, animations, and EAS Build deployment.

Community
Advanced
lionheartapplionheartapp

mobile-touch

Design tactile gesture and haptic animation specifications for native iOS and Android apps.

Community
Intermediate
mosif16mosif16
18

ios-ux-design

Evaluate iOS app interfaces against Apple Human Interface Guidelines and generate implementation specifications.

Community
Advanced
epiphanyappsepiphanyapps

reanimated-skia-performance

Optimize React Native animations and Skia graphics to reduce JS thread stalls.

Official
Advanced