Skeleton

A loading placeholder that mimics content layout while data is being fetched.

Import

tsx

import { Skeleton } from '@tac-ui/native';

Playground

Interactively configure the Skeleton props below.

Variant

Animation

tsx

<Skeleton variant="rectangular" animation="pulse" width={200} height={80} />

Text

Multiple stacked lines simulating a text block.

tsx

<Skeleton variant="text" lines={3} />

Rectangular

Rectangle placeholder for images, cards, or blocks.

tsx

<Skeleton variant="rectangular" width="100%" height={120} />

Circular

Circle placeholder typically used for avatars or icons.

tsx

<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="circular" width={56} height={56} />
<Skeleton variant="circular" width={72} height={72} />

Animation

Choose between a sweeping shimmer highlight or a subtle pulse fade.

tsx

{/* Shimmer */}
<Skeleton animation="shimmer" width={200} height={48} />

{/* Pulse */}
<Skeleton animation="pulse" width={200} height={48} />

Card Composition

Combine skeletons to simulate a card with an avatar and text.

tsx

<View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
  <Skeleton variant="circular" width={48} height={48} />
  <View style={{ gap: 8, flex: 1 }}>
    <Skeleton variant="rectangular" width="40%" height={14} />
    <Skeleton variant="text" lines={2} />
  </View>
</View>

API Reference

Prop	Type	Default	Description
variant	"rectangular" \| "circular" \| "text"	"rectangular"	Shape of the skeleton placeholder.
animation	"shimmer" \| "pulse"	"pulse"	Animation style. Shimmer sweeps a highlight, pulse fades opacity.
width	number \| string	-	Width of the skeleton. Accepts dp numbers or percentage strings.
height	number \| string	16	Height of the skeleton.
lines	number	3	Number of lines rendered when variant is "text".
borderRadius	number	-	Custom border radius. Overrides the variant default radius.
style	ViewStyle	-	Additional styles applied to the animated container.