Alert — componente React Native

Instalación

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

npx orn-ui add alert

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)button

Uso

cuándo usarlo — Interrumpir para confirmar o informar algo que no puede esperar. Para el resto alcanza un Toast.
type — `question` para confirmaciones; `success`, `error`, `warning` e `info` para informar.
buttons — Más allá de confirmar/cancelar: una lista con etiquetas y handlers propios.
inline — Lo renderiza dentro del layout en vez de sobre la pantalla — para documentación y demos.
showAlert / showConfirm — Imperativo, desde afuera del árbol de componentes — un módulo de negocio, un interceptor. Necesita un `AlertProvider` montado una vez cerca de la raíz. `showConfirm` resuelve `true`/`false`.

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

Variantes

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) },
    ]}
  />
</>

Código completo del demo

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

Nombre	Tipo	Por defecto	Descripción
`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	—