segregated the ScannedDataBox from the QRScannerScreen , so that Historyscreen can use the ScannedDataBox

screens/QRScannerScreen.tsx

@@ -7,6 +7,7 @@ import { Ionicons } from '@expo/vector-icons'; // For icons
 import { useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import QRCode from 'react-native-qrcode-svg';
+import ScannedDataBox from '../components/ScannedDataBox';
 
 
 //-----------------FUNCTIONS DECLARED HERE------------------//
@@ -244,97 +245,39 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
   <Ionicons name="image" size={24} color="#fff" />
 </TouchableOpacity>
 
-      </View>
-
       {/* The CONTENT , the popup for the scanned data */}
+      {/* This is called from ../components/ScannedDataBox*/}
+      </View>
       {scannedData !== '' && (
-        <View style={styles.dataBox}>
-          <View style={styles.row}>
-            <Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} />
-            <Text style={styles.payload}>{extractedData}</Text>
-          </View>
-          <View style={styles.divider} />
-          <Text style={styles.timestampText}>{new Date().toLocaleString()}</Text>
-          <View style={styles.qrContainer}>
-            <QRCode value={extractedData} size={100} backgroundColor="transparent" />
-            <Text style={styles.resultText}>
-              Result: {scanResult && scanResult.positive > 0 ? 'DANGEROUS' : 'SAFE'}
-            </Text>
-          </View>
-          <View style={styles.divider} />
-          <Text style={styles.typeText}>Type: {dataType}</Text>
-          <Text style={styles.blankLine}>{'\n'}</Text>
-          <Text style={styles.checksText}>Checks</Text>
-          <Text style={styles.checksText}>Secure Connection: ✘</Text>
-          <Text style={styles.checksText}>Virus Total Check: ✘</Text>
-          <Text style={styles.checksText}>Redirects: 2</Text>
-          <View style={styles.iconContainer}>
-            <TouchableOpacity style={styles.iconButton}>
-              <Ionicons name="share-social" size={24} color="#2196F3" />
-              <Text style={styles.iconText}>Share</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.iconButton}>
-              <Ionicons name="open" size={24} color="#2196F3" />
-              <Text style={styles.iconText}>Open</Text>
-            </TouchableOpacity>
-          </View>
+        <View style={styles.scannedDataBox}>
+          <ScannedDataBox data={scannedData} scanResult={scanResult} dataType={dataType} />
         </View>
-        )}
-
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  // Container for the main screen
   container: {
     flex: 1,
     backgroundColor: '#f8f0fc',
     padding: 20,
   },
-
-  // Row for aligning items horizontally
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  // Icon for scanned data
-  scan_icon: {
-    width: 50, // Adjust the size as needed
-    height: 50,
-    marginRight: 8, // Space between icon and text
-  },
-
-  // Text for payload display
-  payload: {
-    fontSize: 20,
-    color: '#000',
-    marginBottom: 1,
-  },
-
-  // Banner container
   banner: {
     alignItems: 'center',
     marginBottom: 20,
   },
-
-  // Text for the header
   headerText: {
     fontSize: 24,
     fontWeight: 'bold',
     color: '#ff69b4',
   },
-
-  // Container for splash screen
   splashContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#f8f0fc',
   },
-
-  // Container for camera view
   cameraContainer: {
     height: '60%',
     alignItems: 'center',
@@ -342,124 +285,21 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     overflow: 'hidden',
   },
-
-  // Camera style
   camera: {
     width: '100%',
     height: '100%',
   },
-
-  // Button for flashlight
   flashButton: {
     position: 'absolute',
     bottom: 20,
-    left: 100, // Adjust this value to move it more or less to the left
+    left: 100,
     width: 50,
     height: 50,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#000',
-    borderRadius: 25, // Half of width and height to make it a circle
+    borderRadius: 25,
   },
-
-  // Box for displaying scanned data
-  dataBox: {
-    position: 'absolute',
-    top: '10%',
-    left: '5%',
-    right: '5%',
-    padding: 20,
-    backgroundColor: '#ffe6f0',
-    borderRadius: 10,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 5,
-    elevation: 3,
-    zIndex: 1, // Ensure it appears above other elements
-  },
-
-  // Container for QR code
-  qrContainer: {
-    alignItems: 'center',
-    marginVertical: 10,
-  },
-
-  // Style for QR code image
-  qrCodeImage: {
-    marginVertical: 10,
-  },
-
-  // Blank line for spacing
-  blankLine: {
-    height: 20, // Adjust the height to control the space between lines
-  },
-
-  // Divider line
-  divider: {
-    height: 1,
-    backgroundColor: '#ddd',
-    marginVertical: 10,
-    alignSelf: 'stretch',
-  },
-
-  // Text for timestamp
-  timestampText: {
-    fontSize: 12,
-    color: '#000',
-    marginBottom: 10,
-  },
-
-  // Text for result
-  resultText: {
-    fontSize: 16,
-    color: '#ff0000',
-    marginBottom: 10,
-    textAlign: 'center',
-  },
-
-  // Text for data type
-  typeText: {
-    fontSize: 16,
-    color: '#000',
-    marginBottom: 10,
-  },
-
-  // Text for checks
-  checksText: {
-    fontSize: 16,
-    color: '#000',
-    marginBottom: 5,
-  },
-
-  // Container for icons
-  iconContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 10,
-  },
-
-  // Style for icon button
-  iconButton: {
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-
-  // Text for icon button
-  iconText: {
-    color: '#2196F3',
-    marginTop: 5,
-  },
-
-  // Text for welcome message
-  welcomeText: {
-    textAlign: 'center',
-    fontSize: 20,
-    marginVertical: 10,
-    color: 'black',
-  },
-
-  // Button for test scan
   testButton: {
     position: 'absolute',
     bottom: 1,
@@ -468,18 +308,29 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 5,
   },
-
-  // Button for gallery
   galleryButton: {
     position: 'absolute',
     bottom: 20,
-    right: 100, // Adjust this value to move it more or less to the right
+    right: 100,
     width: 50,
     height: 50,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#000',
-    borderRadius: 25, // Half of width and height to make it a circle
+    borderRadius: 25,
+  },
+  scannedDataBox: {
+    position: 'absolute',
+    top: '10%',
+    left: '5%',
+    right: '5%',
+    zIndex: 2,
+  },
+  welcomeText: {
+    textAlign: 'center',
+    fontSize: 20,
+    marginVertical: 10,
+    color: 'black',
   },
 });