Dialog

Overview

Dialog component in React Native is designed to manage modal dialogs within your application. The component is split into three key parts: Dialog, which acts as the context provider; DialogTrigger, which handles the action to open the dialog; and DialogContent, which contains the actual content to be displayed in the dialog.

Preview

• Preview
• Code

Light mode

Dark mode

Light mode

Dark mode

<View className="flex gap-2">
  <Text className="font-semibold text-xl text-primary">Dialog</Text>
  <Dialog>
    <DialogTrigger>
      <Button label="Open Dialog" />
    </DialogTrigger>
    <DialogContent>
      <View className="flex gap-4">
        <Text className="font-semibold text-xl text-primary">Dialog Content</Text>
        <Text className="text-primary">
          Tap outside the dialog to close it.
        </Text>
      </View>
    </DialogContent>
  </Dialog>
</View>

Installation

• CLI
• Manual

npx nativecn-ui add Dialog 

npx nativecn-ui add Dialog 

1

First Step

Include Dialog.tsx in your project.

2

Second Step

Update the import paths to match your project setup.

Properties

Dialog

This component doesn’t accept any props directly but acts as a context provider for dialog visibility.

DialogTrigger

• children: The React element that will trigger the dialog to open. It should be a component that accepts an onPress prop, like a button.

DialogContent

• children: The content that will be displayed inside the dialog. This can be any React Node.

Usage

To use the Dialog component, wrap your entire dialog structure with Dialog. Then, use DialogTrigger to specify the element that will open the dialog, and DialogContent to define the content of the dialog.

<Dialog>
  <DialogTrigger>
    <Button label="Open Dialog" />
  </DialogTrigger>
  <DialogContent>
    <View className="flex gap-4">
      <Text className="font-semibold text-xl text-primary">Dialog Content</Text>
      <Text className="text-primary">
        Tap outside the dialog to close it.
      </Text>
    </View>
  </DialogContent>
</Dialog>