Learn REACT-NATIVE-REANIMATED with Real Code Examples

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.