# Skeleton **Category**: native **URL**: https://www.heroui.com/docs/native/components/skeleton **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(feedback)/skeleton.mdx > Displays a loading placeholder with shimmer or pulse animation effects. *** ## Import ```tsx import { Skeleton } from 'heroui-native'; ``` ## Anatomy The Skeleton component is a simple wrapper that renders a placeholder for content that is loading. It does not have any child components. ```tsx ``` ## Usage ### Basic Usage The Skeleton component creates an animated placeholder while content is loading. ```tsx ``` ### With Content Show skeleton while loading, then display content when ready. ```tsx Loaded Content ``` ### Animation Variants Control the animation style with the `variant` prop. ```tsx ``` ### Custom Shimmer Configuration Customize the shimmer effect with duration, speed, and highlight color. ```tsx ... ``` ### Custom Pulse Configuration Configure pulse animation with duration and opacity range. ```tsx ... ``` ### Shape Variations Create different skeleton shapes using className for styling. ```tsx ``` ### Custom Enter/Exit Animations Apply custom Reanimated transitions when skeleton appears or disappears. ```tsx ... ``` ## Example ```tsx import { Avatar, Card, Skeleton } from 'heroui-native'; import { useState } from 'react'; import { Image, Text, View } from 'react-native'; export default function SkeletonExample() { const [isLoading, setIsLoading] = useState(true); return ( John Doe @johndoe ); } ``` You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/main/example/src/app/(home)/components/skeleton.tsx). ## API Reference ### Skeleton | prop | type | default | description | | ----------------------- | -------------------------------- | ----------- | ------------------------------------------------------------ | | `children` | `React.ReactNode` | - | Content to show when not loading | | `isLoading` | `boolean` | `true` | Whether the skeleton is currently loading | | `variant` | `'shimmer' \| 'pulse' \| 'none'` | `'shimmer'` | Animation variant | | `animation` | `SkeletonRootAnimation` | - | Animation configuration | | `isAnimatedStyleActive` | `boolean` | `true` | Whether animated styles (react-native-reanimated) are active | | `className` | `string` | - | Additional CSS classes for styling | | `...Animated.ViewProps` | `AnimatedProps` | - | All Reanimated Animated.View props are supported | #### SkeletonRootAnimation Animation configuration for Skeleton component. Can be: - `false` or `"disabled"`: Disable only root animations - `"disable-all"`: Disable all animations including children - `true` or `undefined`: Use default animations - `object`: Custom animation configuration | prop | type | default | description | | ------------------------ | ---------------------------------------- | --------------------------- | ----------------------------------------------- | | `state` | `'disabled' \| 'disable-all' \| boolean` | - | Disable animations while customizing properties | | `entering.value` | `EntryOrExitLayoutType` | `FadeIn` | Custom entering animation | | `exiting.value` | `EntryOrExitLayoutType` | `FadeOut` | Custom exiting animation | | `shimmer.duration` | `number` | `1500` | Animation duration in milliseconds | | `shimmer.speed` | `number` | `1` | Speed multiplier for the animation | | `shimmer.highlightColor` | `string` | - | Highlight color for the shimmer effect | | `shimmer.easing` | `EasingFunction` | `Easing.linear` | Easing function for the animation | | `pulse.duration` | `number` | `1000` | Animation duration in milliseconds | | `pulse.minOpacity` | `number` | `0.5` | Minimum opacity value | | `pulse.maxOpacity` | `number` | `1` | Maximum opacity value | | `pulse.easing` | `EasingFunction` | `Easing.inOut(Easing.ease)` | Easing function for the animation |