Reanimated Skeleton component

skeleton.component.tsx

import { useEffect } from 'react';
import { ViewStyle } from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

type SkeletonProps = { style?: ViewStyle; className?: string };

const color1 = '#E1E9EE';
const color2 = '#F2F8FC';

const Skeleton = ({ style }: SkeletonProps) => {
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withRepeat(withTiming(1, { duration: 1000 }), -1, true);
  }, [progress]);

  const animatedStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(progress.value, [0, 1], [color1, color2]),
  }));

  return <Animated.View style={[style, animatedStyle]} className="h-10" />;
};

export default Skeleton;