Updated 4 checks on scannedDataBox

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,4 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.safeqr.safeqr">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
@@ -14,11 +14,9 @@
     </intent>
   </queries>
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="true" android:theme="@style/AppTheme">
-    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
-    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="51.0.0"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@piggyinu/safeqr"/>
     <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>

android/app/src/main/res/values/styles.xml

@@ -5,7 +5,6 @@
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
-    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

android/gradle.properties

@@ -58,5 +58,4 @@ EX_DEV_CLIENT_NETWORK_INSPECTOR=true
 # Use legacy packaging to compress native libraries in the resulting APK.
 expo.useLegacyPackaging=false
 
-expo.jsEngine=jsc
 VisionCamera_enableCodeScanner=true

components/ScannedDataBox.tsx

@@ -8,11 +8,6 @@ import { startActivityAsync, ActivityAction } from 'expo-intent-launcher';
 import * as Linking from 'expo-linking';
 
 
-
-
-
-
-
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
 interface ScannedDataBoxProps {
@@ -29,6 +24,8 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
   const [webViewUrl, setWebViewUrl] = useState('');
 
 
+
+
   useEffect(() => {
     const fetchQRDetails = async () => {
       try {
@@ -53,19 +50,23 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
     );
   }
 
+
   const data = qrDetails.data || {};
   const details = qrDetails.details || {};
   const type = data.info?.type || 'Undefined';
+  const description = data.info?.description || 'Undefined';
+
   const contents = data.contents || 'Undefined';
   const result = data.result || 'Unknown';
   const ssid = details.ssid || 'Undefined';
   const encryption = details.encryption || 'NO';
   const hidden = details.hidden ? 'Hidden' : 'Visible';
 
+  const isShorteningService = details.shorteningService === 'Yes';
 
 
-// Function to get security text and icon based on the URL description
+  // Function to get security text and icon based on the URL description
-const getSecurityStatus = () => {
+  const getSecurityStatus = () => {
     if (data.info?.description === "Secure Uniform Resource Locator") {
       return {
         text: 'Secure Connection',
@@ -77,14 +78,14 @@ const getSecurityStatus = () => {
         icon: <SimpleLineIcons name="shield" size={screenWidth * 0.045} color="#ff0000" />
       };
     }
-};
+  };
-const { text: securityText, icon: securityIcon } = getSecurityStatus();
+  const { text: securityText, icon: securityIcon } = getSecurityStatus();
 
 
 
 
   // Function to get result text and color based on the security status 
-const getResultStatus = () => {
+  const getResultStatus = () => {
     if (result === 'UNSAFE') {
       return { text: 'UNSAFE', color: '#ff0000' }; // Red
     } else if (result === 'SAFE') {
@@ -96,14 +97,14 @@ const getResultStatus = () => {
     } else {
       return { text: 'UNKNOWN', color: '#000000' }; // Default to Black for unknown
     }
-};
+  };
-const { text: resultText, color: resultColor } = getResultStatus();
+  const { text: resultText, color: resultColor } = getResultStatus();
 
 
 
 
-// Function to determine security header status
+  // Function to determine security header status
-const getSecurityHeaderStatus = (headers) => {
+  const getSecurityHeaderStatus = (headers) => {
     const filteredHeaders = headers.filter(
       (header) => header !== "Not an HTTPS connection" && header !== "No HSTS Header detected"
     );
@@ -113,17 +114,17 @@ const getSecurityHeaderStatus = (headers) => {
     } else {
       return { text: 'No Security Headers', color: '#ffa500', hasHeaders: false }; // Orange without headers
     }
-};
+  };
-const securityHeaderStatus = getSecurityHeaderStatus(details.hstsHeader || []);
+  const securityHeaderStatus = getSecurityHeaderStatus(details.hstsHeader || []);
 
-const getRedirectStatus = (redirectCount: number) => {
+  const getRedirectStatus = (redirectCount: number) => {
     if (redirectCount === 0) {
       return { text: 'No Redirects', color: '#44c167', hasRedirects: false }; // Green with no redirects
     } else {
       return { text: 'Redirects', color: '#ff0000', hasRedirects: true }; // Red with redirects
     }
-};
+  };
-const redirectStatus = getRedirectStatus(details.redirect || 0);
+  const redirectStatus = getRedirectStatus(details.redirect || 0);
 
 
 
@@ -136,8 +137,8 @@ const redirectStatus = getRedirectStatus(details.redirect || 0);
   };
 
 
-// Function to get encryption status and icon
+  // Function to get encryption status and icon
-const getEncryptionStatus = (encryption) => {
+  const getEncryptionStatus = (encryption) => {
     if (encryption === 'NO') {
       return {
         text: 'No Encryption',
@@ -159,9 +160,9 @@ const getEncryptionStatus = (encryption) => {
         icon: <Ionicons name="shield" size={screenWidth * 0.045} color="#000000" /> // Black for unknown
       };
     }
-};
+  };
 
-const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encryption);
+  const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encryption);
 
 
   // Function to open the Wi-Fi configuration in the OS
@@ -193,8 +194,50 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
     }
   };
 
+
+
+
+  const sslStrippingStatus = {
+    hasSSLStripping: details.sslStripping?.some(status => status === true) ?? false,
+    text: details.sslStripping?.some(status => status === true)
+      ? "SSL Stripping Detected"
+      : "No SSL Stripping",
+    color: details.sslStripping?.some(status => status === true) ? "#FF0000" : "#44c167", // Green for No SSL Stripping
+  };
+
+  // Log to check what's happening
+  console.log('SSL Stripping Details:', details.sslStripping);
+  console.log('SSL Stripping Status:', sslStrippingStatus);
+
+  const hasExecutableStatus = {
+    hasExecutable: details.hasExecutable ?? false,
+    text: details.hasExecutable ? "Executable Detected" : "No Executable",
+    color: details.hasExecutable ? "#FF0000" : "#44c167", // Green for No Executable
+  };
+
+  // Log to check what's happening
+  console.log('Executable Details:', details.hasExecutable);
+  console.log('Executable Status:', hasExecutableStatus);
+
+  const trackingStatus = {
+    hasTracking: details.tracking ?? false,
+    text: details.tracking ? "Tracking Detected" : "No Tracking",
+    color: details.tracking ? "#FF0000" : "#44c167", // Green for No Tracking
+  };
+
+  // Log to check what's happening
+  console.log('Tracking Details:', details.tracking);
+  console.log('Tracking Status:', trackingStatus);
+  const redirectCount = details.redirect ?? 0; // Default to 0 if undefined
+
+
+
+
   return (
+    
     <View style={styles.dataBox}>
+
+      
       <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
         <Ionicons name="close-circle-outline" size={screenWidth * 0.05} color="#ff69b4" />
       </TouchableOpacity>
@@ -215,58 +258,79 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
         <View style={styles.dividerVertical} />
         <View style={styles.detailsSection}>
           <Text style={styles.timestampText}>{data.createdAt ? new Date(data.createdAt).toLocaleString() : 'Invalid Date'}</Text>
-          <Text style={styles.typeText}>Description: {type}</Text>
+          <Text style={styles.typeText}>Description: {description}</Text>
+           {/* Conditionally display the shortening service message */}
+    {isShorteningService && (
+      <Text style={styles.shorteningServiceText}>This is a shortening service</Text>
+    )}
+    
         </View>
       </View>
 
       {/* The Main Result in appropriate color */}
       <Text style={[styles.resultText, { color: resultColor }]}>
         Result: {resultText}
-</Text>
+      </Text>
 
 
       {/* URL Type */}
-{type === 'URL' && (
+      {type === 'URL' && (
         <>
+          <View style={styles.mainContent}>
+            {/* Left Container */}
+            <View style={styles.leftContainer}>
               <View style={styles.displayCheck}>
                 {securityIcon}
                 <Text style={styles.DetailsInfo}>{securityText}</Text>
-</View>
+              </View>
 
-    {/* Security Headers Button */}
-    {securityHeaderStatus.hasHeaders ? (
-      <TouchableOpacity style={styles.DetailsInfoButton} onPress={() => setIsModalVisible(true)}>
-        <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={securityHeaderStatus.color} />
-        <Text style={styles.DetailsInfo}>{securityHeaderStatus.text}</Text>
-        <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" style={styles.chevronIcon} />
-      </TouchableOpacity>
-    ) : (
               <View style={styles.displayCheck}>
                 <MaterialCommunityIcons name="shield-off" size={screenWidth * 0.045} color={securityHeaderStatus.color} />
                 <Text style={styles.DetailsInfo}>{securityHeaderStatus.text}</Text>
               </View>
-    )}
 
-{/* Redirects Button */}
+              {/* Redirects Button */}
-{redirectStatus.hasRedirects ? (
+              {redirectCount > 0 ? (
                 <TouchableOpacity style={styles.DetailsInfoButton} onPress={() => setIsRedirectModalVisible(true)}>
                   <Ionicons name="shield" size={screenWidth * 0.045} color={redirectStatus.color} />
-    <Text style={styles.DetailsInfo}>{redirectStatus.text}</Text>
+                  <Text style={styles.DetailsInfo}>{`Redirects: ${redirectCount}`}</Text>
                   <Ionicons name="chevron-forward" size={screenWidth * 0.045} color="#ff69b4" style={styles.chevronIcon} />
                 </TouchableOpacity>
-) : (
+              ) : (
                 <View style={styles.displayCheck}>
                   <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={redirectStatus.color} />
-    <Text style={styles.DetailsInfo}>{redirectStatus.text}</Text>
+                  <Text style={styles.DetailsInfo}>{`Redirects: ${redirectCount}`}</Text>
+                </View>
+              )}
             </View>
-)}
 
+            {/* Vertical Divider */}
+            <View style={styles.verticalDivider} />
 
-{/* Divider */}
+            {/* Right Container */}
-<View style={styles.dividerHorizontal} />
+            <View style={styles.rightContainer}>
+              <View style={styles.displayCheck}>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={sslStrippingStatus.color} />
+                <Text style={styles.DetailsInfo}>{sslStrippingStatus.text}</Text>
+              </View>
 
-{/* Action Buttons */}
+              <View style={styles.displayCheck}>
-<View style={styles.iconContainer}>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={hasExecutableStatus.color} />
+                <Text style={styles.DetailsInfo}>{hasExecutableStatus.text}</Text>
+              </View>
+
+              <View style={styles.displayCheck}>
+                <Ionicons name="shield-checkmark" size={screenWidth * 0.045} color={trackingStatus.color} />
+                <Text style={styles.DetailsInfo}>{trackingStatus.text}</Text>
+              </View>
+            </View>
+          </View>
+
+          {/* Divider */}
+          <View style={styles.dividerHorizontal} />
+
+          {/* Action Buttons */}
+          <View style={styles.iconContainer}>
             <TouchableOpacity style={styles.iconButton} onPress={handleCopyToClipboard}>
               <Ionicons name="clipboard-outline" size={screenWidth * 0.05} color="#2196F3" />
               <Text style={styles.iconText}>Copy Link</Text>
@@ -284,10 +348,41 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
               <MaterialCommunityIcons name="file-lock-outline" size={screenWidth * 0.05} color="#2196F3" />
               <Text style={styles.iconText}>SecureWebView</Text>
             </TouchableOpacity>
-</View>
+          </View>
+
+        {/* Redirect Chain Pop UP */}
+<Modal
+  visible={isRedirectModalVisible}
+  transparent={true}
+  animationType="fade"
+  onRequestClose={() => setIsRedirectModalVisible(false)}
+>
+  <View style={styles.modalContainer}>
+    <View style={styles.modalContent}>
+      <Text style={styles.modalTitle}>Redirect Chain</Text>
+      <ScrollView style={styles.modalScrollContent}>
+        {details.redirectChain?.map((redirect: string, index: number) => (
+          <ScrollView 
+            key={index} 
+            horizontal={true} 
+            style={styles.horizontalScrollView}
+            contentContainerStyle={styles.horizontalContentContainer}>
+            <Text style={styles.modalText}>{redirect}</Text>
+          </ScrollView>
+        ))}
+      </ScrollView>
+      <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsRedirectModalVisible(false)}>
+        <Text style={styles.closeModalButtonText}>Close</Text>
+      </TouchableOpacity>
+    </View>
+  </View>
+</Modal>
 
         </>
-)}
+      )}
+
+
+
 
 
 
@@ -322,17 +417,17 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
               startActivityAsync(ActivityAction.WIFI_SETTINGS)
                 .catch(err => console.error('Error opening Wi-Fi settings:', err));
             }}
