Skeleton

Placeholders for loading content.
iOS
Android
Web
tsx
<Skeleton animate />

Props

Prop
Description
text
boolean
Shape (pick one; default is a single text line).
avatar
boolean
Shape (pick one; default is a single text line).
button
boolean
Shape (pick one; default is a single text line).
card
boolean
Shape (pick one; default is a single text line).
list
boolean
Shape (pick one; default is a single text line).
table
boolean
Shape (pick one; default is a single text line).
small
boolean
Size (pick one). Scales the line height and the avatar/button footprint.
large
boolean
Size (pick one). Scales the line height and the avatar/button footprint.
long
boolean
A line that runs most of the way across (80%), a mid-paragraph line.
short
boolean
A short trailing line (60%), the last line of a paragraph.
animate
boolean
Subtle opacity pulse while content loads.
accessibilityLabel
string
Screen-reader label announced for the loading placeholder. Defaults to "Loading". The placeholder carries a `progressbar` role + busy state so assistive tech announces the pending content (matching Spinner / Progress).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

text

Don’t
Three full-width lines read as a solid block, not as a paragraph of prose.
Do
Vary the line widths and shorten the last line so it reads like real wrapped text.

avatar

Don’t
A square placeholder for a round avatar snaps shape the instant the image loads.
Do
Match the avatar's circle exactly so the photo drops in with no shift.

button

Don’t
An oversized bar overstates a button and the layout jumps when the real control mounts.
Do
Size the placeholder to the button's real height and width.

card

Don’t
A generic block that ignores the content's shape causes a jarring shift when it loads.
Do
Mirror the real layout (avatar circle, text lines) so the swap is seamless.

list

Don’t
One tall block hides the row rhythm, so the list reflows when each item appears.
Do
Repeat a per-row placeholder so the avatar-and-text rhythm matches the loaded list.

table

Don’t
A single rectangle gives no column structure; cells shift sideways once data lands.
Do
Lay placeholders out on the real column grid so each cell stays put when it fills in.
← Select
Slider →