Toast — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add toast

Or install the whole package and import it

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

Depends on:core (theme + icons)transition

Usage

when to use — Confirming something that already happened, without interrupting. If a decision is needed, it is an Alert.
variant — `success`, `error`, `warning`, `info` — the same semantics as Badge and Alert.
onPress — Makes it tappable: usually to open what it is talking about. It also dismisses.
hideCloseButton — Hides the X. It still auto-dismisses on a timer.
showToast — Imperative, from outside the component tree — a service module, an interceptor. Needs a `ToastProvider` mounted once near the root. Returns the id for `hideToast(id)`.

Demo clip not recorded yet — see MEDIA.md

Variants

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>

Full demo source

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

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`title`	`string`	—	—
`message?`	`string`	—	—
`variant?`	`'success' \| 'error' \| 'warning' \| 'info'`	info	—
`onPress?`	`() => void`	—	Fires when the toast is tapped (on top of dismissing it).
`onDismiss?`	`() => void`	—	—
`hideCloseButton?`	`boolean`	—	Hides the close X. The toast still auto-dismisses on a timer.
`style?`	`StyleProp<ViewStyle>`	—	—