->
+          >
             <Text style={styles.connectButtonText}>Connect to Wi-Fi</Text>
-</TouchableOpacity>
+          </TouchableOpacity>
         </>
-)}
+      )}
 
 
 
 
 
-{type === 'PHONE' && (
+      {type === 'PHONE' && (
         <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
           <View style={styles.dividerHorizontal} />
           <Ionicons name="call-outline" size={screenWidth * 0.045} color="#2196F3" />
@@ -340,9 +435,9 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
 
           <Text style={styles.iconText}>Call Number</Text>
         </TouchableOpacity>
-)}
+      )}
 
-{type === 'SMS' && (
+      {type === 'SMS' && (
         <TouchableOpacity
           style={styles.iconButton}
           onPress={() => {
@@ -351,22 +446,22 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
           }}
         >
           {/* Divider */}
-<View style={styles.dividerHorizontal} />
+          <View style={styles.dividerHorizontal} />
           <Ionicons name="chatbubble-outline" size={screenWidth * 0.045} color="#2196F3" />
 
           <Text style={styles.iconText}>Send SMS</Text>
         </TouchableOpacity>
-)}
+      )}
 
-{type === 'EMAIL' && (
+      {type === 'EMAIL' && (
         <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
           {/* Divider */}
-<View style={styles.dividerHorizontal} />
+          <View style={styles.dividerHorizontal} />
           <Ionicons name="mail-outline" size={screenWidth * 0.045} color="#2196F3" />
 
           <Text style={styles.iconText}>Send Email</Text>
         </TouchableOpacity>
-)}
+      )}
 
 
 
