Learn REACT-NATIVE-REANIMATED with Real Code Examples
Updated Nov 26, 2025
Code Sample Descriptions
1
Simple React Native Reanimated Example
# react_native_reanimated/demo/App.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function App() {
const offset = useSharedValue(0)
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }]
}))
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />
<Button title="Move" onPress={() => { offset.value = withSpring(200) }} />
</View>
)
}
A basic React Native Reanimated example that moves a box horizontally using a spring animation.
2
Vertical Slide Animation
# react_native_reanimated/demo/VerticalSlide.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function VerticalSlide() {
const offset = useSharedValue(0)
const style = useAnimatedStyle(() => ({ transform: [{ translateY: offset.value }] }))
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Animated.View style={[{ width: 100, height: 100, backgroundColor: 'green' }, style]} />
<Button title="Move" onPress={() => { offset.value = withSpring(200) }} />
</View>
)
}
Animates a box vertically using Reanimated spring.
3
Opacity Fade Animation
# react_native_reanimated/demo/Fade.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
export default function Fade() {
const opacity = useSharedValue(0)
const style = useAnimatedStyle(() => ({ opacity: opacity.value }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'purple' }, style]} />
<Button title="Fade In" onPress={() => { opacity.value = withTiming(1) }} />
</View>
)
}
Animates a box fading in using shared value.
4
Scale Up Animation
# react_native_reanimated/demo/ScaleUp.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function ScaleUp() {
const scale = useSharedValue(0.5)
const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'red' }, style]} />
<Button title="Scale" onPress={() => { scale.value = withSpring(1) }} />
</View>
)
}
Animates a box scaling up using spring animation.
5
Rotation Animation
# react_native_reanimated/demo/Rotate.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function Rotate() {
const rotation = useSharedValue(0)
const style = useAnimatedStyle(() => ({ transform: [{ rotateZ: `${rotation.value}deg` }] }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'orange' }, style]} />
<Button title="Rotate" onPress={() => { rotation.value = withSpring(360) }} />
</View>
)
}
Rotates a box using spring physics.
6
Diagonal Slide Animation
# react_native_reanimated/demo/DiagonalSlide.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function DiagonalSlide() {
const x = useSharedValue(0)
const y = useSharedValue(0)
const style = useAnimatedStyle(() => ({ transform: [{ translateX: x.value }, { translateY: y.value }] }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'blue' }, style]} />
<Button title="Move" onPress={() => { x.value = withSpring(150); y.value = withSpring(150) }} />
</View>
)
}
Moves a box diagonally using two shared values.
7
Combined Opacity and Scale
# react_native_reanimated/demo/OpacityScale.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function OpacityScale() {
const scale = useSharedValue(0.5)
const opacity = useSharedValue(0)
const style = useAnimatedStyle(() => ({ transform:[{ scale: scale.value }], opacity: opacity.value }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'cyan' }, style]} />
<Button title="Animate" onPress={() => { scale.value = withSpring(1); opacity.value = withSpring(1) }} />
</View>
)
}
Animates both opacity and scale simultaneously.
8
Spring Bounce Animation
# react_native_reanimated/demo/Bounce.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function Bounce() {
const y = useSharedValue(0)
const style = useAnimatedStyle(() => ({ transform:[{ translateY: y.value }] }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'pink' }, style]} />
<Button title="Bounce" onPress={() => { y.value = withSpring(100, { damping: 2, stiffness: 100 }) }} />
</View>
)
}
A bouncing box effect using custom spring config.
9
Delayed Animation Start
# react_native_reanimated/demo/DelayedStart.jsx
import React, { useState, useEffect } from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function DelayedStart() {
const x = useSharedValue(0)
const [start, setStart] = useState(false)
useEffect(() => { setTimeout(() => setStart(true), 1000) }, [])
const style = useAnimatedStyle(() => ({ transform:[{ translateX: x.value }] }))
useEffect(() => { if(start) x.value = withSpring(200) }, [start])
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'brown' }, style]} />
</View>
)
}
Starts the animation with a delay using setTimeout.