Components
Skeleton
Animated placeholder for loading states. Shapes for lines, circles, and rectangles.
Installation
npx expo-app-ui add skeletonUsage
import Skeleton from "@/components/ui/skeleton";
<Skeleton width={200} height={16} />
<Skeleton circle size={48} />
<Skeleton width="100%" height={120} borderRadius={12} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | DimensionValue | '100%' | Width |
height | DimensionValue | 16 | Height |
borderRadius | number | 6 | Corner radius |
circle | boolean | false | Render as a circle |
size | number | 40 | Circle diameter |
baseColor | string | '#E5E7EB' | Base color |
highlightColor | string | '#F3F4F6' | Highlight color |
duration | number | 1100 | Pulse cycle in ms |
animate | boolean | true | Disable to render static |
style | StyleProp<ViewStyle> | - | Container override |
Accessibility
accessibilityRole="progressbar"accessibilityLabel="Loading"