Skeleton — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add skeleton

Or install the whole package and import it

pnpm add orn-ui
import { Skeleton } from 'orn-ui/skeleton';

Depends on:core (theme + icons)

Usage

when to use — A placeholder that reserves the exact space of content still loading. For a spinner without that shape, Spinner.
variant — `rect` (default), `text` (line height, respects `lines`), `circle` (for an avatar).
lines / lastLineWidth — Only for `variant="text"`: a stacked paragraph whose last line is shorter, so it doesn't read as a solid block.
animated — Set it to false to respect reduced motion or to save cycles in a long list.

Demo clip not recorded yet — see MEDIA.md

Variants

rect (default)

<Skeleton height={20} />

variant="text" — 3-line paragraph

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

variant="circle" — avatars

<VariantRow>
  <Skeleton variant="circle" width={32} />
  <Skeleton variant="circle" width={48} />
  <Skeleton variant="circle" width={64} />
</VariantRow>

animated={false} — no pulse

<Skeleton height={20} animated={false} />

Full demo source

const variants: VariantDef[] = [
  {
    label: 'rect (default)',
    content: <Skeleton height={20} />,
  },
  {
    label: 'variant="text" — 3-line paragraph',
    content: <Skeleton variant="text" lines={3} />,
  },
  {
    label: 'variant="circle" — avatars',
    content: (
      <VariantRow>
        <Skeleton variant="circle" width={32} />
        <Skeleton variant="circle" width={48} />
        <Skeleton variant="circle" width={64} />
      </VariantRow>
    ),
  },
  {
    label: 'animated={false} — no pulse',
    content: <Skeleton height={20} animated={false} />,
  },
  {
    label: 'reserves the exact space: toggles every 2s',
    content: <LoadingCard />,
  },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`width?`	`DimensionValue`	100%	—
`height?`	`DimensionValue`	16	—
`variant?`	`'rect' \| 'text' \| 'circle'`	rect	—
`radius?`	`number`	—	Override for the theme's radius.
`lines?`	`number`	1	Stacked lines, only for `variant="text"`.
`lastLineWidth?`	`DimensionValue`	60%	Width of the last line, so the paragraph doesn't end in a solid block.
`animated?`	`boolean`	true	—
`style?`	`StyleProp<ViewStyle>`	—	—