React Native Mantine › Feedback
Skeleton
Loading placeholder with pulse animation
Import: import { Skeleton } from 'react-native-mantine';
Usage
import { Skeleton, Stack } from 'react-native-mantine';
<Stack spacing={8}>
<Skeleton height={20} />
<Skeleton height={20} width="70%" />
<Skeleton height={60} circle />
</Stack>Props
| Prop | Type | Default | Description |
|---|---|---|---|
height | number | string | 120 | Skeleton height in pixels (number) or any valid size string. When circle is true, this determines the circle diameter |
width | number | string | "100%" | Skeleton width in pixels (number) or any valid size string. Ignored when circle is true |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or any valid number to set border-radius. Ignored when circle is true |
circle | boolean | false | If true, skeleton will be rendered as a circle with equal width and height based on the height prop |
animate | boolean | true | Controls whether to show the shimmer pulse animation effect |
visible | boolean | true | If true, shows the skeleton. If false and children are provided, shows the children instead |
children | React.ReactNode | Content to display when visible is false. Useful for conditional loading states | |
style | ViewStyle | Additional styles to apply to the skeleton container |