Addes Share functionality, Added SecureWebView for Open Button.Restored Comments for QRScannerScreen

components/ScannedDataBox.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, Image, TouchableOpacity, Modal, Share } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { Ionicons } from '@expo/vector-icons';
+import SecureWebView from './SecureWebView'; // Import the SecureWebView component
 
 // Define Props for ScannedDataBox component
 interface ScannedDataBoxProps {
@@ -20,6 +21,8 @@ interface ScanResult {
 const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearScanData }) => {
   const [scanResult, setScanResult] = useState<ScanResult | null>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isWebViewVisible, setIsWebViewVisible] = useState(false); // State to control WebView modal visibility
+
   console.log("ScannedDataBox -> Data", data);
   console.log("DataType", dataType);
 
@@ -74,6 +77,12 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
     }
   };
 
+  // Handle opening the data in a sandboxed WebView
+  const handleOpen = () => {
+    setIsWebViewVisible(true);
+    console.log('Opening data in WebView:', data);
+  };
+
   return (
     <View style={styles.dataBox}>
       {/* Close button */}
@@ -112,7 +121,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
           <Ionicons name="share-social" size={18} color="#2196F3" />
           <Text style={styles.iconText}>Share</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.iconButton}>
+        <TouchableOpacity style={styles.iconButton} onPress={handleOpen}>
           <Ionicons name="open" size={18} color="#2196F3" />
           <Text style={styles.iconText}>Open</Text>
         </TouchableOpacity>
@@ -151,6 +160,21 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
           </View>
         </View>
       </Modal>
+
+      {/* Modal for SecureWebView */}
+      <Modal
+        visible={isWebViewVisible}
+        transparent={true}
+        animationType="fade"
+        onRequestClose={() => setIsWebViewVisible(false)}
+      >
+        <View style={styles.webViewContainer}>
+          <TouchableOpacity style={styles.closeWebViewButton} onPress={() => setIsWebViewVisible(false)}>
+            <Ionicons name="close-circle-outline" size={24} color="#fff" />
+          </TouchableOpacity>
+          <SecureWebView url={data} />
+        </View>
+      </Modal>
     </View>
   );
 };
@@ -291,6 +315,20 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: '#fff',
   },
+  webViewContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  webView: {
+    flex: 1,
+    marginTop: 40,
+  },
+  closeWebViewButton: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    zIndex: 1,
+  },
 });
 
 export default ScannedDataBox;

components/SecureWebView.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { WebView } from 'react-native-webview';
+
+// Define the SecureWebView component
+const SecureWebView = ({ url }) => {
+  return (
+    <WebView
+      source={{ uri: url }} // Load the URL passed as a prop
+      javaScriptEnabled={false} // Disable JavaScript for security
+      domStorageEnabled={false} // Disable DOM storage for security
+      allowFileAccess={false} // Disable file access within the WebView for security
+      originWhitelist={['*']} // Allow all origins to be loaded in the WebView
+      onShouldStartLoadWithRequest={(request) => {
+        // Implement additional URL filtering logic here if needed
+        return true; // Return true to allow the URL to be loaded
+      }}
+    />
+  );
+};
+
+export default SecureWebView;