Skeleton

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/skeleton.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/skeleton.

Usage

import { Skeleton } from "@/components/goodui-native/skeleton/skeleton";

export function Inbox({ messages }: { messages?: Message[] }) {
  return (
    <Skeleton.Swap
      loading={!messages}
      loadedAnnouncement={messages ? `${messages.length} messages` : undefined}
      skeleton={
        <>
          <Skeleton.ListRow trailing />
          <Skeleton.ListRow trailing />
          <Skeleton.ListRow trailing />
        </>
      }
    >
      {messages?.map((m) => <MessageRow key={m.id} message={m} />)}
    </Skeleton.Swap>
  );
}

When to use

Examples

<Skeleton.Circle size={48} />
<Skeleton.Line size="title2" width="50%" />
<Skeleton.Line size="subhead" lines={3} />
<Skeleton width={120} height={44} radius={14} />

<Skeleton.Profile />
<Skeleton.Card mediaHeight={180} />
<Skeleton.ListRow avatar="square" lines={3} />

<Skeleton.ListRow animation="pulse" />
<Skeleton.Card animation="none" />

API reference

Motion and haptics

• •One clock drives every skeleton on screen: the shimmer is a single light that crosses the whole layout diagonally, then pauses.
• •Skeleton.Swap fades the placeholder out on top, the content rises 6 pt into place on the smooth spring, and the box eases between the two heights.
• •Reduced motion: the shimmer becomes a slow opacity pulse, the content only fades in and the height changes at once.

• •Haptic: None. Loading is not a commit.

• •The shared clock runs on the UI thread only while at least one animated skeleton is mounted.
• •Each placeholder measures its window position once per layout change, not per frame.
• •Use a handful of rows that fill the screen, not a full page of them.

Accessibility

• •Placeholders are hidden from screen readers.
• •Skeleton.Swap is one element labelled loadingLabel (default 'Loading') with accessibilityState busy while loading.
• •Pass loadedAnnouncement to announce the result when loading ends.
• •Skeleton.Line takes the line height of the text size it stands in for, so the layout matches at every size.
• •On the web Skeleton.Swap is a busy progressbar named loadingLabel while loading.

Notes for AI

Related