import React, { useState } from ‘react’;
import { View, Text, Image, TouchableOpacity, StyleSheet, Dimensions, Modal } from ‘react-native’;
import { Counter } from ‘react-native-paper’;

const { width, height } = Dimensions.get(‘window’);

const stylesOfProductsPage = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5F5DC’,
},
modalContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
modalContent: {
width: width * 0.8,
height: height * 0.6,
backgroundColor: ‘#F5DEB3’,
borderRadius: width * 0.06,
alignItems: ‘center’,
justifyContent: ‘space-evenly’,
paddingHorizontal: width * 0.03,
paddingBottom: height * 0.1,
},
modalImage: {
width: width * 0.7,
height: height * 0.3,
resizeMode: ‘cover’,
borderRadius: width * 0.02,
},
modalTitle: {
fontSize: width * 0.07,
fontWeight: ‘bold’,
color: ‘#FFB347’,
},
modalPrice: {
fontSize: width * 0.06,
fontWeight: ‘bold’,
color: ‘#FFB347’,
},
actionsContainer: {
flexDirection: ‘row’,
justifyContent: ‘space-between’,
width: ‘100%’,
},
button: {
backgroundColor: ‘#FFB347’,
borderRadius: width * 0.04,
paddingHorizontal: width * 0.04,
paddingVertical: height * 0.01,
marginTop: height * 0.01,
},
buttonText: {
fontSize: width * 0.05,
fontWeight: ‘bold’,
color: ‘#FFF’,
},
});

const ProductsPage = ({ navigation, route }) => {
const { imageSource, title, price } = route.params;

const [modalVisible, setModalVisible] = useState(true);
const [count, setCount] = useState(1);

const handleCancel = () => {
setModalVisible(false);
navigation.goBack();
};

const handleAddToCart = () => {
// Add to cart functionality
setModalVisible(false);
navigation.goBack();
};

return (
<View style={stylesOfProductsPage.container}>
<Modal visible={modalVisible} transparent animationType=“slide”>
<View style={stylesOfProductsPage.modalContainer}>
<View style={stylesOfProductsPage.modalContent}>
<Image source={imageSource} style={stylesOfProductsPage.modalImage} />
<Text style={stylesOfProductsPage.modalTitle}>{title}</Text>
<Text style={stylesOfProductsPage.modalPrice}>{price}</Text>
<Counter
start={1}
min={1}
max={99}
onChange={setCount}
style={{ alignSelf: ‘center’ }}
/>
<View style={stylesOfProductsPage.actionsContainer}>
<TouchableOpacity style={stylesOfProductsPage.button} onPress={handleCancel}>
<Text style={stylesOfProductsPage.buttonText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesOfProductsPage.button} onPress={handleAddToCart}>
<Text style={stylesOfProductsPage.buttonText}>Add to Cart</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
};

export default ProductsPage;
please keep the productsstyle. do not use navigation. make sure to make further efforts to fulfill the requirements. for now it is more about the design. functionality will be taken in consideration in a later step
import React, { useState } from ‘react’;
import { View, Text, Image, TouchableOpacity, StyleSheet, Dimensions, Modal } from ‘react-native’;
import { Counter } from ‘react-native-paper’;

const { width, height } = Dimensions.get(‘window’);

const stylesOfProductsPage = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5F5DC’,
},
modalContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
modalContent: {
width: width * 0.8,
height: height * 0.6,
backgroundColor: ‘#F5DEB3’,
borderRadius: width * 0.06,
alignItems: ‘center’,
justifyContent: ‘space-evenly’,
paddingHorizontal: width * 0.03,
paddingBottom: height * 0.1,
},
modalImage: {
width: width * 0.7,
height: height * 0.3,
resizeMode: ‘cover’,
borderRadius: width * 0.02,
},
modalTitle: {
fontSize: width * 0.07,
fontWeight: ‘bold’,
color: ‘#FFB347’,
marginBottom: height * 0.02,
textAlign: ‘center’,
textShadowColor: ‘#000’,
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 5,
},
modalPrice: {
fontSize: width * 0.06,
fontWeight: ‘bold’,
color: ‘#FFB347’,
marginBottom: height * 0.02,
textAlign: ‘center’,
textShadowColor: ‘#000’,
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 5,
},
actionsContainer: {
flexDirection: ‘row’,
justifyContent: ‘space-between’,
width: ‘100%’,
},
button: {
backgroundColor: ‘#FFB347’,
borderRadius: width * 0.04,
paddingHorizontal: width * 0.04,
paddingVertical: height * 0.01,
marginTop: height * 0.01,
},
buttonText: {
fontSize: width * 0.05,
fontWeight: ‘bold’,
color: ‘#FFF’,
},
});

const ProductsPage = ({ product }) => {
const { imageSource, title, price } = product;

const [modalVisible, setModalVisible] = useState(true);
const [count, setCount] = useState(1);

const handleCancel = () => {
setModalVisible(false);
};

const handleAddToCart = () => {
// Add to cart functionality
setModalVisible(false);
};

return (
<View style={stylesOfProductsPage.container}>
<Modal visible={modalVisible} transparent animationType=“slide”>
<View style={stylesOfProductsPage.modalContainer}>
<View style={stylesOfProductsPage.modalContent}>
<Image source={imageSource} style={stylesOfProductsPage.modalImage} />
<Text style={stylesOfProductsPage.modalTitle}>{title}</Text>
<Text style={stylesOfProductsPage.modalPrice}>{price}</Text>
<Counter
start={1}
min={1}
max={99}
onChange={setCount}
style={{ alignSelf: ‘center’ }}
/>
<View style={stylesOfProductsPage.actionsContainer}>
<TouchableOpacity style={stylesOfProductsPage.button} onPress={handleCancel}>
<Text style={stylesOfProductsPage.buttonText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesOfProductsPage.button} onPress={handleAddToCart}>
<Text style={stylesOfProductsPage.buttonText}>Add to Cart</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
};

export default ProductsPage;