REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Data Display

Skeleton

An animated placeholder that mimics the shape of content while it loads.

Example

Preview

Code

Props

Skeleton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the skeleton.

variant

'text' | 'circular' | 'rectangular'

'rectangular'

Shape variant of the skeleton.

Usage Guidelines

When to use

Use Skeleton as a loading placeholder to improve perceived performance while content is being fetched.

Best practices

•

Match skeleton shapes to the actual content layout.

•

Use multiple skeletons together to create realistic loading states.

Accessibility

Skeleton is decorative and hidden from screen readers. Use aria-busy on parent containers to indicate loading.

Related Components

Spinner

An animated loading indicator to communicate that an operation is in progress.

Progress

A compound progress bar component that visually indicates the completion percentage of an operation.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License