Skeleton — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add skeleton

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Un placeholder que reserva el espacio exacto de un contenido que todavía carga. Para un spinner sin esa forma, Spinner.
variant — `rect` (default), `text` (alto de línea, respeta `lines`), `circle` (para un avatar).
lines / lastLineWidth — Sólo para `variant="text"`: un párrafo apilado cuya última línea es más corta, para que no se lea como un bloque sólido.
animated — Ponlo en false para respetar reduced motion o ahorrar ciclos en una lista larga.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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} />

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

Nombre	Tipo	Por defecto	Descripción
`width?`	`DimensionValue`	100%	—
`height?`	`DimensionValue`	16	—
`variant?`	`'rect' \| 'text' \| 'circle'`	rect	—
`radius?`	`number`	—	Override del radio del theme.
`lines?`	`number`	1	Líneas apiladas, solo para variant="text".
`lastLineWidth?`	`DimensionValue`	60%	Ancho de la última línea, para que el párrafo no termine en bloque sólido.
`animated?`	`boolean`	true	—
`style?`	`StyleProp<ViewStyle>`	—	—