diff options
| -rw-r--r-- | src/screens/ProductScannerScreen.js | 62 |
1 files changed, 55 insertions, 7 deletions
diff --git a/src/screens/ProductScannerScreen.js b/src/screens/ProductScannerScreen.js index 35926e1..7cead47 100644 --- a/src/screens/ProductScannerScreen.js +++ b/src/screens/ProductScannerScreen.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text, Button, StyleSheet, Alert } from 'react-native'; import BarcodeScanner from '../components/BarcodeScanner'; const ProductScannerScreen = ({ navigation }) => { @@ -8,17 +8,21 @@ const ProductScannerScreen = ({ navigation }) => { const handleScan = (product) => setScannedProduct(product); const handleAddToCart = () => { - // Add product to cart and navigate to cart screen navigation.navigate('Cart'); }; return ( - <View> - <BarcodeScanner onScan={handleScan} /> + <View style={styles.container}> + <Text style={styles.title}>Scan a Product</Text> + + <View style={styles.scannerContainer}> + <BarcodeScanner onScan={handleScan} /> + </View> + {scannedProduct && ( - <View> - <Text>{scannedProduct.name}</Text> - <Text>{scannedProduct.price}</Text> + <View style={styles.productDetails}> + <Text style={styles.productName}>{scannedProduct.name}</Text> + <Text style={styles.productPrice}>${scannedProduct.price}</Text> <Button title="Add to Cart" onPress={handleAddToCart} /> </View> )} @@ -26,4 +30,48 @@ const ProductScannerScreen = ({ navigation }) => { ); }; +const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 16, + backgroundColor: '#f8f8f8', + }, + title: { + fontSize: 24, + fontWeight: 'bold', + marginBottom: 20, + textAlign: 'center', + color: '#333', + }, + scannerContainer: { + flex: 1, + width: '100%', + justifyContent: 'center', + alignItems: 'center', + overflow: 'hidden', + borderRadius: 10, + backgroundColor: '#fff', + }, + productDetails: { + alignItems: 'center', + padding: 20, + backgroundColor: '#fff', + borderRadius: 10, + elevation: 2, + marginTop: 20, + }, + productName: { + fontSize: 20, + fontWeight: 'bold', + color: '#333', + marginBottom: 8, + }, + productPrice: { + fontSize: 18, + color: '#888', + marginBottom: 16, + }, +}); + export default ProductScannerScreen; + |