Something went wrong. Try again.
Utilities and UI components for cross-platform React Native apps
Something went wrong. Try again.
1.3 kB · 53 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354// Copyright (c) 2025 Joseph Hale//// This Source Code Form is subject to the terms of the Mozilla Public// License, v. 2.0. If a copy of the MPL was not distributed with this// file, You can obtain one at https://mozilla.org/MPL/2.0/.
import Card, { type CardProps } from './Card';import { Modal, Pressable, StyleSheet, View } from 'react-native';
import { useMaterialTheme } from '../theme/material/useMaterialTheme';
export interface DialogProps extends CardProps { visible: boolean; onDismiss: () => void;}
export default function Dialog(props: DialogProps) { const { theme } = useMaterialTheme(); return ( <Modal visible={props.visible} animationType="fade" transparent={true} onRequestClose={props.onDismiss} > <Pressable style={[styles.centered, { backgroundColor: theme.colors.backdrop }]} onPress={props.onDismiss} > <View style={[styles.centered, styles.container]}> <Card {...props} /> </View> </Pressable> </Modal> );}
Dialog.Actions = Card.Actions;
const styles = StyleSheet.create({ centered: { flex: 1, justifyContent: 'center', alignItems: 'center', }, background: { backgroundColor: 'rgba(0, 0, 0, 0.25)', }, container: { width: '80%', height: 'auto', },});