managarten/apps-archived/memoro/apps/mobile/components/skeletons/utils/SkeletonAnimation.tsx

import React, { useEffect, useRef } from 'react';
import { Animated, ViewStyle, Easing } from 'react-native';

interface SkeletonAnimationProps {
	children: React.ReactNode;
	style?: ViewStyle;
	delay?: number;
}

export const SkeletonAnimation: React.FC<SkeletonAnimationProps> = ({
	children,
	style,
	delay = 0,
}) => {
	const animatedValue = useRef(new Animated.Value(0)).current;

	useEffect(() => {
		const animation = Animated.loop(
			Animated.sequence([
				Animated.timing(animatedValue, {
					toValue: 1,
					duration: 800,
					easing: Easing.bezier(0.5, 0, 0.5, 1),
					useNativeDriver: true,
					delay,
				}),
				Animated.timing(animatedValue, {
					toValue: 0,
					duration: 800,
					easing: Easing.bezier(0.5, 0, 0.5, 1),
					useNativeDriver: true,
				}),
			])
		);

		animation.start();

		return () => {
			animation.stop();
		};
	}, [animatedValue, delay]);

	const opacity = animatedValue.interpolate({
		inputRange: [0, 1],
		outputRange: [0.4, 0.8],
	});

	return <Animated.View style={[style, { opacity }]}>{children}</Animated.View>;
};