diff --git a/package-lock.json b/package-lock.json index 6685ef1..76b7c41 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5dab797..9f1d9e6 100644 --- a/package.json +++ b/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", diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index 5341c88..abf000b 100644 --- a/screens/QRScannerScreen.tsx +++ b/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(false); const [enableTorch, setEnableTorch] = useState(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); } } };