merge changes in package.son

.env.development

@@ -1 +1 @@
-BASE_URL=http://192.168.1.30:8080
+BASE_URL=https://localhost:8443

App.tsx

@@ -7,11 +7,10 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Provider } from 'react-redux';
 import QRScannerScreen from './screens/QRScannerScreen';
 import HistoryScreen from './screens/HistoryScreen';
-import SettingsScreen from './screens/SettingsScreen';
+import EmailScreen from './screens/EmailScreen'; // Import the Email screen
 import { QRCodeContext } from './types';
 import CustomTabBar from './components/CustomTabBar';
 import store from './store';
-
 import { withAuthenticator } from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
 import config from './src/aws-exports';
@@ -42,7 +41,7 @@ const App: React.FC = () => {
             <Tab.Screen name="QRScanner">
               {(props) => <QRScannerScreen {...props} clearScanData={clearScanData} />}
             </Tab.Screen>
-            <Tab.Screen name="Settings" component={SettingsScreen} />
+            <Tab.Screen name="Email" component={EmailScreen} />
           </Tab.Navigator>
         </NavigationContainer>
       </QRCodeContext.Provider>

api/qrCodeAPI.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import Constants from 'expo-constants';
-const { API_BASE_URL } = Constants.expoConfig.extra;
+//const { API_BASE_URL } = Constants.expoConfig.extra;
-//const API_BASE_URL = 'http://192.168.1.30:8080/v1/qrcodetypes';
+const API_BASE_URL = 'https://localhost:8443';
 
 const API_URL_DETECT = "/v1/qrcodetypes/detect";
 const API_URL_VERIFY_URL = "/v1/qrcodetypes/verifyURL"

components/CustomTabBar.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
-
 
 // Define custom props for CustomTabBar
 interface CustomTabBarProps extends BottomTabBarProps {
   clearScanData: () => void;
 }
 
-
 // Custom tab bar component with typings
 const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigation, clearScanData }) => {
   return (
@@ -30,7 +28,7 @@ const CustomTabBar: React.FC<CustomTabBarProps> =  ({ state, descriptors, naviga
           const event = navigation.emit({
             type: 'tabPress',
             target: route.key,
-        canPreventDefault: true
+            canPreventDefault: true,
           });
 
           if (!isFocused && !event.defaultPrevented) {
@@ -53,7 +51,9 @@ const CustomTabBar: React.FC<CustomTabBarProps> =  ({ state, descriptors, naviga
           });
         };
 
-        const iconName = route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
+        // Define the icon for each tab
+        const iconName =
+          route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
 
         return (
           <TouchableOpacity
@@ -66,7 +66,11 @@ const CustomTabBar: React.FC<CustomTabBarProps> =  ({ state, descriptors, naviga
             onLongPress={onLongPress}
             style={styles.tabButton}
           >
+            {route.name === 'Email' ? (
+              <MaterialIcons name="email" size={24} color={isFocused ? '#ff69b4' : '#222'} />
+            ) : (
               <Ionicons name={iconName} size={24} color={isFocused ? '#ff69b4' : '#222'} />
+            )}
             {/* Check if label is a string before rendering */}
             {typeof label === 'string' ? (
               <Text style={{ color: isFocused ? '#ff69b4' : '#222' }}>
@@ -77,13 +81,15 @@ const CustomTabBar: React.FC<CustomTabBarProps> =  ({ state, descriptors, naviga
         );
       })}
       <View style={styles.floatingButton}>
-        <TouchableOpacity onPress={() => { 
+        <TouchableOpacity
+          onPress={() => {
             clearScanData();
             navigation.reset({
               index: 0,
               routes: [{ name: 'QRScanner' }],
             });
-        }}>
+          }}
+        >
           <Ionicons name="camera" size={28} color="#fff" />
         </TouchableOpacity>
       </View>

package-lock.json

@@ -18,6 +18,7 @@
         "@react-navigation/bottom-tabs": "^6.5.20",
         "@react-navigation/drawer": "^6.7.2",
         "@react-navigation/native": "^6.1.17",
+        "@react-navigation/stack": "^6.4.1",
         "@reduxjs/toolkit": "^2.2.6",
         "aws-amplify": "^6.4.2",
         "axios": "^1.7.2",
@@ -32,10 +33,10 @@
         "react": "18.2.0",
         "react-native": "^0.74.3",
         "react-native-dotenv": "^3.4.11",
-        "react-native-gesture-handler": "~2.16.1",
+        "react-native-gesture-handler": "^2.17.1",
         "react-native-get-random-values": "^1.11.0",
         "react-native-qrcode-svg": "^6.3.1",
-        "react-native-reanimated": "~3.10.1",
+        "react-native-reanimated": "^3.14.0",
         "react-native-safe-area-context": "^4.10.4",
         "react-native-screens": "3.31.1",
         "react-native-svg": "15.2.0",
@@ -3669,7 +3670,10 @@
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
       "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+<<<<<<< HEAD
       "license": "MIT",
+=======
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
       "dependencies": {
         "@types/hammerjs": "^2.0.36"
       },
@@ -7340,7 +7344,10 @@
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.7.2.tgz",
       "integrity": "sha512-o4g2zgTZa2+oLd+8V33etrSM38KIqu8S/zCBTsdsHUoQyVE7JNRiv3Qgq/jMvEb8PZCqWmm7jHItcgzrBuwyOQ==",
+<<<<<<< HEAD
       "license": "MIT",
+=======
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
       "dependencies": {
         "@react-navigation/elements": "^1.3.31",
         "color": "^4.2.3",
@@ -7360,7 +7367,10 @@
       "version": "1.3.31",
       "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.31.tgz",
       "integrity": "sha512-bUzP4Awlljx5RKEExw8WYtif8EuQni2glDaieYROKTnaxsu9kEIA515sXQgUDZU4Ob12VoL7+z70uO3qrlfXcQ==",
+<<<<<<< HEAD
       "license": "MIT",
+=======
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
       "peerDependencies": {
         "@react-navigation/native": "^6.0.0",
         "react": "*",
@@ -7402,6 +7412,24 @@
         "nanoid": "^3.1.23"
       }
     },
+    "node_modules/@react-navigation/stack": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.4.1.tgz",
+      "integrity": "sha512-upMEHOKMtuMu4c9gmoPlO/JqI6mDlSqwXg1aXKOTQLXAF8H5koOLRfrmi7AkdiE9A7lDXWUAZoGuD9O88cYvDQ==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.31",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.6.tgz",
@@ -8756,8 +8784,12 @@
     "node_modules/@types/hammerjs": {
       "version": "2.0.45",
       "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
+<<<<<<< HEAD
       "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==",
       "license": "MIT"
+=======
+      "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ=="
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
     },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
@@ -12229,7 +12261,10 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+<<<<<<< HEAD
       "license": "BSD-3-Clause",
+=======
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
       "dependencies": {
         "react-is": "^16.7.0"
       }
@@ -16309,15 +16344,24 @@
       }
     },
     "node_modules/react-native-gesture-handler": {
+<<<<<<< HEAD
       "version": "2.16.2",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz",
       "integrity": "sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==",
       "license": "MIT",
+=======
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.17.1.tgz",
+      "integrity": "sha512-pWfniN6NuVKUq40KACuD3NCMe+bWNQCpD3cmxL6aLSCTwPKYmf7l4Lp0/E/almpjvxhybJZtFLU0w4tmxnIKaA==",
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "hoist-non-react-statics": "^3.3.0",
         "invariant": "^2.2.4",
+<<<<<<< HEAD
         "lodash": "^4.17.21",
+=======
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
@@ -16352,10 +16396,16 @@
       }
     },
     "node_modules/react-native-reanimated": {
+<<<<<<< HEAD
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.10.1.tgz",
       "integrity": "sha512-sfxg6vYphrDc/g4jf/7iJ7NRi+26z2+BszPmvmk0Vnrz6FL7HYljJqTf531F1x6tFmsf+FEAmuCtTUIXFLVo9w==",
       "license": "MIT",
+=======
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.14.0.tgz",
+      "integrity": "sha512-TAxLtCfRyC/nOLeWoX/8MhdIF+Fi1e1NbLhIgEm5Kv9/gioAwSNaqLUYxjIClU1RaLwSTE8iaiHNVhTU4TS9DA==",
+>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f
       "dependencies": {
         "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
         "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",

package.json

@@ -21,6 +21,7 @@
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.1.17",
+    "@react-navigation/stack": "^6.4.1",
     "@reduxjs/toolkit": "^2.2.6",
     "aws-amplify": "^6.4.2",
     "axios": "^1.7.2",
@@ -35,10 +36,10 @@
     "react": "18.2.0",
     "react-native": "^0.74.3",
     "react-native-dotenv": "^3.4.11",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "^2.17.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-qrcode-svg": "^6.3.1",
-    "react-native-reanimated": "~3.10.1",
+    "react-native-reanimated": "^3.14.0",
     "react-native-safe-area-context": "^4.10.4",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

screens/EmailScreen.tsx

@@ -0,0 +1,346 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
+const emailData = {
+  emailAddress: 'user@example.com',
+  messages: [
+    {
+      messageId: '190f239a0b0ccd52',
+      subject: 'Fwd: Inaugural newsletter for EEE alumni, Singapore Polytechnic',
+      historyId: '29512',
+      date: 'Sat, 27 Jul 2024 11:25:44 +0800',
+      qrCodeByContentId: [
+        {
+          cid: 'ii_190f2388c4123a1f8ce',
+          attachmentId: 'ANGjdJ_o4rREokfsZGp6r4aq9eZwPDCmatH7kcFkHsmKftrFGXBkPCvvdAgr8_oyYMcovpwJP8rzNvImcql0BAYOPCzdCBIeKoX7qddlA51CdsRfkRD7J56JMWbxiwb6qgZkDSDVp3zgEmiPhbk52Cm_QtlSZ8fsmMqAR_jDW9LbdxSSPY-mQJc3pMSgwHG69_BzBvBKXvW3-sJHHt1uL8J1cVo3yrTQ5X_SG3xkyv7eYKu9iFZ65mz70sW2PIooDmZroBRMfXgXnfK0vhp0kFb3vDcKDl8unN9YjRIrRdCov_7thsCIn_ahhFMCd4gPoLMnsva3czuVNbQz7Ze-Uihk3RLc6FuoVzV8BxmEjuYMApxPDm17ztm6FG9i_TADSQFE5e4ZxtJycCA3lYr0',
+          decodedContent: [
+            'https://icrm.sp.edu.sg/alumni/',
+            'https://industry.sp.edu.sg/span/career-opportunities/'
+          ],
+          totalQRCodeFound: 2
+        }
+      ]
+    },
+    {
+      messageId: '190f2386f85c3a36',
+      subject: 'Fwd: Counting Down - ITE Alumni Association 25th Anniversary Beach Cleanup',
+      historyId: '29518',
+      date: 'Sat, 27 Jul 2024 11:24:26 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://www.itealumni.org.sg/massemail/20221021/beach_clean_up_qrcode.png',
+          decodedContent: [
+            'https://me-qr.com/YHuVUWd'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f233d7ca4d8ac',
+      subject: 'Fwd: You’ve unlocked the Business Profile Rewards Programme!',
+      historyId: '29571',
+      date: 'Sat, 27 Jul 2024 11:19:25 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://image.mkt.grab.com/lib/fe3a15707564067f751c78/m/55/8a4a3d09-136f-45df-b093-cc7ba5ae5a58.png',
+          decodedContent: [
+            'https://grab.onelink.me/2695613898?pid=EDM&c=ALL_NA_PAX_GFB_ALL_REG__BusinessRidesChallenge_NA&is_retargeting=true&af_dp=grab%3A%2F%2Fopen%3FscreenType%3DREWARDSWEB%26screen%3Dchallenge&af_force_deeplink=true&af_sub5=edm&af_ad=&af_web_dp=https%3A%2F%2Fwww.grab.com%2Fdownload%2F'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f232a1a55c1dd',
+      subject: 'Fwd: [UPDATE!] EEE Alumni Homecoming 2024 is now on 2 Aug, Friday',
+      historyId: '29574',
+      date: 'Sat, 27 Jul 2024 11:18:05 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://file-au.clickdimensions.com/spedusg-a7v6v/files/eeealumnihomecoming2024on2aug.jpg',
+          decodedContent: [
+            'https://scanned.page/6645b492afa32'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f231cb59cb122',
+      subject: 'Fwd: Latest Job Opportunities (posted in Aug) with Attractive Salaries for ITE Graduates - follow us on IG, FB & TG!',
+      historyId: '29580',
+      date: 'Sat, 27 Jul 2024 11:17:11 +0800',
+      qrCodeByContentId: [
+        {
+          cid: 'ii_190f2310981c2203e801',
+          attachmentId: 'ANGjdJ9da1OrxMtqkRbiPAvHbJIYMIBzHAbZlVSaSsJKbg3Q3HSSlO1xA5xb1Q8PAbzqh7QjIJ4gIdqo9vTiuQanpkcv7Suhj4KhPFbL2woGSy6w4G_Ihbqw-A2V06oPPO74AZWlDISzDH9bxbs2fjCcaGqFJykXNfYVy4Tfy7ZKbHIC1w12YAcK_xooDPEl48UU5Z0XHhlpWGTnAfMOUvGBkUF28MHFyPwhMYcaQgJ8GajQtm5LsXkiavj4JBU-27oPB9eupTMLzKZXKZY7kzaxLwfI_adCu7HxPQudQoPaVHL_sUHxohm8Tl3mJV0T4sVyzL4bemLEQBVXQfsp55mZspyk6ujOkKe7YHboI_EyNsvcRHKlezO6_uovYI-alBuLSJ2gEIXjViU_63tn',
+          decodedContent: [
+            'https://sites.google.com/view/itecareerservices/home',
+            'https://www.instagram.com/itealumni/',
+            'https://www.facebook.com/ITE-Alumni-Network-152816488099453'
+          ],
+          totalQRCodeFound: 3
+        }
+      ]
+    },
+    {
+      messageId: '190f2315e39caf67',
+      subject: 'Fwd: Invite to SEIT Security Summit 2021',
+      historyId: '29596',
+      date: 'Sat, 27 Jul 2024 11:16:44 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://mcusercontent.com/75a08b98bc328a8dcf78d9606/images/09ba74eb-b05f-a564-df79-53e4cdc6f53c.jpg',
+          decodedContent: [
+            'https://form.gov.sg/6101fe896bd2f30011aaf4c6'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f2309ae35c6d2',
+      subject: 'Fwd: Many Exciting, Good Paying Job Opportunities in our Job Portal for ITE Graduates',
+      historyId: '29607',
+      date: 'Sat, 27 Jul 2024 11:15:53 +0800',
+      qrCodeByContentId: [
+        {
+          cid: 'ii_190f22744b62d7326d2',
+          attachmentId: 'ANGjdJ-M5yXJcDRyejnSdcpr0JipKrq1PL1c2gpXiMd6jC6EI0oa4VKe9QJf_oArNRb4ae2IvhZO7OE7BOj_GqcLYS29qz4sUCTQvXA2Z4ydsLOgBkhMyHyFIL9KGLW4YZ3eDVHDPifGnAeNZuRgLTsF7E8Td3sFvfcITcI1SEM04eqpALEHPJmpKh7Er5hJv4ciLlfd2yA0Z9-wRHT7174rjAIypjy606W5mdYdV9B7Y63IwUz8sckrs-BmMsWPooUKA2qrz_vDatb3EVQzmRZreAJaUwIhMUv30JB5x3SS9NrKyDmoj_oU04iVXUWAjUE1SOFbN2Bk2nALoSVgAHwXdvOPvp17iI8vgp0VXKyocHvkNOqpsdKbfsRDR9yVhImqs4s83lAOH9X1rp9V',
+          decodedContent: [
+            'https://www.instagram.com/itealumni/',
+            'https://www.facebook.com/ITEAlumni'
+          ],
+          totalQRCodeFound: 2
+        },
+        {
+          cid: 'ii_190f22744b62c91aec1',
+          attachmentId: 'ANGjdJ_2XGOHh1AS3Vtx02mFNCIKP-DpSz8sChaNxzeFaviwLe5zBsLpxJ8vv4WYrYElyy7S0xxjy5q3CWWlHGI8zgkZCF95zPlEvJ8f_bWswlQ6tIanXM3b_tk6Jh_e35X99t1PjfRQFDck3vWEfHtMuM3brPkaNP2Ely4bjGO9bthU58TRpcHq3sdnhlrK2If0xLygyS9mw22og17RVGd8vI39QzVSF7xY8JnI-OTJbiRRZ4es3lFLStf3DpjSHIRqeja8Ps2oEduCLl4MQZ7Mhy0df585QC-eJvk6UUX20q2JfQPX6Up7xuR9sxD0GLFeJhseF98Y4QN3K2v6YAhch-LFp3_p-StNQfLafI2bOfFAiv9J8FflTHEIPOICLkRvM_2lRYK4cQajgROp',
+          decodedContent: [
+            'https://uspur.e2i.com.sg/ITE',
+            'https://sites.google.com/view/bookyourecg',
+            'https://sites.google.com/view/ecg-ce/home',
+            'https://sites.google.com/view/virtualchallenge/book-ecg-appointment'
+          ],
+          totalQRCodeFound: 4
+        }
+      ]
+    },
+    {
+      messageId: '190f2119dd09ee0e',
+      subject: 'Fwd: Exclusive insights for Risk and Compliance Managers - don\'t miss out!',
+      historyId: '29628',
+      date: 'Sat, 27 Jul 2024 10:42:27 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://go.ibf.org.sg/l/892591/2023-10-09/g98t7/892591/1696907378NZU0nrZd/qr_code__21_.png',
+          decodedContent: [
+            'https://us02web.zoom.us/webinar/register/WN_qHoX3DXUS-y_qP3eWt2jXQ'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190e95f5626b2a39',
+      subject: 'Test Test',
+      historyId: '28144',
+      date: 'Thu, 25 Jul 2024 18:10:57 +0800',
+      qrCodeByContentId: [
+        {
+          cid: '190e95f3d0096ff49b41',
+          attachmentId: 'ANGjdJ9dE5MqEQkNaX1ssbR9jTwRttD28jj5b3-A8iGS_v8QNm6s5HNqknpTeVQP75fCTrLdwbbvnCI120H1Boo_Qls42YqL470MHAw_d_QPXF10TWUNhpOVpTBPXntHwxD4tFoxHfvH47OdZVE-LuuYbJUsLu9BzYM6F3t2uBfsimbOhTkmgHHW8LOcnX1ZjM5Q53rsbD_K7UaBfKgWaaaDq4U4qg4ztLscRe00zLGkOPxgETTf2SRPm4x5fHVfoszj1xQRjSbTpdkbAnslWH5HYgDWP3854wBObQGfsyve6LfARBMNH7Xez0OAX8k',
+          decodedContent: [
+            '0002010102111531260207020052044611190861600    26860011SG.COM.NETS01231198500065G99123123590002111119086160003089086160110012990891A6686851800007SG.SGQR01122007073092D9020701.00110306330029040201050242060400000708202307175204000053037025802SG5922BENDEMEER PRAWN NOODLE6009Singapore63040AEB'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f22775c9d2a35',
+      subject: 'Fwd: Monthly Update - Highlights from July',
+      historyId: '29700',
+      date: 'Sat, 27 Jul 2024 11:00:00 +0800',
+      qrCodeByContentId: [
+        {
+          cid: 'ii_190f22664b8f23245d3',
+          attachmentId: 'ANGjdJ-5y7TR8dckE9jKe5o9xV7zLQ2Eq4U4LPcfhj29Nx8aR0N8bJqKm3OvSy0hP6cOvH9RbO1vR7Sf8Q3_G6QhsaB8Y1xYTQpv4QY8ZTloGOaBbhMyHyKGM9KHLW5YZ3eDVHDPifGnAeNZuRgLTsF7E8Td3sFvfcITcI1SEM04eqpALEHPJmpKh7Er5hJv4ciLlfd2yA0Z9-wRHT7174rjAIypjy606W5mdYdV9B7Y63IwUz8sckrs-BmMsWPooUKA2qrz_vDatb3EVQzmRZreAJaUwIhMUv30JB5x3SS9NrKyDmoj_oU04iVXUWAjUE1SOFbN2Bk2nALoSVgAHwXdvOPvp17iI8vgp0VXKyocHvkNOqpsdKbfsRDR9yVhImqs4s83lAOH9X1rp9V',
+          decodedContent: [
+            'https://www.example.com/newsletter/july',
+            'https://www.example.com/events/upcoming'
+          ],
+          totalQRCodeFound: 2
+        }
+      ]
+    },
+    {
+      messageId: '190f22887e0d8b27',
+      subject: 'Fwd: Invitation to Join the Annual Tech Summit 2024',
+      historyId: '29702',
+      date: 'Sat, 27 Jul 2024 10:45:30 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://example.com/images/tech_summit_invite.png',
+          decodedContent: [
+            'https://example.com/register/techsummit2024'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f229a4b1d2c89',
+      subject: 'Fwd: Important Updates on Your Account',
+      historyId: '29704',
+      date: 'Sat, 27 Jul 2024 10:30:15 +0800',
+      qrCodeByContentId: [
+        {
+          cid: 'ii_190f229e89df3a5d0',
+          attachmentId: 'ANGjdJ9-M5yXJcDRyejnSdcpr0JipKrq1PL1c2gpXiMd6jC6EI0oa4VKe9QJf_oArNRb4ae2IvhZO7OE7BOj_GqcLYS29qz4sUCTQvXA2Z4ydsLOgBkhMyHyFIL9KGLW4YZ3eDVHDPifGnAeNZuRgLTsF7E8Td3sFvfcITcI1SEM04eqpALEHPJmpKh7Er5hJv4ciLlfd2yA0Z9-wRHT7174rjAIypjy606W5mdYdV9B7Y63IwUz8sckrs-BmMsWPooUKA2qrz_vDatb3EVQzmRZreAJaUwIhMUv30JB5x3SS9NrKyDmoj_oU04iVXUWAjUE1SOFbN2Bk2nALoSVgAHwXdvOPvp17iI8vgp0VXKyocHvkNOqpsdKbfsRDR9yVhImqs4s83lAOH9X1rp9V',
+          decodedContent: [
+            'https://www.example.com/account/updates'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    },
+    {
+      messageId: '190f230bb4a5e7d2',
+      subject: 'Fwd: Your Subscription is About to Expire!',
+      historyId: '29710',
+      date: 'Sat, 27 Jul 2024 10:15:45 +0800',
+      qrCodeByURL: [
+        {
+          url: 'https://example.com/images/subscription_expire.png',
+          decodedContent: [
+            'https://example.com/renew/subscription'
+          ],
+          totalQRCodeFound: 1
+        }
+      ]
+    }
+  ]
+};
+
+
+const EmailScreen: React.FC = () => {
+  const [selectedMessage, setSelectedMessage] = useState(null);
+
+  const handleSelectMessage = (message) => {
+    setSelectedMessage(selectedMessage === message ? null : message);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>{emailData.emailAddress}</Text>
+      <Text style={styles.emailAddress}>--- </Text>
+      <FlatList
+        data={emailData.messages}
+        keyExtractor={(item) => item.messageId}
+        renderItem={({ item }) => (
+          <TouchableOpacity onPress={() => handleSelectMessage(item)} style={styles.messageContainer}>
+            <Text style={styles.subject}>{item.subject}</Text>
+            <Text style={styles.date}>{item.date}</Text>
+            {selectedMessage === item && (
+              <View style={styles.emailDetailContainer}>
+                {item.qrCodeByContentId && (
+                  <View>
+                    <Text style={styles.qrCodeHeader}>QR Codes by Content ID:</Text>
+                    {item.qrCodeByContentId.map((qrCode, index) => (
+                      <View key={index} style={styles.qrCodeContainer}>
+                        {qrCode.decodedContent.map((url, i) => (
+                          <Text key={i} style={styles.qrCodeLink}>{url}</Text>
+                        ))}
+                      </View>
+                    ))}
+                  </View>
+                )}
+                {item.qrCodeByURL && (
+                  <View>
+                    <Text style={styles.qrCodeHeader}>QR Codes by URL:</Text>
+                    {item.qrCodeByURL.map((qrCode, index) => (
+                      <View key={index} style={styles.qrCodeContainer}>
+                        <Text style={styles.qrCodeLink}>{qrCode.url}</Text>
+                        {qrCode.decodedContent.map((url, i) => (
+                          <Text key={i} style={styles.qrCodeLink}>{url}</Text>
+                        ))}
+                      </View>
+                    ))}
+                  </View>
+                )}
+              </View>
+            )}
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f0fc',
+    padding: 10,
+    paddingBottom: 90, // Add this line to give space for the nav bar
+  },
+  header: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#ff69b4',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  emailAddress: {
+    fontSize: 18,
+    color: '#ff69b4',
+    marginBottom: 10,
+  },
+  emailContainer: {
+    paddingBottom: 120, // Add padding to prevent overlap with custom navbar
+  },
+  messageContainer: {
+    backgroundColor: '#fff',
+    padding: 10,
+    borderRadius: 10,
+    marginBottom: 10,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 5,
+    elevation: 2,
+  },
+  subject: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#000',
+  },
+  date: {
+    fontSize: 14,
+    color: '#555',
+    marginBottom: 5,
+  },
+  emailDetailContainer: {
+    backgroundColor: '#f8f0fc',
+    borderRadius: 10,
+    marginTop: 10,
+    padding: 10,
+  },
+  qrCodeHeader: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#ff69b4',
+    marginBottom: 5,
+  },
+  qrCodeContainer: {
+    marginBottom: 5,
+  },
+  qrCodeLink: {
+    fontSize: 14,
+    color: '#0000ff',
+    textDecorationLine: 'underline',
+  },
+});
+
+export default EmailScreen;

screens/QRScannerScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Modal } from 'react-native';
 import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
 import { QRCodeContext } from '../types';
 import axios from 'axios'; // For URL calls
@@ -11,8 +11,8 @@ import { useDispatch } from 'react-redux';
 import { RootState, AppDispatch } from '../store';
 import { addQRCode } from '../reducers/qrCodesReducer'; // Assuming you have actions defined for Redux
 import { detectQRCodeType, verifyURL, checkRedirects } from '../api/qrCodeAPI'; // Import utility functions
+import SettingsScreen from './SettingsScreen'; // Import the Settings screen
 
-// Main Function
 const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanData }) => {
   const navigation = useNavigation(); // call Navigation bar
   const dispatch = useDispatch<AppDispatch>(); // Use dispatch for Redux actions
@@ -28,6 +28,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
   const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
   const [cameraVisible, setCameraVisible] = useState<boolean>(true); // State to control camera visibility
 
+  // State to control the visibility of the modal
+  const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false);
+
   // Add state variables for scan results
   const [secureConnection, setSecureConnection] = useState<boolean | null>(null);
   const [virusTotalCheck, setVirusTotalCheck] = useState<boolean | null>(null);
@@ -53,7 +56,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     console.log("Scan data cleared");
   };
 
-  // Handle QR Code Payload
   const handlePayload = async (payload: string) => {
     setScanned(true);
     console.log("Scanning Completed. Payload is:", payload);
@@ -85,7 +87,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     console.log("QR code data added to history");
   };
 
-  // Send QR Code Data to Backend Server
   const sendToAPIServer = async (payload: string): Promise<string> => {
     console.log('Sending QR code data to backend:', payload);
 
@@ -105,19 +106,16 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     }
   };
 
-  // Toggle Torch (Flashlight)
   const toggleTorch = () => {
     setEnableTorch((prev) => !prev);
     console.log("Torch toggled:", enableTorch ? "off" : "on");
   };
 
-  // Handle Test Scan
   const handleTestScan = () => {
     handlePayload('TEST123');
     console.log("Test scan executed");
   };
 
-  // Read QR Code from Image
   const readQRFromImage = async () => {
     clearScanDataInternal();
     console.log("Reading QR code from image");
@@ -133,11 +131,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
         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('QR code data from image:', scannedResult[0].data);
         } else {
           setScannedData("No QR Code Found");
-          //setTimeout(() => setScannedData(""), 4000);
           console.log("No QR code found in the selected image");
           Alert.alert('No QR code found in the selected image.');
         }
@@ -148,7 +144,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
     }
   };
 
-  // Clear scan data when screen is focused
   useFocusEffect(
     useCallback(() => {
       setCameraVisible(true);
@@ -180,9 +175,7 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
 
   return (
     <View style={styles.container}>
-      <View style={styles.banner}>
       <Text style={styles.headerText}>SafeQR v0.89</Text>
-      </View>
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
 
       <View style={styles.cameraContainer}>
@@ -198,9 +191,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
         <TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
           <Ionicons name="flashlight" size={24} color="#fff" />
         </TouchableOpacity>
-        {/* <TouchableOpacity onPress={handleTestScan} style={styles.testButton}>
-          <Ionicons name="bug" size={24} color="#fff" />
-        </TouchableOpacity> */}
         <TouchableOpacity onPress={readQRFromImage} style={styles.galleryButton}>
           <Ionicons name="image" size={24} color="#fff" />
         </TouchableOpacity>
@@ -220,6 +210,28 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
           />
         </View>
       )}
+
+      {/* Settings Icon */}
+      <TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}>
+        <Ionicons name="settings" size={24} color="#000" />
+      </TouchableOpacity>
+
+      {/* Settings Modal */}
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isSettingsModalVisible}
+        onRequestClose={() => setIsSettingsModalVisible(false)}
+      >
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <SettingsScreen />
+            <TouchableOpacity onPress={() => setIsSettingsModalVisible(false)} style={styles.closeButton}>
+              <Text style={styles.closeButtonText}>Close</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
     </View>
   );
 };
@@ -230,14 +242,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#f8f0fc',
     padding: 20,
   },
-  banner: {
-    alignItems: 'center',
-    marginBottom: 20,
-  },
   headerText: {
     fontSize: 24,
     fontWeight: 'bold',
     color: '#ff69b4',
+    textAlign: 'center',
+    marginBottom: 20,
   },
   splashContainer: {
     flex: 1,
@@ -269,14 +279,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     borderRadius: 25,
   },
-  testButton: {
-    position: 'absolute',
-    bottom: 1,
-    alignSelf: 'stretch',
-    backgroundColor: '#000',
-    padding: 10,
-    borderRadius: 5,
-  },
   galleryButton: {
     position: 'absolute',
     bottom: 20,
@@ -301,6 +303,36 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     color: 'black',
   },
+  settingsButton: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    zIndex: 2,
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    height: '90%',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    width: '100%', // Adjust the width to cover more space
+    height: '90%', // Adjust the height to cover more space
+    backgroundColor: 'white',
+    padding: 20, // Reduce the padding
+    borderRadius: 10,
+    alignItems: 'center',
+  },  
+  closeButton: {
+    marginTop: 10,
+    padding: 10,
+    backgroundColor: '#ff69b4',
+    borderRadius: 5,
+  },
+  closeButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
 });
-
 export default QRScannerScreen;

screens/SettingsScreen.tsx

@@ -140,20 +140,18 @@ const SettingsScreen: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-  userName: {
-    fontSize: 16,
-    marginBottom: 10,
-  },
   container: {
     flex: 1,
     backgroundColor: '#f8f0fc',
-    padding: 20,
+    padding: 10, // Reduce padding
+    width: '100%', // Increase width to fill the modal
   },
   header: {
     fontSize: 24,
     fontWeight: 'bold',
     color: '#ff69b4',
     marginBottom: 20,
+    textAlign: 'center', // Center the header text
   },
   profileSection: {
     marginBottom: 20,
@@ -198,4 +196,5 @@ const styles = StyleSheet.create({
   },
 });
 
+
 export default SettingsScreen;