File size: 1,111 Bytes
71638d4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import React, { useEffect } from 'react';
import { View, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withRepeat,
withTiming,
withSequence
} from 'react-native-reanimated';
interface SkeletonProps {
width?: DimensionValue;
height?: DimensionValue;
style?: ViewStyle;
borderRadius?: number;
}
export const Skeleton: React.FC<SkeletonProps> = ({
width = '100%',
height = 20,
style,
borderRadius = 4
}) => {
const opacity = useSharedValue(0.3);
useEffect(() => {
opacity.value = withRepeat(
withSequence(
withTiming(0.3, { duration: 1000 }),
withTiming(0.7, { duration: 1000 })
),
-1,
true
);
}, []);
const animatedStyle = useAnimatedStyle(() => ({
opacity: opacity.value,
}));
return (
<Animated.View
style={[
styles.skeleton,
{ width, height, borderRadius },
style,
animatedStyle,
]}
/>
);
};
const styles = StyleSheet.create({
skeleton: {
backgroundColor: '#E1E9EE',
},
});
|