Software Mansion's best practices for animations in React Native apps built on Reanimated 4 and the New Architecture. Use when writing, reviewing, or debugging animations — including decisions between CSS transitions, CSS animations, and shared value animations; animating text; layout animations; infinite animation cleanup; and performance tuning. Trigger on: 'animation in React Native', 'animate in React Native', 'Reanimated', 'useSharedValue', 'useAnimatedStyle', 'layout animation', 'CSS transition', 'CSS animation', 'withSpring', 'withTiming', 'smooth animation', 'animation performance', or any request to make something move on screen.
bidah npx skillmds@latest add bidah/animations Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.
| File | When to read |
|---|---|
animations.md |
Choosing between CSS transitions, CSS animations, and shared value animations; animating text; layout animations; infinite animation cleanup; scheduleOnRN |
animations-performance.md |
New Architecture feature flags, 120fps setup, FPS drop fixes, simultaneous animation limits |
bidah/react-native-hifi/tree/main/skills/software-mansion-best-practices/animations commit e212f8614d