Alert — React Native component

Installation

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

npx orn-ui add alert

Or install the whole package and import it

pnpm add orn-ui
import { Alert } from 'orn-ui/alert';

Depends on:core (theme + icons)button

Usage

when to use — Interrupting to confirm or report something that cannot wait. A Toast is enough for the rest.
type — `question` for confirmations; `success`, `error`, `warning` and `info` to report.
buttons — Beyond confirm/cancel: a list with its own labels and handlers.
inline — Renders it inside the layout instead of over the screen — for docs and demos.
showAlert / showConfirm — Imperative, from outside the component tree — a service module, an interceptor. Needs an `AlertProvider` mounted once near the root. `showConfirm` resolves `true`/`false`.

Demo clip not recorded yet — see MEDIA.md

Variants

success

<>
  <Button title="Show success" variant="outline" onPress={() => setVisible('success')} />
  <OrnAlert visible={visible === 'success'} title="Invoice sent" type="success" onClose={() => setVisible(null)} />
</>

error

<>
  <Button title="Show error" variant="outline" onPress={() => setVisible('error')} />
  <OrnAlert visible={visible === 'error'} title="Payment failed" message="Please try another card." type="error" onClose={() => setVisible(null)} />
</>

warning

<>
  <Button title="Show warning" variant="outline" onPress={() => setVisible('warning')} />
  <OrnAlert visible={visible === 'warning'} title="Unsaved changes" message="You'll lose your edits." type="warning" onClose={() => setVisible(null)} />
</>

question (confirm)

<>
  <Button title="Delete invoice" variant="destructive" onPress={() => setVisible('question')} />
  <OrnAlert
    visible={visible === 'question'}
    title="Delete invoice?"
    message="This cannot be undone."
    type="question"
    confirmText="Delete"
    cancelText="Cancel"
    onConfirm={() => setVisible(null)}
    onCancel={() => setVisible(null)}
  />
</>

showConfirm() — from outside the component, no hook

<Button title="Delete invoice (imperative)" variant="destructive" onPress={() => deleteInvoice('4821')} />

custom buttons

<>
  <Button title="Show custom buttons" variant="outline" onPress={() => setVisible('custom')} />
  <OrnAlert
    visible={visible === 'custom'}
    title="Export invoice"
    type="info"
    buttons={[
      { text: 'PDF', onPress: () => setVisible(null) },
      { text: 'CSV', onPress: () => setVisible(null) },
      { text: 'Cancel', style: 'cancel', variant: 'outline', onPress: () => setVisible(null) },
    ]}
  />
</>

Full demo source

const variants: VariantDef[] = [
  {
    label: 'success',
    content: (
      <>
        <Button title="Show success" variant="outline" onPress={() => setVisible('success')} />
        <OrnAlert visible={visible === 'success'} title="Invoice sent" type="success" onClose={() => setVisible(null)} />
      </>
    ),
  },
  {
    label: 'error',
    content: (
      <>
        <Button title="Show error" variant="outline" onPress={() => setVisible('error')} />
        <OrnAlert visible={visible === 'error'} title="Payment failed" message="Please try another card." type="error" onClose={() => setVisible(null)} />
      </>
    ),
  },
  {
    label: 'warning',
    content: (
      <>
        <Button title="Show warning" variant="outline" onPress={() => setVisible('warning')} />
        <OrnAlert visible={visible === 'warning'} title="Unsaved changes" message="You'll lose your edits." type="warning" onClose={() => setVisible(null)} />
      </>
    ),
  },
  {
    label: 'question (confirm)',
    content: (
      <>
        <Button title="Delete invoice" variant="destructive" onPress={() => setVisible('question')} />
        <OrnAlert
          visible={visible === 'question'}
          title="Delete invoice?"
          message="This cannot be undone."
          type="question"
          confirmText="Delete"
          cancelText="Cancel"
          onConfirm={() => setVisible(null)}
          onCancel={() => setVisible(null)}
        />
      </>
    ),
  },
  {
    label: 'showConfirm() — from outside the component, no hook',
    content: <Button title="Delete invoice (imperative)" variant="destructive" onPress={() => deleteInvoice('4821')} />,
  },
  {
    label: 'custom buttons',
    content: (
      <>
        <Button title="Show custom buttons" variant="outline" onPress={() => setVisible('custom')} />
        <OrnAlert
          visible={visible === 'custom'}
          title="Export invoice"
          type="info"
          buttons={[
            { text: 'PDF', onPress: () => setVisible(null) },
            { text: 'CSV', onPress: () => setVisible(null) },
            { text: 'Cancel', style: 'cancel', variant: 'outline', onPress: () => setVisible(null) },
          ]}
        />
      </>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`visible`	`boolean`	—	—
`title`	`string`	—	—
`message?`	`string`	—	—
`type?`	`'success' \| 'error' \| 'warning' \| 'info' \| 'question'`	info	—
`onClose?`	`() => void`	—	—
`buttons?`	`AlertButton[]`	—	—
`confirmText?`	`string`	—	—
`cancelText?`	`string`	—	—
`onConfirm?`	`() => void`	—	—
`onCancel?`	`() => void`	—	—
`inline?`	`boolean`	false	—