Added some styling to the camera section

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;
+