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 Setup Reanimated v4 (latest) npm install react-native-reanimated react-native-worklets Babel plugin: 'react-native-worklets/plugin' (must be last in plugins list). For Expo: no Babel config needed. Run npx expo prebuild after install. Reanimated v3 npm install react-native-reanimated Babel plugin: 'react-native-reanimated/plugin' (must be last in plugins list). Core Pattern Every animation follows three steps: import Animated , { useSharedValue , useAnimatedStyle , withTiming } from 'react-native-reanimated' ; function Component ( ) { // 1. Create shared value (lives on UI thread) const offset = useSharedValue ( 0 ) ; // 2. Bind to style const animatedStyle = useAnimatedStyle ( ( ) => ( { transform : [ { translateX : offset . value } ] , } ) ) ; // 3. Trigger animation const handlePress = ( ) => { offset . value = withTiming ( 200 , { duration : 500 } ) ; } ; return ( < Animated.View style = { [ styles . box , animatedStyle ] }
< Pressable onPress = { handlePress }
Move </ Text </ Pressable
</ Animated.View
) ; } Animation Selection User wants Function Key params Smooth fixed-duration transition withTiming(to, {duration, easing}) Default: 300ms, Easing.inOut(Easing.quad) Natural bouncy feel withSpring(to, {mass, damping, stiffness}) Default: mass=1, damping=10, stiffness=100 Momentum after fling withDecay({velocity, clamp}) Needs initial velocity from gesture Clamp spring range withClamp({min, max}, withSpring(to)) v4: limits spring overshoot Loop/pulse/shake withRepeat(anim, reps, reverse) reps=0 for infinite (v4), reps=-1 (v3) Multi-step choreography withSequence(anim1, anim2, ...) Runs in order Delayed start withDelay(ms, anim) Delays any animation Spring tuning: lower damping (5–8) = more bounce, higher stiffness (150–200) = snappier, higher mass (2–3) = heavier. Quick Patterns Fade const opacity = useSharedValue ( 0 ) ; const style = useAnimatedStyle ( ( ) => ( { opacity : opacity . value } ) ) ; // Show: opacity.value = withTiming(1); // Hide: opacity.value = withTiming(0); Slide from side const translateX = useSharedValue ( - SCREEN_WIDTH ) ; const style = useAnimatedStyle ( ( ) => ( { transform : [ { translateX : translateX . value } ] , } ) ) ; // Enter: translateX.value = withSpring(0); Scale on press const scale = useSharedValue ( 1 ) ; const style = useAnimatedStyle ( ( ) => ( { transform : [ { scale : scale . value } ] , } ) ) ; // In: scale.value = withSpring(0.95); // Out: scale.value = withSpring(1); Interpolation import { interpolate , Extrapolation } from 'react-native-reanimated' ; const style = useAnimatedStyle ( ( ) => ( { opacity : interpolate ( scrollY . value , [ 0 , 100 ] , [ 1 , 0 ] , Extrapolation . CLAMP ) , transform : [ { scale : interpolate ( scrollY . value , [ 0 , 100 ] , [ 1 , 0.8 ] , Extrapolation . CLAMP ) , } ] , } ) ) ; Scroll-linked animation const scrollY = useSharedValue ( 0 ) ; const scrollHandler = useAnimatedScrollHandler ( { onScroll : ( event ) => { scrollY . value = event . contentOffset . y ; } , } ) ; < Animated.ScrollView onScroll = { scrollHandler }
{ children } </ Animated.ScrollView
Or simpler with useScrollOffset (v4) / useScrollViewOffset (v3): const ref = useAnimatedRef < Animated . ScrollView
( ) ; const scrollOffset = useScrollOffset ( ref ) ; // auto-tracks scroll position < Animated.ScrollView ref = { ref }
{ children } </ Animated.ScrollView
Layout Animations (Mount/Unmount) Built-in presets — no shared values needed: import Animated , { FadeIn , SlideInRight , SlideOutLeft } from 'react-native-reanimated' ; < Animated.View entering = { FadeIn . duration ( 400 ) . delay ( 100 ) } exiting = { SlideOutLeft . duration ( 300 ) }
{ content } </ Animated.View
Presets: FadeIn/Out , SlideIn/OutLeft/Right/Up/Down , ZoomIn/Out , BounceIn/Out , FlipInEasyX/Y , LightSpeedIn/Out , PinwheelIn/Out , RollIn/Out , RotateIn/Out , StretchIn/Out . Modifiers: .duration(ms) , .delay(ms) , .springify() , .damping(n) , .stiffness(n) , .randomDelay() , .reduceMotion() , .withCallback() . Layout Transitions (position/size changes) Animate when component position or size changes: import { LinearTransition , SequencedTransition } from 'react-native-reanimated' ; < Animated.View layout = { LinearTransition . springify ( ) . damping ( 15 ) } /> Transitions: LinearTransition , SequencedTransition , FadingTransition , JumpingTransition , CurvedTransition , EntryExitTransition . Keyframe Animations (complex entering/exiting) import { Keyframe } from 'react-native-reanimated' ; const enteringAnimation = new Keyframe ( { 0 : { opacity : 0 , transform : [ { translateY : - 50 } ] } , 50 : { opacity : 0.5 , transform : [ { translateY : - 25 } ] , easing : Easing . out ( Easing . quad ) } , 100 : { opacity : 1 , transform : [ { translateY : 0 } ] } , } ) . duration ( 500 ) ; < Animated.View entering = { enteringAnimation }
{ content } </ Animated.View
For custom animations, layout transitions, and list animations, read references/layout-animations.md . CSS Animations (v4 only) Declarative CSS-like animations using style props directly: < Animated . View style = { { animationName : { from : { opacity : 0 , transform : [ { translateY : - 20 } ] } , to : { opacity : 1 , transform : [ { translateY : 0 } ] } , } , animationDuration : '500ms' , animationTimingFunction : 'ease-out' , } } /
Supported props: animationName , animationDuration , animationDelay , animationIterationCount , animationDirection , animationFillMode , animationPlayState , animationTimingFunction . CSS Transitions (v4 only) Automatic transitions when style values change: < Animated.View style = { { width : isExpanded ? 200 : 100 , transitionProperty : 'width' , transitionDuration : '300ms' , transitionTimingFunction : 'ease-in-out' , } } /> Multiple properties: transitionProperty: ['width', 'opacity', 'transform'] with matching transitionDuration: ['300ms', '200ms', '500ms'] . For detailed CSS animations/transitions reference (keyframes, timing functions, examples), read references/css-animations-detailed.md . Shared Element Transitions (Experimental) Animate components between screens during navigation: // Screen A < Animated.Image sharedTransitionTag = {
photo- ${ id }} source = { ... } /> // Screen B (same tag) < Animated.Image sharedTransitionTag = {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 +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 Combine: withSequence(withTiming(1.2, {duration: 100}), withSpring(1)) Use useReducedMotion() to respect accessibility settings Test on real devices — simulator performance differs significantly v4: useAnimatedKeyboard is deprecated → use react-native-keyboard-controller Based on react-native-reanimated by Software Mansion (MIT License)