Spinner — componente React Native

Instalación

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

npx orn-ui add spinner

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Spinner } from 'orn-ui/spinner';

Depende de:core (theme + icons)

Uso

variant — `native` es el indicador del sistema y el default correcto. `dots` y `ring` se ven iguales en iOS y Android cuando eso importa.
fullscreen — `true` ocupa toda el área; en `false` queda un spinner inline dentro de una fila o una card.
text — Una línea corta debajo del indicador. Va cuando la espera es larga y conviene explicarla.
indicator — Un nodo propio, cuando la marca pide algo que las tres variantes no cubren.

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

Variantes

Default — a status message under the spinner

<Spinner text="Loading invoices..." fullscreen={false} />

Custom look — dots and ring, identical on iOS and Android

<VariantRow>
  <Spinner variant="dots" text="Fetching..." fullscreen={false} />
  <Spinner variant="ring" text="Syncing..." fullscreen={false} />
</VariantRow>

Sizes — small for inline use, large for a loading screen

<VariantRow>
  <Spinner variant="ring" size="small" fullscreen={false} />
  <Spinner variant="ring" size="large" fullscreen={false} />
</VariantRow>

Custom color — matches your brand accent

<VariantRow>
  <Spinner variant="dots" color="#00cae1" fullscreen={false} />
  <Spinner variant="ring" color="#ff3b30" fullscreen={false} />
</VariantRow>

Your own indicator — e.g. an avatar while a photo uploads

<Spinner
  fullscreen={false}
  text="Uploading..."
  indicator={
    <Avatar size={48} backgroundColor="#004cef20">
      <Icon name="plus" size={24} color="#004cef" />
    </Avatar>
  }
/>

No text — just the wait, next to a button or inline in a row

<View style={{ alignItems: 'center' }}>
  <Spinner variant="ring" fullscreen={false} />
</View>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'Default — a status message under the spinner',
    content: <Spinner text="Loading invoices..." fullscreen={false} />,
  },
  {
    label: 'Custom look — dots and ring, identical on iOS and Android',
    content: (
      <VariantRow>
        <Spinner variant="dots" text="Fetching..." fullscreen={false} />
        <Spinner variant="ring" text="Syncing..." fullscreen={false} />
      </VariantRow>
    ),
  },
  {
    label: 'Sizes — small for inline use, large for a loading screen',
    content: (
      <VariantRow>
        <Spinner variant="ring" size="small" fullscreen={false} />
        <Spinner variant="ring" size="large" fullscreen={false} />
      </VariantRow>
    ),
  },
  {
    label: 'Custom color — matches your brand accent',
    content: (
      <VariantRow>
        <Spinner variant="dots" color="#00cae1" fullscreen={false} />
        <Spinner variant="ring" color="#ff3b30" fullscreen={false} />
      </VariantRow>
    ),
  },
  {
    label: 'Your own indicator — e.g. an avatar while a photo uploads',
    content: (
      <Spinner
        fullscreen={false}
        text="Uploading..."
        indicator={
          <Avatar size={48} backgroundColor="#004cef20">
            <Icon name="plus" size={24} color="#004cef" />
          </Avatar>
        }
      />
    ),
  },
  {
    label: 'No text — just the wait, next to a button or inline in a row',
    content: (
      <View style={{ alignItems: 'center' }}>
        <Spinner variant="ring" fullscreen={false} />
      </View>
    ),
  },
];
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
`size?`	`'small' \| 'large'`	large	—
`color?`	`string`	—	—
`text?`	`string`	—	—
`fullscreen?`	`boolean`	true	En false, no ocupa flex:1 (útil inline, dentro de un botón/fila).
`variant?`	`'native' \| 'dots' \| 'ring'`	native	'native' usa el ActivityIndicator del sistema; 'dots' y 'ring' son indicadores propios, idénticos en iOS y Android.
`indicator?`	`ReactNode`	—	Indicador totalmente propio. Tiene precedencia sobre `variant`.