From 42c938b105b3e88fffd82d94dfedcfd75c87cfd3 Mon Sep 17 00:00:00 2001 From: Isky Date: Mon, 17 Jun 2024 20:14:06 +0800 Subject: [PATCH] Added handleImagePicker for scaning Qr Code from library.incomplete; need to handle error before passing to setScannedData --- package-lock.json | 12 +++++ package.json | 1 + screens/QRScannerScreen.tsx | 87 +++++++++++++++++++++++-------------- 3 files changed, 68 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3657542..3f1d862 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "axios": "^1.7.2", "expo": "~51.0.11", "expo-camera": "~15.0.10", + "expo-image-manipulator": "^12.0.5", "expo-image-picker": "~15.0.5", "expo-status-bar": "~1.12.1", "react": "18.2.0", @@ -7565,6 +7566,17 @@ "expo": "*" } }, + "node_modules/expo-image-manipulator": { + "version": "12.0.5", + "resolved": "https://registry.npmjs.org/expo-image-manipulator/-/expo-image-manipulator-12.0.5.tgz", + "integrity": "sha512-zJ8yINjckYw/yfoSuICt4yJ9xr112+W9e5QVXwK3nCAHr7sv45RQ5sxte0qppf594TPl+UoV6Tjim7WpoKipRQ==", + "dependencies": { + "expo-image-loader": "~4.7.0" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-image-picker": { "version": "15.0.5", "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-15.0.5.tgz", diff --git a/package.json b/package.json index acad752..c8d272b 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "axios": "^1.7.2", "expo": "~51.0.11", "expo-camera": "~15.0.10", + "expo-image-manipulator": "^12.0.5", "expo-image-picker": "~15.0.5", "expo-status-bar": "~1.12.1", "react": "18.2.0", diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index e9ef245..d72b641 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -1,12 +1,11 @@ import React, { useState, useEffect, useContext } from 'react'; -import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Button } from 'react-native'; -import { Camera, CameraView } from 'expo-camera'; +import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Button, Alert } from 'react-native'; +import { Camera, CameraView, scanFromURLAsync } from 'expo-camera'; import { QRCodeContext } from '../types'; import axios from 'axios'; // For URL calls import { Ionicons } from '@expo/vector-icons'; // For icons import { useNavigation } from '@react-navigation/native'; - - +import * as ImagePicker from 'expo-image-picker'; //-----------------FUNCTIONS DECLARED HERE------------------// // Function to determine the type of data @@ -67,10 +66,9 @@ interface QRScannerScreenProps { clearScanData: () => void; } - //-----------------Main------------------// const QRScannerScreen: React.FC = ({ clearScanData }) => { - + const navigation = useNavigation(); // call Navigation bar const [showSplash, setShowSplash] = useState(true); // call splash screen @@ -103,8 +101,6 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { initializeApp(); }, []); - - // If loading this screen , reset the scanning data const clearScanDataInternal = () => { setScannedData(''); @@ -113,8 +109,6 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { setDataType(''); }; - - // The function that takes data from { setScanned(true); //Flag is QR code already scanned @@ -137,8 +131,6 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { setQrCodes([...qrCodes, newScannedData]); }; - - // If the focus is lost focus on this screen , when come reset the scan data useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { @@ -147,7 +139,6 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { return unsubscribe; }, [navigation]); - // This function is for toggling torch const toggleTorch = () => { setEnableTorch((prev) => !prev); @@ -158,8 +149,32 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { handleQRCodeScanned({ type: 'TEST', data: 'TEST123' }); }; + // Function to handle QR code scanning from the image picker + const handleImagePicker = async () => { + const result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.Images, + allowsEditing: false, // Disabling the crop functionality + quality: 1, + }); - // For Splash, for some reason nedd to be near the end of the function... + if (result && result.assets[0].uri) { + try { + const scannedResults = await scanFromURLAsync(result.assets[0].uri); + if (scannedResults.length > 0) { + const dataNeeded = scannedResults[0].data; + handleQRCodeScanned({ type: 'QR_CODE', data: dataNeeded }); + } else { + setScannedData("No QR Code Found"); + setTimeout(() => setScannedData(""), 4000); + } + } catch (error) { + console.error('Error scanning QR code from image:', error); + Alert.alert('Failed to scan QR code from image.'); + } + } + }; + + // For Splash, for some reason need to be near the end of the function... // or else permission for camera is not asked if (showSplash) { return ( @@ -169,31 +184,27 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { ); } - // While asking for permision the page behind will render this only + // While asking for permission the page behind will render this only if (hasPermission === null) { return Requesting for camera permission; } - // this will thrown on the screen and nothing else will load if no permission if (hasPermission === false) { return No access to camera; } - //---------------The UI part-----------------// return ( - - {/* Banner section */} + {/* Banner section */} - - SafeQR v0.66.t + SafeQR v0.70 {/* Welcome Text */} Welcome to SafeQR code Scanner - {/* The cutour for the camera */} + {/* The cutout for the camera */} = ({ clearScanData }) => { enableTorch={enableTorch} /> - {/* the torch icon floating above the camerView */} + {/* the torch icon floating above the CameraView */} - {enableTorch} + {enableTorch} - {enableTorch} + + + {/* the image icon for opening album/gallery */} + + + - - {/* The CONTENT , the popup for the scanned data */} @@ -245,9 +259,6 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { ); }; - - - //--------------------The CSS----------------// const styles = StyleSheet.create({ container: { @@ -363,8 +374,20 @@ const styles = StyleSheet.create({ backgroundColor: '#000', padding: 10, borderRadius: 5, - // Ensure the button appears above other elements - } + // Ensure the button appears above other elements + }, + galleryButton: { + position: 'absolute', + bottom: 20, + right: 100, // Adjust this value to move it more or less to the right + width: 50, + height: 50, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#000', + borderRadius: 25, // Half of width and height to make it a circle + }, + }); export default QRScannerScreen;