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;

package-lock.json

@@ -22,6 +22,7 @@
         "react-native": "0.74.2",
         "react-native-qrcode-svg": "^6.3.1",
         "react-native-safe-area-context": "^4.10.4",
+        "react-native-webview": "^13.10.4",
         "react-redux": "^9.1.2",
         "redux": "^5.0.1"
       },
@@ -12270,6 +12271,27 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-webview": {
+      "version": "13.10.4",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.10.4.tgz",
+      "integrity": "sha512-kRn70M7vyBS3IDaX2KqyF66ovUkrBS6LiHOgrEmRdZFO0i3hYY0wldEv1fJuKvgQIPMfo7GtGAjozFrk2vQdBw==",
+      "dependencies": {
+        "escape-string-regexp": "2.0.0",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-webview/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-native/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "react-native": "0.74.2",
     "react-native-qrcode-svg": "^6.3.1",
     "react-native-safe-area-context": "^4.10.4",
+    "react-native-webview": "^13.10.4",
     "react-redux": "^9.1.2",
     "redux": "^5.0.1"
   },