# Modal

> Organism — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add modal
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Modal } from 'orn-ui/modal';
```

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

## Variantes

### full

```tsx
<>
  <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

```tsx
<>
  <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

```tsx
<>
  <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

```tsx
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 | — |
