native-matenative-mate

Dialog

Overlay

A modal dialog with title, description, and action buttons. Internally maps to the modal component with a centred card presentation.

GitHub

Installation

bash
1
npx native-mate add dialog

Examples

#FAFAFA
Radius100%

Usage

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Dialog } from '~/components/ui/dialog'
import { useState } from 'react'

const [open, setOpen] = useState(false)

<Dialog
  isOpen={open}
  onClose={() => setOpen(false)}
  title="Delete account"
  description="This action cannot be undone. All your data will be permanently removed."
>
  <Button variant="destructive" onPress={handleDelete}>Delete</Button>
  <Button variant="outline" onPress={() => setOpen(false)}>Cancel</Button>
</Dialog>

Props

PropTypeDefaultDescription
isOpenboolean—Controls dialog visibility.
onClose() => void—Called when the backdrop is tapped or the dialog is dismissed.
titlestring—Bold heading at the top of the dialog.
descriptionstring—Secondary text below the title.
childrenReact.ReactNode—Custom content rendered in the dialog body.

Example

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useState } from 'react'
import { Dialog } from '~/components/ui/dialog'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'

export function DialogExample() {
  const [open, setOpen] = useState(false)

  return (
    <View style={{ padding: 16 }}>
      <Button variant="destructive" onPress={() => setOpen(true)}>Delete account</Button>
      <Dialog
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Are you sure?"
        description="This will permanently delete your account and all associated data."
      >
        <View style={{ gap: 8, marginTop: 8 }}>
          <Button variant="destructive" onPress={() => setOpen(false)}>Yes, delete</Button>
          <Button variant="outline" onPress={() => setOpen(false)}>Cancel</Button>
        </View>
      </Dialog>
    </View>
  )
}
Next
Text