# Skeleton

> Atom — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add skeleton
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Skeleton } from 'orn-ui/skeleton';
```

Depende de: core (theme + icons)

## Variantes

### rect (default)

```tsx
<Skeleton height={20} />
```

### variant="text" — 3-line paragraph

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

### variant="circle" — avatars

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

### animated={false} — no pulse

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

## Código completo del demo

```tsx
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

| 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>` | — | — |