Анимации

import { Animated, View, Pressable } from 'react-native';
import { useRef } from 'react';

function FadeIn() {
    const opacity = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        Animated.timing(opacity, {
            toValue: 1,
            duration: 300,
            useNativeDriver: true,
        }).start();
    }, []);

    return <Animated.View style={{ opacity, width: 100, height: 100, backgroundColor: 'red' }} />;
}

const animated = useRef(new Animated.Value(0)).current;

const translateY = animated.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -100],
});

<Animated.View style={{ transform: [{ translateY }] }} />

Animated.sequence([
    Animated.timing(x, { toValue: 100, duration: 300, useNativeDriver: true }),
    Animated.timing(x, { toValue: 0, duration: 300, useNativeDriver: true }),
]).start();

Animated.parallel([
    Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }),
    Animated.timing(scale, { toValue: 1, duration: 300, useNativeDriver: true }),
]).start();

Animated.loop(
    Animated.sequence([
        Animated.timing(rotate, { toValue: 1, duration: 1000, useNativeDriver: true }),
        Animated.timing(rotate, { toValue: 0, duration: 1000, useNativeDriver: true }),
    ])
).start();

npx expo install react-native-reanimated

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

function Box() {
    const offset = useSharedValue(0);

    const style = useAnimatedStyle(() => ({
        transform: [{ translateX: offset.value }],
    }));

    return (
        <Animated.View style={[styles.box, style]} />
    );
}

import { withSpring } from 'react-native-reanimated';

offset.value = withSpring(100);

import { withTiming } from 'react-native-reanimated';

offset.value = withTiming(100, { duration: 500 });

import { withDelay, withSequence, withTiming } from 'react-native-reanimated';

offset.value = withSequence(
    withTiming(100, { duration: 300 }),
    withDelay(200, withTiming(0, { duration: 300 }))
);

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

function Draggable() {
    const x = useSharedValue(0);
    const y = useSharedValue(0);

    const pan = Gesture.Pan()
        .onUpdate((e) => {
            x.value = e.translationX;
            y.value = e.translationY;
        })
        .onEnd(() => {
            x.value = withSpring(0);
            y.value = withSpring(0);
        });

    const style = useAnimatedStyle(() => ({
        transform: [{ translateX: x.value }, { translateY: y.value }],
    }));

    return (
        <GestureDetector gesture={pan}>
            <Animated.View style={[styles.box, style]} />
        </GestureDetector>
    );
}

import Animated, { FadeIn, FadeOut, SlideInRight } from 'react-native-reanimated';

<Animated.View entering={FadeIn.duration(300)} exiting={FadeOut}>
    {/* контент */}
</Animated.View>