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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import React from 'react';
import { View, Text, Button, Modal, StyleSheet } from 'react-native';
const ProductModal = ({ visible, product, onClose, onAddToCart }) => (
<Modal visible={visible} transparent animationType="slide">
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<Text style={styles.productName}>{product.name}</Text>
<Text style={styles.productDescription}>{product.description}</Text>
<Text style={styles.productPrice}>Price: ${product.price}</Text>
<View style={styles.buttonContainer}>
<Button title="Add to Cart" onPress={onAddToCart} />
<Button title="Cancel" onPress={onClose} />
</View>
</View>
</View>
</Modal>
);
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalContent: {
width: 300,
padding: 20,
backgroundColor: 'white',
borderRadius: 8,
alignItems: 'center',
},
productName: { fontSize: 20, fontWeight: 'bold' },
productDescription: { fontSize: 16, marginVertical: 10 },
productPrice: { fontSize: 18, color: '#333' },
buttonContainer: { flexDirection: 'row', marginTop: 15 },
});
export default ProductModal;
|
