Skeleton

Import

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.

<Skeleton />

Usage

Basic Usage

The Skeleton component creates an animated placeholder while content is loading.

<Skeleton className="h-20 w-full rounded-lg" />

With Content

Show skeleton while loading, then display content when ready.

<Skeleton isLoading={isLoading} className="h-20 rounded-lg">
  <View className="h-20 bg-primary rounded-lg">
    <Text>Loaded Content</Text>
  </View>
</Skeleton>

Animation Variants

Control the animation style with the variant prop.

<Skeleton variant="shimmer" className="h-20 w-full rounded-lg" />
<Skeleton variant="pulse" className="h-20 w-full rounded-lg" />
<Skeleton variant="none" className="h-20 w-full rounded-lg" />

Custom Shimmer Configuration

Customize the shimmer effect with duration, speed, and highlight color.

<Skeleton
  className="h-16 w-full rounded-lg"
  variant="shimmer"
  animation={{
    shimmer: {
      duration: 2000,
      speed: 2,
      highlightColor: 'rgba(59, 130, 246, 0.3)',
    },
  }}
>
  ...
</Skeleton>

Custom Pulse Configuration

Configure pulse animation with duration and opacity range.

<Skeleton
  className="h-16 w-full rounded-lg"
  variant="pulse"
  animation={{
    pulse: {
      duration: 500,
      minOpacity: 0.1,
      maxOpacity: 0.8,
    },
  }}
>
  ...
</Skeleton>

Shape Variations

Create different skeleton shapes using className for styling.

<Skeleton className="h-4 w-full rounded-md" />
<Skeleton className="h-4 w-3/4 rounded-md" />
<Skeleton className="h-4 w-1/2 rounded-md" />
<Skeleton className="size-12 rounded-full" />

Custom Enter/Exit Animations

Apply custom Reanimated transitions when skeleton appears or disappears.

<Skeleton
  entering={FadeIn.duration(300)}
  exiting={FadeOut.duration(300)}
  isLoading={isLoading}
  className="h-20 w-full rounded-lg"
>
  ...
</Skeleton>

Example

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 (
    <Card className="p-4">
      <View className="flex-row items-center gap-3 mb-4">
        <Skeleton isLoading={isLoading} className="h-10 w-10 rounded-full">
          <Avatar size="sm" alt="Avatar">
            <Avatar.Image source={{ uri: 'https://i.pravatar.cc/150?img=4' }} />
            <Avatar.Fallback />
          </Avatar>
        </Skeleton>

        <View className="flex-1 gap-1">
          <Skeleton isLoading={isLoading} className="h-3 w-32 rounded-md">
            <Text className="font-semibold text-foreground">John Doe</Text>
          </Skeleton>
          <Skeleton isLoading={isLoading} className="h-3 w-24 rounded-md">
            <Text className="text-sm text-muted">@johndoe</Text>
          </Skeleton>
        </View>
      </View>

      <Skeleton
        isLoading={isLoading}
        className="h-48 w-full rounded-lg"
        animation={{
          shimmer: {
            duration: 1500,
            speed: 1,
          },
        }}
      >
        <View className="h-48 bg-surface-tertiary rounded-lg overflow-hidden">
          <Image
            source={{
              uri: 'https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/backgrounds/cards/car1.jpg',
            }}
            className="h-full w-full"
          />
        </View>
      </Skeleton>
    </Card>
  );
}

API Reference

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
`className`	`string`	-	Additional CSS classes for styling
`...Animated.ViewProps`	`AnimatedProps<ViewProps>`	-	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
`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

Skeleton

On this page