@@ -393,14 +488,14 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
 
 
 
-{/*POP UP Security Header and Redirect button*/}
+      {/*POP UP Security Header and Redirect button*/}
       {/* Security Headers Modal */}
-<Modal
+      <Modal
         visible={isModalVisible}
         transparent={true}
         animationType="fade"
         onRequestClose={() => setIsModalVisible(false)}
->
+      >
         <View style={styles.modalContainer}>
           <View style={styles.modalContent}>
             <Text style={styles.modalTitle}>Security Headers</Text>
@@ -414,28 +509,10 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
             </TouchableOpacity>
           </View>
         </View>
-</Modal>
-
-      {/* Redirect Chain Modal */}
-      <Modal
-        visible={isRedirectModalVisible}
-        transparent={true}
-        animationType="fade"
-        onRequestClose={() => setIsRedirectModalVisible(false)}
-      >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>Redirect Chain</Text>
-            {details.redirectChain?.map((redirect: string, index: number) => (
-              <Text key={index} style={styles.modalText}>{redirect}</Text>
-            ))}
-            <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsRedirectModalVisible(false)}>
-              <Text style={styles.closeModalButtonText}>Close</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
       </Modal>
 
+
+
       {/* WebView Modal */}
       <Modal
         visible={isWebViewVisible}
