mobile-darmasaba/components/skeleton.tsx

import Styles from '@/constants/Styles';
import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';

const Skeleton = ({ width, height, borderRadius = 0, widthType = 'number' }: { width: number, widthType?: 'number' | 'percent', height: number, borderRadius?: number }) => {
   const opacity = useSharedValue(0.3);

   useEffect(() => {
      opacity.value = withRepeat(
         withTiming(1, { duration: 500, easing: Easing.linear }),
         -1,
         true
      );
   }, []);

   const animatedStyle = useAnimatedStyle(() => {
      return {
         opacity: opacity.value,
      };
   });

   return (
      <Animated.View
         style={[
            styles.skeleton,
            { width: widthType === 'percent' ? `${width}%` : width, height: height, borderRadius: borderRadius },
            animatedStyle, Styles.mv05
         ]}
      />
   );
};

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

export default Skeleton;