Dialog

import { Dialog } from 'reactnatively';

1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { Dialog, Button } from 'reactnatively';45export function DeleteConfirm({ itemName, onDelete }) {6  const [open, setOpen] = useState(false);78  async function handleDelete() {9    setOpen(false);10    await onDelete();11  }1213  return (14    <View>15      <Button variant="outline" color="error" onPress={() => setOpen(true)}>16        Delete item17      </Button>18      <Dialog19        isOpen={open}20        onClose={() => setOpen(false)}21        title="Delete item?"22        description={`"${itemName}" will be permanently removed. This action cannot be undone.`}23        glass24        actions={[25          { label: 'Cancel', onPress: () => setOpen(false), variant: 'ghost' },26          { label: 'Delete', onPress: handleDelete, color: 'error', isDestructive: true },27        ]}28      />29    </View>30  );31}

1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { Dialog, TextInput, Button, Text } from 'reactnatively';45export function RenameDialog({ isOpen, currentName, onClose, onRename }) {6  const [name, setName] = useState(currentName);78  return (9    <Dialog10      isOpen={isOpen}11      onClose={onClose}12      title="Rename file"13      glass14      size="sm"15    >16      <View style={styles.body}>17        <Text variant="sm" color="rgba(255,255,255,0.5)" style={{ marginBottom: 12 }}>18          Enter a new name for the file.19        </Text>20        <TextInput21          label="File name"22          value={name}23          onChangeText={setName}24          autoFocus25          clearable26        />27        <View style={styles.footer}>28          <Button variant="ghost" flex={1} onPress={onClose}>Cancel</Button>29          <Button30            variant="solid"31            color="primary"32            flex={1}33            onPress={() => { onRename(name); onClose(); }}34            disabled={!name.trim()}35          >36            Rename37          </Button>38        </View>39      </View>40    </Dialog>41  );42}4344const styles = StyleSheet.create({45  body: { paddingHorizontal: 4 },46  footer: { flexDirection: 'row', gap: 12, marginTop: 20 },47});