Skeleton

A placeholder preview for content before the data gets loaded, an alternative for spinners.

Import

import { Skeleton } from '@rn-vui/themed';

Theme Key

Skeleton

Usage

Variants

The component supports 2 shape variants, i.e. circle, rectangle.

<Stack row align="center" spacing={4}>
  <Skeleton width={120} height={40} />
  <Skeleton circle width={40} height={40} />
</Stack>

Animations

By default, the skeleton pulsates, but you can change the animation to a wave or disable it entirely.

<Stack row align="center" spacing={4}>
  <Skeleton animation="pulse" width={80} height={40} />
  <Skeleton
    LinearGradientComponent={LinearGradient}
    animation="wave"
    width={80}
    height={40}
  />
  <Skeleton animation="none" width={80} height={40} />
</Stack>

Props

note

Includes all View props.

Name	Type	Default	Description
LinearGradientComponent	React Component		Custom Linear Gradient Component
animation	none | pulse | wave	pulse	Type of animation
circle	boolean		show circular variant
height	DimensionValue	12	Height of Skeleton View
skeletonStyle	View Style		Custom style for skeleton gradient
width	DimensionValue	100%	Width of Skeleton View