Dialog

Displays a modal overlay with animated transitions and gesture-based dismissal.

Imports

Note: Before importing this component, ensure you have completed the setup as per the Quick Start guide.

import { Dialog, useDialog } from 'heroui-native';

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>

Custom Animations

Configure open and close animations with spring or timing.

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Portal
    progressAnimationConfigs={{
      onOpen: {
        animationType: 'spring',
        animationConfig: { damping: 130, stiffness: 1100 },
      },
      onClose: {
        animationType: 'timing',
        animationConfig: { duration: 200 },
      },
    }}
  >
    <Dialog.Overlay />
    <Dialog.Content>...</Dialog.Content>
  </Dialog.Portal>
</Dialog>

Custom Backdrop

Replace the default overlay with custom content.

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="bg-transparent">
      <BlurView style={StyleSheet.absoluteFill} />
    </Dialog.Overlay>
    <Dialog.Content>...</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 />
          <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">
            <Dialog.Close asChild>
              <Button variant="ghost" size="sm">
                Cancel
              </Button>
            </Dialog.Close>
            <Button size="sm">Confirm</Button>
          </View>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  );
}

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 that dismisses the dialog when pressed.
• Dialog.Title: Dialog title text with semantic heading role.
• Dialog.Description: Dialog description text that provides additional context.

API Reference

Dialog

Dialog.Trigger

Dialog.Portal

DialogProgressAnimationConfigs

Dialog.Overlay

Dialog.Content

Dialog.Close

DialogCloseIconProps

Dialog.Title

Dialog.Description

useDialog

Hook to access dialog context for advanced customization.

const { progress, isDragging, dialogState, onOpenChange } = useDialog();