# SkeletonGroup **Category**: native **URL**: https://www.heroui.com/docs/native/components/skeleton-group **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(feedback)/skeleton-group.mdx > Coordinates multiple skeleton loading placeholders with centralized animation control. *** ## Import ```tsx import { SkeletonGroup } from 'heroui-native'; ``` ## Anatomy ```tsx ``` - **SkeletonGroup**: Root container that provides centralized control for all skeleton items - **SkeletonGroup.Item**: Individual skeleton item that inherits props from the parent group ## Usage ### Basic Usage The SkeletonGroup component manages multiple skeleton items with shared loading state and animation. ```tsx ``` ### With Container Layout Use className on the group to control layout of skeleton items. ```tsx ``` ### With isSkeletonOnly for Pure Skeleton Layouts Use `isSkeletonOnly` when the group contains only skeleton placeholders with layout wrappers (like View) that have no content to render in the loaded state. This prop hides the entire group when `isLoading` is false, preventing empty containers from affecting your layout. ```tsx {/* This View is only for layout, no content */} ``` ### With Animation Variants Control animation style for all items in the group. ```tsx ``` ### With Custom Animation Configuration Configure shimmer or pulse animations for the entire group. ```tsx ``` ### With Enter/Exit Animations Apply Reanimated transitions when the group appears or disappears. ```tsx ``` ## Example ```tsx import { Card, SkeletonGroup, Avatar } from 'heroui-native'; import { useState } from 'react'; import { Text, View, Image } from 'react-native'; export default function SkeletonGroupExample() { const [isLoading, setIsLoading] = useState(true); return ( John Doe @johndoe This is the first line of the post content. Second line with more interesting content to read. Last line is shorter. ); } ``` You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/main/example/src/app/(home)/components/skeleton-group.tsx). ## API Reference ### SkeletonGroup | prop | type | default | description | | ----------------------- | -------------------------------- | ----------- | ---------------------------------------------------------------------- | | `children` | `React.ReactNode` | - | SkeletonGroup.Item components and layout elements | | `isLoading` | `boolean` | `true` | Whether the skeleton items are currently loading | | `isSkeletonOnly` | `boolean` | `false` | Hides entire group when isLoading is false (for skeleton-only layouts) | | `variant` | `'shimmer' \| 'pulse' \| 'none'` | `'shimmer'` | Animation variant for all items in the group | | `animation` | `SkeletonRootAnimation` | - | Animation configuration | | `className` | `string` | - | Additional CSS classes for the group container | | `style` | `StyleProp` | - | Custom styles for the group container | | `...Animated.ViewProps` | `AnimatedProps` | - | All Reanimated Animated.View props are supported | #### SkeletonRootAnimation Animation configuration for SkeletonGroup 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 | ### SkeletonGroup.Item | prop | type | default | description | | ----------------------- | -------------------------------- | --------- | ------------------------------------------------------------------- | | `children` | `React.ReactNode` | - | Content to show when not loading | | `isLoading` | `boolean` | inherited | Whether the skeleton is currently loading (overrides group setting) | | `variant` | `'shimmer' \| 'pulse' \| 'none'` | inherited | Animation variant (overrides group setting) | | `animation` | `SkeletonRootAnimation` | inherited | Animation configuration (overrides group setting) | | `className` | `string` | - | Additional CSS classes for styling the item | | `...Animated.ViewProps` | `AnimatedProps` | - | All Reanimated Animated.View props are supported | ## Special Notes ### Props Inheritance SkeletonGroup.Item components inherit all animation-related props from their parent SkeletonGroup: - `isLoading` - `variant` - `animation` Individual items can override any inherited prop by providing their own value.