managarten/apps-archived/maerchenzauber/apps/mobile/components/atoms/Skeleton.tsx

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

interface SkeletonProps {
	style?: ViewStyle;
}

export default function Skeleton({ style }: SkeletonProps) {
	const animatedValue = new Animated.Value(0);

	useEffect(() => {
		const animation = Animated.loop(
			Animated.sequence([
				Animated.timing(animatedValue, {
					toValue: 1,
					duration: 1000,
					useNativeDriver: true,
				}),
				Animated.timing(animatedValue, {
					toValue: 0,
					duration: 1000,
					useNativeDriver: true,
				}),
			])
		);

		animation.start();

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

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

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

const styles = StyleSheet.create({
	skeleton: {
		backgroundColor: '#2C2C2C',
	},
});