Skeleton
Demo
Shows an skeleton component.
Installation
npx @react-native-reusables/cli@latest add skeletonCopy/paste the following code to ~/components/ui/skeleton.tsx
import * as React from 'react';import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming,} from 'react-native-reanimated';import { cn } from '~/lib/utils';
const duration = 1000;
function Skeleton({ className, ...props}: Omit<React.ComponentPropsWithoutRef<typeof Animated.View>, 'style'>) { const sv = useSharedValue(1);
React.useEffect(() => { sv.value = withRepeat( withSequence(withTiming(0.5, { duration }), withTiming(1, { duration })), -1 ); }, []);
const style = useAnimatedStyle(() => ({ opacity: sv.value, }));
return ( <Animated.View style={style} className={cn('rounded-md bg-secondary dark:bg-muted', className)} {...props} /> );}
export { Skeleton };Usage
import { Skeleton } from '~/components/ui/skeleton';
function Example() { return ( <Skeleton className='h-12 w-12 rounded-full' /> );}Props
Skeleton
Extends View props except for style.