animating-react-native-expo
CommunityShip smooth gestures with Reanimated v4.
System Documentation
What problem does it solve?
This Skill solves choppy animations, dropped frames, and confusing gesture behavior in React Native (Expo) apps by guiding you to implement motion on the UI thread correctly with Reanimated v4 and React Native Gesture Handler.
Core Features & Use Cases
- Choose the right animation primitive: state-change via CSS transitions, mount/unmount and reflow via Layout Animations, and interactive motion via Shared Values + worklets.
- Build gesture-driven interactions: pan/drag and other gesture patterns that update shared values per-frame without React state spam.
- Prevent common runtime issues: covers setup checks, Babel plugin/worklet failures, GestureHandlerRootView wiring, and debugging/performance pitfalls.
Example use case: You’re building a swipeable inventory item with drag-to-reorder behavior and need the UI to stay responsive while the user interacts.
Quick Start
Install Reanimated v4 and Gesture Handler, then implement your motion using shared values/worklets for gestures, Layout Animations for layout changes, or CSS transitions for simple state-driven style changes.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: animating-react-native-expo Download link: https://github.com/oldwombat/nekrosol-frontend/archive/main.zip#animating-react-native-expo Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.