skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

expo-animation

Implements gesture-driven animations in React Native and Expo using Reanimated worklets and Gesture Handler.

16|1|Updated May 5, 2026
Search Tags:#animations#react native#expo#gestures#reanimated#worklets#mobile ui
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-animation-aibiz-automatyzacje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-animation
Source: https://github.com/AIBiz-Automatyzacje/workspace-template-mobile/tree/main/.claude/skills/expo-animation
Command: npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-animation-aibiz-automatyzacje

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. This Skill provides a decision sequence and ready-made recipes for building motion that stays on the UI thread and feels correct on physical devices. ## Core Features & Use Cases - Decision framework for motion: Gates whether something should animate at all based on frequency, then selects the cheapest tool (CSS transitions, layout animations, shared values, native stack options, Lottie, or Skia). - UI-thread implementation patterns: Enforces Reanimated worklets, shared values with .get()/.set(), scheduleOnRN instead of deprecated runOnJS, and spring configs with velocity handoff for interruptible gestures. - Ready-to-build recipes: RECIPES.md covers press feedback, drag-to-dismiss bottom sheets, swipe-to-delete rows, collapsing headers, list entrances, keyboard-synced UI, tab indicators, screen transitions, and toasts. - Use Case: When adding a swipe-to-delete gesture to a list in an Expo app, the Skill provides the full Gesture.Pan implementation with momentum projection, axis locking against vertical scroll, and haptic feedback on commit. ## Quick Start Ask the assistant to build a drag-to-dismiss bottom sheet or fix a janky scroll animation in your Expo app using the expo-animation skill.

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, apply rubber-banding past the top edge, and project flick velocity in onEnd to decide dismissal. Hand the gesture velocity to the spring so there is no seam when the finger releases.

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 entirely on the UI thread.

Why does my React Native animation stutter on real devices?▼

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 only call scheduleOnRN in onEnd or threshold reactions.

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

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

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. Use timing with ease-out for entering or exiting elements and ease-in-out for on-screen movement, keeping UI durations under 300ms.

Why should I avoid animating height or width in React Native?▼

Animating height, width, margin, or flex re-runs Yoga layout on every frame for the node and its siblings, which competes with scrolling and causes jank. Animate transform and opacity instead, except for absolutely positioned childless elements like tab pills where width is safe.

Related Skills

Explore More Software Engineering Skills→
JubaKitiashviliJubaKitiashvili
41

animate

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

Community
Advanced
luigiinredluigiinred
1

maestro-create-test

Create Maestro E2E test flows by inspecting the live device screen and building YAML step-by-step.

Community
Advanced
bugrabilgebugrabilge
10

mobile-design

Guide mobile UI/UX design with iOS HIG and Android Material Design patterns.

Community
Intermediate
aadilmallickaadilmallick

expo-ui

Build native iOS and Android UI with @expo/ui SwiftUI and Jetpack Compose components.

Community
Intermediate