Modal — componente React Native

Instalación

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

npx orn-ui add modal

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Modal } from 'orn-ui/modal';

Depende de:core (theme + icons)Typography icon-button pressable-scale transition

Uso

variant — `full` y `fullScreen` para una tarea completa; `overlay` para una confirmación corta; `bottomSheet` para acciones sobre el contexto actual.
onClose — También se dispara con el fondo y con la X de la cabecera — conviene que sea idempotente.
footer — Donde va FormActions: queda fijo mientras el contenido scrollea.
scrollable — Activo por defecto. Se apaga cuando el contenido ya trae su propia lista.

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

Variantes

full

<>
  <Button title="Open full" onPress={() => setFull(true)} />
  <Modal visible={full} onClose={() => setFull(false)} title="Full">
    <Body>Slides up from the bottom and fills the screen.</Body>
  </Modal>
</>

overlay

<>
  <Button title="Open overlay" onPress={() => setOverlay(true)} />
  <Modal visible={overlay} onClose={() => setOverlay(false)} title="Overlay" variant="overlay">
    <Body>A centered card over a dimmed backdrop.</Body>
  </Modal>
</>

fullScreen

<>
  <Button title="Open fullScreen" onPress={() => setFullScreen(true)} />
  <Modal visible={fullScreen} onClose={() => setFullScreen(false)} title="Full screen" variant="fullScreen">
    <Body>Native fullScreen presentation on iOS.</Body>
  </Modal>
</>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'full',
    content: (
      <>
        <Button title="Open full" onPress={() => setFull(true)} />
        <Modal visible={full} onClose={() => setFull(false)} title="Full">
          <Body>Slides up from the bottom and fills the screen.</Body>
        </Modal>
      </>
    ),
  },
  {
    label: 'overlay',
    content: (
      <>
        <Button title="Open overlay" onPress={() => setOverlay(true)} />
        <Modal visible={overlay} onClose={() => setOverlay(false)} title="Overlay" variant="overlay">
          <Body>A centered card over a dimmed backdrop.</Body>
        </Modal>
      </>
    ),
  },
  {
    label: 'fullScreen',
    content: (
      <>
        <Button title="Open fullScreen" onPress={() => setFullScreen(true)} />
        <Modal visible={fullScreen} onClose={() => setFullScreen(false)} title="Full screen" variant="fullScreen">
          <Body>Native fullScreen presentation on iOS.</Body>
        </Modal>
      </>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Nombre	Tipo	Por defecto	Descripción
`visible`	`boolean`	—	—
`onClose?`	`() => void`	—	—
`title?`	`string`	—	—
`closeAccessibilityLabel?`	`string`	Close	—
`footer?`	`ReactNode`	—	—
`containerStyle?`	`ViewStyle`	—	—
`contentStyle?`	`ViewStyle`	—	—
`variant?`	`'full' \| 'overlay' \| 'fullScreen'`	full	—
`scrollable?`	`boolean`	true	—