Dialog

Dialog Primitive

Demo

A modal dialog that interrupts the user with important content and expects a response.

Installation

CLI

npx @react-native-reusables/cli@latest add dialog

Manual

Dependencies

Before copy/pasting, add the dialog primitive to your project.

Copy/paste the following code to ~/components/ui/dialog.tsx:

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '@rn-primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import * as React from 'react';
import { Button } from '~/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '~/components/ui/dialog';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Dialog>
        <DialogTrigger asChild>
          <Button variant='outline'>
            <Text>Edit Profile</Text>
          </Button>
        </DialogTrigger>
        <DialogContent className='sm:max-w-[425px]'>
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you're done.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button>
                <Text>OK</Text>
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
  );
}

Props

Dialog

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
open	boolean	(optional)
onOpenChange	(value: boolean) => void	(optional)
defaultOpen	boolean	(optional)

DialogTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

DialogOverlay

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined;	(optional)
closeOnPress	boolean	(optional)

DialogPortal

Prop	Type	Note
children*	React.ReactNode
forceMount	true | undefined	(optional)
hostName	string	Web Only (optional)
container	HTMLElement | null | undefined	Web Only (optional)

DialogContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	Native Only (optional)
insets	Insets	Native Only (optional)
avoidCollisions	boolean	Native Only (optional)
align	’start’ | ‘center’ | ‘end’	Native Only (optional)
side	’top’ | ‘bottom’	Native Only (optional)
sideOffset	number	Native Only (optional)
disablePositioningStyle	boolean	Native Only (optional)
onOpenAutoFocus	(ev: Event) => void	Web Only (optional)
onCloseAutoFocus	(ev: Event) => void	Web Only (optional)
onEscapeKeyDown	(ev: Event) => void	Web Only (optional)
onInteractOutside	(ev: Event) => void	Web Only (optional)
onPointerDownOutside	(ev: Event) => void	Web Only (optional)

DialogHeader

Extends View props

DialogTitle

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

DialogDescription

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

DialogFooter

Extends View props

DialogClose

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)