Fixed ScanQrCode from Image with RNQRGenerator

package-lock.json

@@ -52,7 +52,8 @@
         "react-native-vision-camera": "^4.5.1",
         "react-native-webview": "^13.8.6",
         "react-redux": "^9.1.2",
-        "redux": "^5.0.1"
+        "redux": "^5.0.1",
+        "rn-qr-generator": "^1.4.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -16660,6 +16661,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rn-qr-generator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rn-qr-generator/-/rn-qr-generator-1.4.0.tgz",
+      "integrity": "sha512-L3HS1eahpAA3k2s/CGZOBuv3bELshodNHO/aw9tWVrbZagSXJ9BrDat/CUnDVNWjCl8/qt9Dv+8CYY2K1q4iMQ==",
+      "peerDependencies": {
+        "react-native": ">=0.55"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",

package.json

@@ -56,7 +56,8 @@
     "react-native-vision-camera": "^4.5.1",
     "react-native-webview": "^13.8.6",
     "react-redux": "^9.1.2",
-    "redux": "^5.0.1"
+    "redux": "^5.0.1",
+    "rn-qr-generator": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

screens/QRScannerScreen.tsx

@@ -3,17 +3,13 @@ import { View, Text, StyleSheet, TouchableOpacity, Image, Dimensions, Modal } fr
 import { Camera, useCameraDevice, useCameraPermission, useCodeScanner } from 'react-native-vision-camera';
 import { Ionicons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
+import RNQRGenerator from 'rn-qr-generator';
 import ScannedDataBox from '../components/ScannedDataBox';
 import { scanQRCode } from '../api/qrCodeAPI';
 import SettingsScreen from './SettingsScreen';
-import {scanFromURLAsync } from 'expo-camera';
-
 
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
-
-
-
 const QRScannerScreen: React.FC = () => {
   const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false);
   const [enableTorch, setEnableTorch] = useState<boolean>(false);
@@ -64,15 +60,20 @@ const QRScannerScreen: React.FC = () => {
 
     if (result && result.assets && result.assets.length > 0 && result.assets[0].uri) { // Ensure the uri is not empty 
       try {
-        const scannedResult = await scanFromURLAsync(result.assets[0].uri);
-        if (scannedResult && scannedResult[0] && scannedResult[0].data) {
-          handlePayload(scannedResult[0].data);
-          console.log('QR code data from image:', scannedResult[0].data);
+        const detectionResult = await RNQRGenerator.detect({
+          uri: result.assets[0].uri, // Local path of the image
+        });
+
+        const { values } = detectionResult;
+
+        if (values.length > 0) {
+          handlePayload(values[0]); // Use the first detected QR code value
+          console.log('QR code data from image:', values[0]);
         } else {
           console.log("No QR code found in the selected image");
         }
       } catch (error) {
-      console.error('Error scanning QR code from image:', error);
+        console.error('Error scanning QR code from image:', error);
       }
     }
   };