crazycharge-app/component/global/loadingDots.tsx

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

const LoadingDots = () => {
    const fadeAnim1 = useRef(new Animated.Value(1)).current;
    const fadeAnim2 = useRef(new Animated.Value(0)).current;
    const fadeAnim3 = useRef(new Animated.Value(0)).current;
    useEffect(() => {
        const animateSequence = () => {
            Animated.sequence([
                Animated.timing(fadeAnim1, {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: true
                }),
                Animated.timing(fadeAnim1, {
                    toValue: 0,
                    duration: 0,
                    useNativeDriver: true
                }),
                Animated.timing(fadeAnim2, {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: true
                }),
                Animated.timing(fadeAnim2, {
                    toValue: 0,
                    duration: 0,
                    useNativeDriver: true
                }),
                Animated.timing(fadeAnim3, {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: true
                }),
                Animated.timing(fadeAnim3, {
                    toValue: 0,
                    duration: 0,
                    useNativeDriver: true
                })
            ]).start(() => {
                animateSequence();
            });
        };

        animateSequence();
    }, [fadeAnim1, fadeAnim2, fadeAnim3]);

    return (
        <View className="flex-row items-center">
            <Animated.Text style={[styles.text, { opacity: fadeAnim1 }]}>
                ．
            </Animated.Text>
            <Animated.Text style={[styles.text, { opacity: fadeAnim2 }]}>
                ．
            </Animated.Text>
            <Animated.Text style={[styles.text, { opacity: fadeAnim3 }]}>
                ．
            </Animated.Text>
        </View>
    );
};

const styles = StyleSheet.create({
    text: {
        fontSize: 16,
        color: '#02677D'
    }
});

export default LoadingDots;