@@ -457,20 +534,27 @@ const { text: encryptionText, icon: encryptionIcon } = getEncryptionStatus(encry
 };
 
 const styles = StyleSheet.create({
+  // Row styles
   row: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+
+  // Scan icon styles
   scan_icon: {
     width: screenWidth * 0.09,
     height: screenWidth * 0.09,
     marginRight: screenWidth * 0.015,
   },
+
+  // Payload text styles
   payload: {
     fontSize: screenWidth * 0.0375,
     color: '#000',
     flex: 1,
   },
+
+  // Data box styles
   dataBox: {
     padding: screenWidth * 0.0375,
     backgroundColor: '#ffe6f0',
@@ -479,77 +563,55 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: screenHeight * 0.001875 },
     shadowOpacity: 0.15,
     shadowRadius: screenWidth * 0.01875,
-    elevation: screenWidth * 0.0135,
+    elevation: screenWidth * 0.016,
     zIndex: 1,
   },
-  mainContent: {
+
-    flexDirection: 'row',
+  // QR section styles
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: screenWidth * 0.0525,
-  },
   qrSection: {
     flex: 1,
     alignItems: 'center',
   },
+
+  // Vertical divider styles
   dividerVertical: {
     width: screenWidth * 0.001875,
     height: '100%',
     backgroundColor: '#ddd',
     marginHorizontal: screenWidth * 0.025,
   },
+
+  // Details section styles
   detailsSection: {
     flex: 2,
   },
+
+  // Timestamp text styles
   timestampText: {
     fontSize: screenWidth * 0.03,
     color: '#000',
     marginBottom: screenWidth * 0.01875,
   },
+
+  // Result text styles
   resultText: {
     fontSize: screenWidth * 0.045,
     marginBottom: screenWidth * 0.01875,
     textAlign: 'center',
   },
+
+  // Type text styles
   typeText: {
     fontSize: screenWidth * 0.03,
     color: '#000',
     marginBottom: screenWidth * 0.01875,
   },
-  DetailsInfo: {
-    fontSize: screenWidth * 0.03,
-    color: '#000',
-    marginLeft: screenWidth * 0.01875,
-  },
-  iconContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    marginTop: screenWidth * 0.01875,
-  },
-  iconButton: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    marginHorizontal: screenWidth * 0.05, // Add margin between buttons
-  },
-  iconText: {
-    color: '#2196F3',
-    marginTop: screenWidth * 0.01,
-    textAlign: 'center',
-    fontSize: screenWidth * 0.03,
-  },
-  
-  dividerHorizontal: {
-    width: '100%',
-    height: 1,
-    backgroundColor: '#ddd',
-    marginVertical: screenWidth * 0.025,
-  },
-  
 
