rslabdocs

Skeleton

Wraps real content and measures it, so the shimmer placeholder matches its exact shape instead of a guessed width/height.

ReanimatedNativeWindSource

Prerequisites

Just Reanimated for the shimmer's pulse loop.


npx expo install react-native-reanimated

Install


npx @rslab/cli add skeleton

Usage


import { Skeleton } from '@/components/ui/Skeleton';



<Skeleton loading={isLoading}>

  <Text className="text-[15px] font-semibold">{user?.name ?? 'Rayan Selmi'}</Text>

</Skeleton>



<Skeleton loading={isLoading} className="rounded-full">

  <Image source={{ uri: user?.avatarUrl }} className="h-12 w-12 rounded-full" />

</Skeleton>

Pass placeholder content of a realistic size while loading (real data once it arrives, or text/an image sized like the real thing), the shimmer is sized off whatever's inside, not a fixed box.

Props

PropTypeDefault
loading
boolean
-

When true, shows the shimmer instead of the (still mounted, invisible) children.

children
ReactNode
-

Anything; its measured size drives the shimmer's size.

className?
string
-

Extend the shimmer's own classes, most commonly to change its corner radius to match what it's covering.

See exactly how this works with an RSLAB subscription.

Get Pro

Loading Dots

Three dots pulsing in a staggered loop, a typing-indicator style loading state.

Progress

A linear bar and a circular ring, both driven by the same 0-to-1 value with an animated fill.

On this page

PrerequisitesInstallUsagePropsHow it worksTuning