animations

name

animations

description

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.

Animations

Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.

References

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