Skip to Content
ComponentsSkeleton

Skeleton

The Skeleton component is an animated placeholder for loading states with customizable dimensions and colors.

Skeleton

Basic Usage

<Skeleton width={200} height={20} />

Advanced Usage

This is an example of a more complex skeleton as shown in the image.

<View style={styles.skeletonRow}>
  <Skeleton
    width={80}
    height={80}
    borderRadius={8}
    style={styles.skeletonAvatar}
  />
  <View style={styles.skeletonTextGroup}>
    <Skeleton width={180} height={18} style={styles.skeletonTextLine} />
    <Skeleton width={120} height={14} style={styles.skeletonTextLine} />
    <Skeleton width={150} height={14} style={styles.skeletonTextLine} />
  </View>
</View>

Import

import Skeleton from "../components/Skeleton";

Props

  • width (number, Required): Skeleton width in pixels.
  • height (number, Required): Skeleton height in pixels.
  • borderRadius (number, default: 4): Border radius for rounded corners.
  • baseColor (string, default: “#E1E9EE”): Base background color.
  • highlightColor (string, default: “#F2F8FC”): Highlight animation color.
  • style (ViewStyle): Additional custom styles.
ProgressCardStatsCard