skills.rest
emilkowalski
emilkowalskiCOMMUNITY
Explore all skills by this author →
Website𝕏@emilkowalskiGitHub

animate-expo

Builds gesture-driven animations for React Native and Expo apps using Reanimated and Gesture Handler.

34.1k|1.9k|Updated Mar 16, 2026
Search Tags:#mobile#react native#expo#gestures#haptics#Animation#reanimated
One-click install
npx skills add https://github.com/emilkowalski/skills --skill animate-expo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate-expo
Source: https://github.com/emilkowalski/skills/tree/main/skills/animate-expo
Command: npx skills add https://github.com/emilkowalski/skills --skill animate-expo

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 the wrong easing, or ignore gesture velocity handoff. This Skill turns a motion request into an implementation that survives a strict review on a real device, making the decisions in the order that determines whether the animation feels right.

Core Features & Use Cases

  • Decision-first build sequence: Gates every request on whether it should animate at all, names its purpose, then picks the cheapest tool — CSS transitions, layout animations, shared values, or native stack options.
  • UI-thread discipline: Enforces Reanimated worklets, scheduleOnRN instead of deprecated runOnJS, and forbids setState in gesture or scroll handlers to keep motion off the JS thread.
  • Ready-to-build recipes: RECIPES.md ships implementations for press feedback, drag-to-dismiss sheets, swipe-to-delete, collapsing headers, keyboard-synced UI, tab indicators, screen transitions, and toasts.
  • Use Case: Ask it to add a draggable bottom sheet to your Expo app and it produces a gesture-driven implementation with momentum projection, rubber-banding, velocity-aware springs, haptics, and reduced-motion handling.

Quick Start

Use the animate-expo skill to build a drag-to-dismiss bottom sheet with haptics 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 a Gesture.Pan handler with a shared value, capturing the current position in onStart and projecting velocity in onEnd to decide dismissal. Hand the gesture velocity to a spring so there is no seam when the finger releases, and derive the backdrop opacity from the same value.

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

Does Expo Router support native bottom sheets?▼

Yes, setting presentation to formSheet on a Stack.Screen gives you the platform's real sheet with detents for free. Build a custom gesture-driven sheet only when it must live inside an existing screen rather than being its own destination.

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

Use a spring whenever a finger was involved, because springs carry velocity through an interruption while timing curves restart. Everything else uses timing with ease-out for entering or exiting elements and ease-in-out for on-screen movement.

Why is my Reanimated worklet throwing on device but working in the debugger?▼

Functions called from a worklet need the 'worklet' directive as their first line, or they throw at runtime on device while working fine in the debugger. Also confirm the worklets Babel plugin is configured, which babel-preset-expo handles automatically in Expo projects.

Related Skills

Explore More Software Engineering Skills→
JubaKitiashviliJubaKitiashvili
41

animate

Implement gesture-driven animations in React Native with Reanimated and Gesture Handler.

Community
Advanced
emilkowalskiemilkowalski
27.6k

review-animations

Review animation and motion code for craft regressions.

Community
Advanced
vh2224vh2224
1

make-interfaces-feel-better

Refine interface typography, motion, spacing, and surface details.

Community
Intermediate
treesus6treesus6
1

erne-animate

Create gesture-driven UI animations in React Native with Reanimated and Gesture Handler.

Community
Intermediate