Toast — componente React Native

Instalación

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

npx orn-ui add toast

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Toast } from 'orn-ui/toast';

Depende de:core (theme + icons)transition

Uso

cuándo usarlo — Confirmar algo que ya pasó, sin interrumpir. Si hace falta una decisión, es un Alert.
variant — `success`, `error`, `warning`, `info` — la misma semántica que Badge y Alert.
onPress — Lo hace tocable: normalmente para abrir aquello de lo que habla. También lo cierra.
hideCloseButton — Oculta la X. Igual se auto-descarta por tiempo.
showToast — Imperativo, desde afuera del árbol de componentes — un módulo de negocio, un interceptor. Necesita un `ToastProvider` montado una vez cerca de la raíz. Devuelve el id para `hideToast(id)`.

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

Variantes

Static (placed by hand, no provider)

<View style={{ gap: 8 }}>
  <Toast title="Invoice sent" message="Sent to acme@studio.com" variant="success" />
  <Toast title="Payment failed" variant="error" onDismiss={() => {}} />
</View>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'Imperative — useToast().show()',
    content: (
      <View style={{ gap: 8 }}>
        <Button title="Success" onPress={() => show({ title: 'Invoice sent', variant: 'success' })} />
        <Button
          title="Error"
          variant="outline"
          onPress={() => show({ title: 'Payment failed', message: 'Try another card.', variant: 'error' })}
        />
        <Button
          title="Warning"
          variant="outline"
          onPress={() => show({ title: 'Unsaved changes', variant: 'warning' })}
        />
        <Button title="Info" variant="outline" onPress={() => show({ title: 'Syncing…', variant: 'info' })} />
      </View>
    ),
  },
  {
    label: 'From business logic — showToast()/showConfirm(), no hook',
    content: (
      <View style={{ gap: 8 }}>
        <Body>Both buttons call a plain async function that imports showToast/showConfirm/showAlert.</Body>
        <Button title="Delete invoice #4821" variant="outline" onPress={() => deleteInvoice('4821')} />
        <Button title="Sync (fails)" variant="outline" onPress={() => syncInvoices()} />
      </View>
    ),
  },
  {
    label: 'Options: duration, tappable, stacking',
    content: (
      <View style={{ gap: 8 }}>
        <Button
          title="Stays until dismissed"
          variant="outline"
          onPress={() => show({ title: 'Sticky toast', message: 'duration: 0', duration: 0 })}
        />
        <Button
          title="Tappable"
          variant="outline"
          onPress={() => show({ title: 'Tap me', message: 'Runs onPress and closes', onPress: () => {} })}
        />
        <Button
          title="Fire three at once"
          variant="outline"
          onPress={() => {
            show({ title: 'First', variant: 'info' });
            show({ title: 'Second', variant: 'success' });
            show({ title: 'Third', variant: 'warning' });
          }}
        />
        <Button title="Dismiss all" variant="ghost" onPress={hideAll} />
      </View>
    ),
  },
  {
    label: 'Static (placed by hand, no provider)',
    content: (
      <View style={{ gap: 8 }}>
        <Toast title="Invoice sent" message="Sent to acme@studio.com" variant="success" />
        <Toast title="Payment failed" variant="error" onDismiss={() => {}} />
      </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
`title`	`string`	—	—
`message?`	`string`	—	—
`variant?`	`'success' \| 'error' \| 'warning' \| 'info'`	info	—
`onPress?`	`() => void`	—	Se dispara al tocar el toast (además de cerrarlo).
`onDismiss?`	`() => void`	—	—
`hideCloseButton?`	`boolean`	—	Esconde la X de cerrar. El toast sigue auto-cerrándose por timeout.
`style?`	`StyleProp<ViewStyle>`	—	—