+  // Details Info Button styles
   DetailsInfoButton: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between', // Ensure equal spacing between icon and text
     paddingVertical: screenWidth * 0.01875,
     paddingHorizontal: screenWidth * 0.028125,
     backgroundColor: '#ffe6f0',
@@ -557,28 +619,47 @@ const styles = StyleSheet.create({
     marginTop: screenWidth * 0.01875,
     borderWidth: 1,
     borderColor: '#ff69b4',
+    width: '100%', // Make it take full width
   },
+  // Display check styles
+  // Aligning the boxes
   displayCheck: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between', // Align items evenly
     paddingVertical: screenWidth * 0.01875,
     paddingHorizontal: screenWidth * 0.028125,
     backgroundColor: '#ffe6f0',
     borderRadius: screenWidth * 0.01875,
-    marginTop: screenWidth * 0.01875,
+    marginVertical: screenWidth * 0.01875,
+    width: '100%', // Make it take full width
   },
+  // Details info text styles
+  DetailsInfo: {
+    fontSize: screenWidth * 0.026,
+    color: '#000',
+    marginLeft: screenWidth * 0.01875,
+    textAlign: 'left', // Center text horizontally
+    flex: 1, // Ensure the text takes up the remaining space
+  },
+
+  // Close button styles
   closeButton: {
     position: 'absolute',
     top: screenWidth * 0.01875,
     right: screenWidth * 0.01875,
     zIndex: 2,
   },
+
+  // Modal container styles
   modalContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+
