Generate React Native Reanimated animation code for React Native apps. Use when user asks to create, implement, or add animations in React Native — including transitions, gestures, scroll-linked effects, layout animations, layout transitions, entering/exiting animations, CSS animations, CSS transitions, shared element transitions, color animations, parallax, fade, slide, scale, spring, timing, decay, keyframes, worklets, accordion, bottom sheet, flip card, collapsing header, or any motion effect using react-native-reanimated. Also use for integrating react-native-gesture-handler with Reanimated, understanding worklets, animating between screens, testing animations with Jest, or checking which properties are animatable. Use when this capability is needed.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Generate React Native Reanimated animation code for React Native apps. Use when user asks to create, implement, or add animations in React Native — including transitions, gestures, scroll-linked effects, layout animations, layout transitions, entering/exiting animations, CSS animations, CSS transitions, shared element transitions, color animations, parallax, fade, slide, scale, spring, timing, decay, keyframes, worklets, accordion, bottom sheet, flip card, collapsing header, or any motion effect using react-native-reanimated. Also use for integrating react-native-gesture-handler with Reanimated, understanding worklets, animating between screens, testing animations with Jest, or checking which properties are animatable. Use when this capability is needed.
metadata
{"author":"estevg"}
React Native Reanimated Code Generator
Generate performant animation code using React Native Reanimated. Supports both v3 and v4.
Version Detection
Check the project's package.json to determine the version:
v4 (New Architecture only): requires react-native-worklets as separate dependency
v3 (supports Legacy and New Architecture): single package install
Animate components between screens during navigation:
// Screen A
<Animated.Image sharedTransitionTag={`photo-${id}`} source={...} />
// Screen B (same tag)<Animated.ImagesharedTransitionTag={`photo-${id}`} source={...} />
Requires @react-navigation/native-stack and feature flag. For setup and customization, read references/shared-element-transitions.md.
Gesture Integration
For drag, pinch, fling, and other gesture-driven animations, read references/gesture-patterns.md.
Requires: react-native-gesture-handler + <GestureHandlerRootView> at app root.
Full API Reference
For complete hook signatures, animation parameters, v3↔v4 differences, and advanced APIs, read references/api-reference.md.
Worklets & Advanced APIs
For understanding worklets, 'worklet' directive, runOnJS/runOnUI, useAnimatedReaction, useFrameCallback, measure, dispatchCommand, and performance tips, read references/worklets-advanced.md.
Real-World Component Patterns
For full implementations of accordion, bottom sheet, flip card, and FAB, read references/component-patterns.md.
Testing, Colors & Supported Properties
For testing animations with Jest, animating colors with interpolateColor, and the full list of animatable properties by platform, read references/testing-and-properties.md.
Rules
Always use Animated.View/Text/Image/ScrollView/FlatList — never animate plain RN components
v4: use runOnJS/runOnUI (re-exported), or import scheduleOnRN/scheduleOnUI from react-native-worklets
v3: use runOnJS(fn)() for heavy JS-thread logic
Always use Extrapolation.CLAMP with interpolate unless you explicitly want extrapolation
