DialogUpdated

Import

import { Dialog } from 'heroui-native';

Anatomy

<Dialog>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay>...</Dialog.Overlay>
    <Dialog.Content>
      <Dialog.Close>...</Dialog.Close>
      <Dialog.Title>...</Dialog.Title>
      <Dialog.Description>...</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>

• Dialog: Root component that manages open state and provides context to child components.
• Dialog.Trigger: Pressable element that opens the dialog when pressed.
• Dialog.Portal: Renders dialog content in a portal with centered layout and animation control.
• Dialog.Overlay: Background overlay that appears behind the dialog content, typically closes dialog when pressed.
• Dialog.Content: Main dialog container with gesture support for drag-to-dismiss.
• Dialog.Close: Close button for the dialog. Can accept custom children or uses default close icon.
• Dialog.Title: Dialog title text with semantic heading role.
• Dialog.Description: Dialog description text that provides additional context.

Usage

Basic Dialog

Simple dialog with title, description, and close button.

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <Dialog.Trigger asChild>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Close />
      <Dialog.Title>...</Dialog.Title>
      <Dialog.Description>...</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>

Scrollable Content

Handle long content with scroll views.

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Close />
      <Dialog.Title>...</Dialog.Title>
      <View className="h-[300px]">
        <ScrollView>...</ScrollView>
      </View>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>

Form Dialog

Dialog with text inputs and keyboard handling.

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <KeyboardAvoidingView behavior="padding">
      <Dialog.Content>
        <Dialog.Close />
        <Dialog.Title>...</Dialog.Title>
        <TextField>...</TextField>
        <Button onPress={handleSubmit}>Submit</Button>
      </Dialog.Content>
    </KeyboardAvoidingView>
  </Dialog.Portal>
</Dialog>

Example

import { Button, Dialog } from 'heroui-native';
import { View } from 'react-native';
import { useState } from 'react';

export default function DialogExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
      <Dialog.Trigger asChild>
        <Button variant="primary">Open Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Close variant="ghost" />
          <View className="mb-5 gap-1.5">
            <Dialog.Title>Confirm Action</Dialog.Title>
            <Dialog.Description>
              Are you sure you want to proceed with this action? This cannot be
              undone.
            </Dialog.Description>
          </View>
          <View className="flex-row justify-end gap-3">
            <Button variant="ghost" size="sm" onPress={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button size="sm">Confirm</Button>
          </View>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  );
}

You can find more examples in the GitHub repository.

API Reference

Dialog

AnimationRootDisableAll

Animation configuration for dialog root component. Can be:

• false or "disabled": Disable only root animations
• "disable-all": Disable all animations including children
• true or undefined: Use default animations

Dialog.Trigger

Dialog.Portal

Dialog.Overlay

DialogOverlayAnimation

Animation configuration for dialog overlay component. Can be:

• false or "disabled": Disable all animations
• true or undefined: Use default animations
• object: Custom animation configuration

Dialog.Content

DialogContentAnimation

Animation configuration for dialog content component. Can be:

• false or "disabled": Disable all animations
• true or undefined: Use default animations
• object: Custom animation configuration

Dialog.Close

Dialog.Close extends CloseButton and automatically handles dialog dismissal when pressed.

Dialog.Title

Dialog.Description

Hooks

useDialog

Hook to access dialog primitive context.

const { isOpen, onOpenChange } = useDialog();

useDialogAnimation

Hook to access dialog animation context for advanced customization.

const { progress, isDragging, isGestureReleaseAnimationRunning } =
  useDialogAnimation();