Added console.log to troubelshoot handlePayload to return type to scannedDataBox, Pending fix for data not displayed on history page

components/ScannedDataBox.tsx

@@ -18,6 +18,8 @@ interface ScanResult {
 const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearScanData }) => {
   const [scanResult, setScanResult] = useState<ScanResult | null>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  console.log("ScannedDataBox -> Data", data);
+  console.log("DataType", dataType);
 
   useEffect(() => {
     // Assuming scanResult is directly related to data

screens/HistoryScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useContext, useState } from 'react';
-import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, Modal } from 'react-native';
+import React, { useContext, useState, useEffect } from 'react';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, BackHandler, Modal } from 'react-native';
 import { QRCodeContext, QRCode } from '../types'; // Import QRCode type
 import ScannedDataBox from '../components/ScannedDataBox';
 import { Ionicons } from '@expo/vector-icons';
@@ -16,6 +16,24 @@ const HistoryScreen: React.FC = () => {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const [indexToDelete, setIndexToDelete] = useState<number | null>(null);
 
+  useEffect(() => {
+    const backAction = () => {
+      if (selectedData) {
+        setSelectedData(null);
+        setSelectedScanResult(null);
+        return true;
+      }
+      return false;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction
+    );
+
+    return () => backHandler.remove();
+  }, [selectedData]);
+
   const toggleBookmark = (index: number) => {
     setQrCodes((prev: QRCode[]) => {
       const originalIndex = prev.length - 1 - index; // Compute the original index

screens/QRScannerScreen.tsx

@@ -52,6 +52,8 @@ const QRScannerScreen: React.FC = () => {
     };
 
     setScannedData(payload);
+    console.log("handlePayload -> payload", payload);
+    console.log("handlePayload -> type", type);
     setDataType(type);
     setQrCodes([...qrCodes, qrCode]);
   };
@@ -68,7 +70,7 @@ const QRScannerScreen: React.FC = () => {
         },
       });
       console.log('Response from backend:', response.data);
-      return response.data.type;
+      return response.data;
     } catch (error) {
       console.error('Error detecting QR code type:', error);
       return 'UNKNOWN';
@@ -85,6 +87,7 @@ const QRScannerScreen: React.FC = () => {
 
   const readQRFromImage = async () => {
     clearScanDataInternal();
+    console.log("readingQRFromImage");
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
       allowsEditing: false, // Don't ask user to crop images
@@ -96,6 +99,8 @@ const QRScannerScreen: React.FC = () => {
         const scannedResult = await scanFromURLAsync(result.assets[0].uri);
         if (scannedResult && scannedResult[0] && scannedResult[0].data) {
           handlePayload(scannedResult[0].data);
+          // Not sure why scannedResult.data is undefined but access as array work, KIV
+          console.log('readingQRFromImage -> scannedResult[0].data:', scannedResult[0].data);
         } else {
           setScannedData("No QR Code Found");
           setTimeout(() => setScannedData(""), 4000);