+  // Modal content styles
   modalContent: {
     width: '80%',
     backgroundColor: 'white',
@@ -586,20 +667,37 @@ const styles = StyleSheet.create({
     padding: screenWidth * 0.0375,
     alignItems: 'center',
   },
+
+  // Modal title styles
   modalTitle: {
     fontSize: screenWidth * 0.045,
     fontWeight: 'bold',
     marginBottom: screenWidth * 0.01875,
   },
+
+  // Modal text styles
   modalText: {
     fontSize: screenWidth * 0.03,
     marginBottom: screenWidth * 0.009375,
     textAlign: 'left',
     width: '100%',
   },
+
+  // Modal scroll content styles
   modalScrollContent: {
     maxHeight: 200,
   },
+
+  horizontalScrollView: {
+    marginVertical: 5, // Adjust vertical margin as needed
+  },
+
+  horizontalContentContainer: {
+    flexGrow: 1, // Ensure the content container expands to fit its children
+  },
+
+
+  // Close modal button styles
   closeModalButton: {
     marginTop: screenWidth * 0.0375,
     paddingVertical: screenWidth * 0.01875,
@@ -607,18 +705,20 @@ const styles = StyleSheet.create({
     backgroundColor: '#ff69b4',
     borderRadius: screenWidth * 0.009375,
   },
-  chevronIcon: {
-    marginLeft: 'auto',
-  },
 
+  // Close modal button text styles
   closeModalButtonText: {
     fontSize: screenWidth * 0.03,
     color: '#fff',
   },
+
+  // Loading container styles
   loadingContainer: {
     justifyContent: 'center',
     alignItems: 'center',
   },
+
+  // Web view container styles
   webViewContainer: {
     width: '100%',
     height: '80%',
@@ -626,6 +726,8 @@ const styles = StyleSheet.create({
     borderRadius: screenWidth * 0.01875,
     overflow: 'hidden',
   },
+
+  // Shadow box styles
   shadowBox: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: screenHeight * 0.001875 },
@@ -633,6 +735,8 @@ const styles = StyleSheet.create({
     shadowRadius: screenWidth * 0.01875,
     elevation: screenWidth * 0.0135,
   },
+
+  // Connect button styles
   connectButton: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -644,14 +748,80 @@ const styles = StyleSheet.create({
     marginTop: screenWidth * 0.025,
   },
 
+  // Connect button text styles
   connectButtonText: {
     color: '#fff',
     marginLeft: screenWidth * 0.01875,
     fontSize: screenWidth * 0.0375,
   },
 
+  // Main content styles
+  mainContent: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: screenWidth * 0.0525,
+  },
 
+  // Left container styles
+  leftContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
 
+  // Right container styles
+  rightContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  shorteningServiceText: {
+    fontSize: screenWidth * 0.03, // Adjust size as needed
+    color: '#ff6347', // Example color (Tomato)
+    marginTop: screenWidth * 0.02, // Adjust spacing as needed
+  },
+
+  // Vertical divider styles
+  verticalDivider: {
+    width: 1,
+    backgroundColor: '#ddd',
+    height: '100%',
+    marginHorizontal: screenWidth * 0.025,
+  },
+
+  // Icon container styles
+  iconContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: screenWidth * 0.01875,
+  },
+
+  // Icon button styles
+  iconButton: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginHorizontal: screenWidth * 0.05, // Add margin between buttons
+  },
+
+  // Icon text styles
+  iconText: {
+    color: '#2196F3',
+    marginTop: screenWidth * 0.01,
+    textAlign: 'center',
+    fontSize: screenWidth * 0.03,
+  },
+
+  // Horizontal divider styles
+  dividerHorizontal: {
+    width: '100%',
+    height: 1,
+    backgroundColor: '#ddd',
+    marginVertical: screenWidth * 0.025,
+  },
+
+  // Chevron icon styles
+  chevronIcon: {
+    marginLeft: 'auto',
+  },
 });
-
 export default ScannedDataBox;

package-lock.json

@@ -26,7 +26,7 @@
         "dotenv": "^16.4.5",
         "expo": "~51.0.24",
         "expo-camera": "~15.0.14",
-        "expo-dev-client": "~4.0.19",
+        "expo-dev-client": "~4.0.22",
         "expo-image-manipulator": "^12.0.5",
         "expo-image-picker": "~15.0.7",
         "expo-intent-launcher": "~11.0.1",

package.json

@@ -30,7 +30,7 @@
     "dotenv": "^16.4.5",
     "expo": "~51.0.24",
     "expo-camera": "~15.0.14",
-    "expo-dev-client": "~4.0.19",
+    "expo-dev-client": "~4.0.22",
     "expo-image-manipulator": "^12.0.5",
     "expo-image-picker": "~15.0.7",
     "expo-intent-launcher": "~11.0.1",

screens/QRScannerScreen.tsx

@@ -242,7 +242,7 @@ const styles = StyleSheet.create({
   },
   scannedDataBoxPopup: {
     position: 'absolute',
-    top: '30%', 
+    top: '20%', 
     left: '5%',
     right: '5%',
     zIndex: 2,