Skeleton
A loading placeholder that mimics the shape of content.
import { Skeleton } from "@/components/ui/skeleton";
import React from "react";
import { View } from "react-native";
export default function SkeletonDemo() {
return (
<View className='flex-1 flex-row justify-center items-center p-6 gap-5 bg-white'>
<Skeleton className='h-12 w-12 rounded-full' />
<View className="flex flex-col gap-2">
<Skeleton className='h-4 w-52 rounded-full' />
<Skeleton className='h-4 w-40 rounded-full' />
</View>
</View>
);
}Installation
npx appykit@latest add skeletonCreate a folder named ui under component folder in your project and add the following code in a file named 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 };
Update the import paths to match your project setup.
Usage
import { Skeleton } from "@/components/ui/skeleton"; <Skeleton className='h-52 w-52 rounded-2xl' />