Dialog

import { View } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
 
import { Text } from '@/components/ui/Text';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/Dialog';
import { Button, ButtonText } from '@/components/ui/Button';
import { Text } from '@/components/ui/Text';
 
export function MyDialog() {
  const { styles } = useStyles(stylesheet);
 
  return (
    <Dialog>
      <DialogTrigger as={Button}>
        <ButtonText>Open Dialog</ButtonText>
      </DialogTrigger>
      <DialogPortal>
        <DialogOverlay />
        <DialogContent>
          <DialogTitle>Delete Content</DialogTitle>
          <DialogDescription style={styles.dialogDescription}>
            Are you sure to remove this content? You can access this file for 7
            days in your trash.
          </DialogDescription>
          <View style={styles.buttonGroup}>
            <DialogClose as={Button} color="neutral" variant="soft" fill>
              <ButtonText>Cancel</ButtonText>
            </DialogClose>
            <DialogClose as={Button} fill>
              <ButtonText>Confirm</ButtonText>
            </DialogClose>
          </View>
        </DialogContent>
      </DialogPortal>
    </Dialog>
  );
}
 
const stylesheet = createStyleSheet(theme => ({
  dialogDescription: {
    marginBottom: theme.space[20],
  },
  buttonGroup: {
    flexDirection: 'row',
    width: '100%',
    gap: theme.space[16],
    marginTop: theme.space[8],
  },
}))