Dialog

A modal dialog component for displaying content in an overlay with customizable header, content, and footer sections.

Installation

Install the component:

npx natively-ui add dialog

Usage

DialogDemo.jsx

import { Dialog, AlertDialog } from '@/components/ui/dialog';

export default function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <Dialog 
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="Dialog Title"
      description="This is a dialog description."
    >
      <Text>Dialog content goes here</Text>
    </Dialog>
  );
}

Dialog Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls whether the dialog is visible.
onClose	() => void	-	Function called when the dialog should be closed.
title	string	-	Optional title displayed in the dialog header.
description	string	-	Optional description text displayed below the title.
children	React.ReactNode	-	Content to display in the dialog body.
footer	React.ReactNode	-	Custom footer content, typically action buttons.
className	string	""	Additional CSS classes for the dialog container.
contentClassName	string	""	Additional CSS classes for the dialog content area.
overlayClassName	string	""	Additional CSS classes for the dialog overlay.

AlertDialog Props

AlertDialog extends Dialog with additional props for common confirmation dialogs.

Prop	Type	Default	Description
cancelText	string	'Cancel'	Text for the cancel button.
confirmText	string	'OK'	Text for the confirm button.
onConfirm	() => void	-	Function called when the confirm button is pressed.
danger	boolean	false	Whether to style the confirm button as destructive.

Features

Modal overlay with backdrop tap to close
Responsive sizing with maximum width constraints
Optional header with title and description
Flexible content area for custom components
Customizable footer with action buttons
AlertDialog variant for common confirmation dialogs
Close button in header for better UX
Fade animation for smooth transitions
Customizable styling with className props
Built with React Native Modal and Expo Vector Icons

Examples

Basic Dialog

DialogDemo.jsx

const [isOpen, setIsOpen] = useState(false);

<View>
  <Button onPress={() => setIsOpen(true)}>
    Open Dialog
  </Button>
  
  <Dialog
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    title="Basic Dialog"
    description="This is a simple dialog with a title and description."
  >
    <Text>This is the dialog content area.</Text>
  </Dialog>
</View>

Custom Footer

DialogDemo.jsx

<Dialog
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Custom Actions"
  description="Dialog with custom footer buttons."
  footer={
    <>
      <Button 
        variant="ghost" 
        size="sm" 
        onPress={() => setIsOpen(false)}
        className="mr-2"
      >
        Cancel
      </Button>
      <Button 
        variant="default" 
        size="sm"
        onPress={handleSave}
        className="mr-2"
      >
        Save
      </Button>
      <Button 
        variant="destructive" 
        size="sm"
        onPress={handleDelete}
      >
        Delete
      </Button>
    </>
  }
>
  <Text>Are you sure you want to perform this action?</Text>
</Dialog>

AlertDialog

DialogDemo.jsx

const [showAlert, setShowAlert] = useState(false);

<View>
  <Button onPress={() => setShowAlert(true)}>
    Show Alert
  </Button>
  
  <AlertDialog
    isOpen={showAlert}
    onClose={() => setShowAlert(false)}
    title="Confirm Action"
    description="Are you sure you want to proceed? This action cannot be undone."
    onConfirm={() => {
      console.log('Action confirmed');
      // Perform action here
    }}
    confirmText="Yes, proceed"
    cancelText="Cancel"
  />
</View>

Destructive Alert

DialogDemo.jsx

<AlertDialog
  isOpen={showDeleteAlert}
  onClose={() => setShowDeleteAlert(false)}
  title="Delete Item"
  description="This will permanently delete the item. This action cannot be undone."
  onConfirm={handleDelete}
  confirmText="Delete"
  cancelText="Keep"
  danger={true}
/>

Form Dialog

DialogDemo.jsx

const [formData, setFormData] = useState({ name: '', email: '' });

<Dialog
  isOpen={isFormOpen}
  onClose={() => setIsFormOpen(false)}
  title="Add New User"
  description="Please fill in the user details below."
  contentClassName="space-y-4"
  footer={
    <>
      <Button 
        variant="ghost" 
        size="sm" 
        onPress={() => setIsFormOpen(false)}
        className="mr-2"
      >
        Cancel
      </Button>
      <Button 
        variant="default" 
        size="sm"
        onPress={handleSubmit}
      >
        Add User
      </Button>
    </>
  }
>
  <View className="space-y-4">
    <TextInput
      placeholder="Full Name"
      value={formData.name}
      onChangeText={(text) => setFormData({...formData, name: text})}
      className="border border-gray-300 rounded p-3"
    />
    <TextInput
      placeholder="Email Address"
      value={formData.email}
      onChangeText={(text) => setFormData({...formData, email: text})}
      className="border border-gray-300 rounded p-3"
    />
  </View>
</Dialog>

Custom Styling

DialogDemo.jsx

<Dialog
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Custom Styled Dialog"
  className="border-2 border-blue-500"
  contentClassName="bg-blue-50"
  overlayClassName="bg-blue-900/30"
>
  <Text className="text-blue-800">
    This dialog has custom styling applied.
  </Text>
</Dialog>

Overview

Getting Started

Components

Dialog

Installation

Usage

Dialog Props

AlertDialog Props

Features

Examples

Basic Dialog

Custom Footer

AlertDialog

Destructive Alert

Form Dialog

Custom Styling