skills.rest
expo
expoOFFICIAL
Explore all skills by this author →
Website𝕏@expoGitHub

expo-animation

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

2.5k|140|Updated Nov 30, 2025
Search Tags:#react native#expo#haptics#Animation#reanimated#mobile ui#gesture handler
One-click install
npx skills add https://github.com/expo/skills --skill expo-animation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-animation
Source: https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-animation
Command: npx skills add https://github.com/expo/skills --skill expo-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native-reanimated, react-native-worklets, react-native-gesture-handler, expo-haptics, expo-router, react-native-keyboard-controller, lottie-react-native, @shopify/react-native-skia.

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 an implementation that survives review on a release build, deciding first whether something should animate at all, then which tool, properties, curve, and thread to use.

Core Features & Use Cases

  • Decision framework for motion: Gates every request by frequency and purpose, then picks the cheapest tool that works — CSS transitions, layout animations, shared values with gestures, native stack transitions, formSheet, Lottie, or Skia.
  • 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.
  • Platform-correct details: Covers Reanimated 4 worklets, scheduleOnRN replacing runOnJS, spring configs with velocity handoff, expo-haptics timing, reduced motion, 120fps ProMotion, and Android/iOS formSheet differences.
  • Use Case: Ask for a bottom sheet the user can drag to dismiss, and get a Gesture.Pan implementation with momentum projection, rubber-banding at the boundary, velocity-aware springs, and a haptic on snap-back.

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 Gesture.Pan with a shared value, capture the current position in onStart, project flick velocity to decide dismissal, and hand velocity to a spring so the release feels continuous. Add rubber-band resistance past the top edge and overshootClamping on dismissal.

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 gestures without crossing the bridge, and useNativeDriver only supports transform and opacity. Reanimated worklets run on the UI thread while JS is busy.

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 on a release build, not Expo Go.

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 at the causal moment in the same frame as the visual, once per user action, and call it via scheduleOnRN from worklets.

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 — use platform defaults instead. Tab switches should never slide since tabs are peers, and press feedback should stay under 150ms.

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

Yes, Reanimated 4 requires the New Architecture and installs via npx expo install react-native-reanimated react-native-worklets. babel-preset-expo configures the worklets plugin automatically, and scheduleOnRN replaces the deprecated runOnJS.

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
pradeepmoulipradeepmouli

axiom-display-performance

Diagnose and optimize frame-rate issues on ProMotion devices via render loop configuration and MetricKit telemetry.

Community
Advanced
pronpratanTpronpratanT

animate

Plan and implement CSS and JavaScript animations with performance and accessibility considerations.

Community
Advanced
epiphanyappsepiphanyapps

reanimated-skia-performance

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

Official
Advanced