Modal — React Native component

Installation

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

npx orn-ui add modal

Or install the whole package and import it

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

Depends on:core (theme + icons)Typography icon-button pressable-scale transition

Usage

variant — `full` and `fullScreen` for a whole task; `overlay` for a short confirmation; `bottomSheet` for actions on the current context.
onClose — Also fires on the backdrop and the header X — keep it idempotent.
footer — Where FormActions goes: it stays fixed while the content scrolls.
scrollable — On by default. Turn it off when the content brings its own list.

Demo clip not recorded yet — see MEDIA.md

Variants

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>
</>

Full demo source

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

Name	Type	Default	Description
`visible`	`boolean`	—	—
`onClose?`	`() => void`	—	—
`title?`	`string`	—	—
`closeAccessibilityLabel?`	`string`	Close	—
`footer?`	`ReactNode`	—	—
`containerStyle?`	`ViewStyle`	—	—
`contentStyle?`	`ViewStyle`	—	—
`variant?`	`'full' \| 'overlay' \| 'fullScreen'`	full	—
`scrollable?`	`boolean`	true	—