added inteceptor to include diff headers in diff env

.env.development

@@ -1 +1,2 @@
+NODE_ENV=development
 BASE_URL=http://192.168.1.30:8080

.env.production

@@ -1,2 +1,3 @@
-BASE_URL=https://bk5wiynzsi.execute-api.ap-southeast-1.amazonaws.com/api/
+NODE_ENV=production
+BASE_URL=https://bk5wiynzsi.execute-api.ap-southeast-1.amazonaws.com/api
 ENV=production

.gitignore

@@ -55,3 +55,44 @@ amplifytools.xcconfig
 .secret-*
 **.sample
 #amplify-do-not-edit-end
+
+# @generated expo-cli sync-b5df6a44d8735348b729920a7406b633cfb74d4c
+# The following patterns were generated by expo-cli
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @end expo-cli

App.tsx

@@ -1,17 +1,13 @@
-import './gesture-handler';
-
-
 import React, { useState } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 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 +38,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>

android/app/build.gradle

@@ -110,6 +110,7 @@ android {
             shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
         }
     }
     packagingOptions {

android/app/src/main/java/com/safeqr/safeqr/MainActivity.kt

@@ -1,6 +1,3 @@
-import android.os.Bundle;
-
-
 package com.safeqr.safeqr
 
 import android.os.Build

android/gradle.properties

@@ -25,6 +25,9 @@ android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
 
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64

api/qrCodeAPI.tsx

@@ -1,7 +1,8 @@
 import axios from 'axios';
 import Constants from 'expo-constants';
-const { API_BASE_URL } = Constants.expoConfig.extra;
-//const API_BASE_URL = 'http://192.168.1.30:8080/v1/qrcodetypes';
+const { API_BASE_URL, ENVIRONMENT } = Constants.expoConfig.extra;
+import { fetchAuthSession, getCurrentUser } from 'aws-amplify/auth';
+//const API_BASE_URL = 'https://localhost:8443';
 
 const API_URL_DETECT = "/v1/qrcodetypes/detect";
 const API_URL_VERIFY_URL = "/v1/qrcodetypes/verifyURL"
@@ -12,15 +13,46 @@ const API_URL_DELETE_SCANNED_HISTORY = "/v1/user/deleteScannedHistories"
 const API_URL_GET_BOOKMARKS = "/v1/user/getBookmarks"
 const API_URL_SET_BOOKMARK = "/v1/user/setBookmark"
 const API_URL_DELETE_BOOKMARK = "/v1/user/deleteBookmark"
+const API_URL_GET_SCANNED_GMAILS = "/v1/gmail/getEmails"
+
+// Create an Axios instance
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+});
+
+// Request interceptor to set headers based on env
+apiClient.interceptors.request.use(
+  async (config) => {
+    const token = await fetchIdToken();
+    const userId = await fetchUserId();
+
+    if (ENVIRONMENT === 'production') {
+      if (!config.headers.Authorization) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    } else {
+      if (!config.headers['X-USER-ID']) {
+        config.headers['X-USER-ID'] = userId;
+      }
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
 
 // Define a generic function to handle all types of requests
 export const apiRequest = async (config) => {
   try {
+    console.log("ENVIRONMENT:", ENVIRONMENT);
+    
     console.log(`API Call - ${config.method.toUpperCase()}:`, config.url, config.data || '');
     console.log(config);
-    
-    const response = await axios(config);
+    const response = await apiClient(config);
     console.log('API Response:', response.data);
+    
     return response.data;
   } catch (error) {
     if (error.response) {
@@ -37,6 +69,18 @@ export const apiRequest = async (config) => {
   }
 };
 
+// Function to get the token
+const fetchIdToken = async () => {
+  const { tokens } = await fetchAuthSession();
+  return tokens.idToken.toString();
+};
+
+// Function to get the user ID
+const fetchUserId = async () => {
+  const currentUser = await getCurrentUser(); 
+  return currentUser.userId;
+};
+
 export const detectQRCodeType = async (data) => {
   return apiRequest({
     method: 'post',
@@ -69,48 +113,51 @@ export const checkRedirects = async (data) => {
   });
 };
 // GET User's Scanned Histories
-export const getScannedHistories = async (userId: string) => {
+export const getScannedHistories = async () => {
   return apiRequest({
     method: 'get',
-    url: `${API_BASE_URL}${API_URL_GET_HISTORIES}`,
-    headers: { "X-USER-ID": userId },
+    url: `${API_BASE_URL}${API_URL_GET_HISTORIES}`
   });
 };
 // GET All User's Bookmark
-export const getAllUserBookmarks = async (userId: string) => {
+export const getAllUserBookmarks = async () => {
   return apiRequest({
     method: 'get',
     url: `${API_BASE_URL}${API_URL_GET_BOOKMARKS}`,
-    headers: { "X-USER-ID": userId },
   });
 };
 
 // Create Bookmark on QR Code
-export const setBookmark = async (userId: string, qrCodeId: string) => {
+export const setBookmark = async (qrCodeId: string) => {
   return apiRequest({
     method: 'post',
     url: `${API_BASE_URL}${API_URL_SET_BOOKMARK}`,
-    headers: { "X-USER-ID": userId},
     data: { "qrCodeId": qrCodeId }
   });
 };
 
 // Delete single bookmark
-export const deleteBookmark = async (userId: string, qrCodeId: string) => {
+export const deleteBookmark = async (qrCodeId: string) => {
   return apiRequest({
     method: 'put',
     url: `${API_BASE_URL}${API_URL_DELETE_BOOKMARK}`,
-    headers: { "X-USER-ID": userId},
     data: { "qrCodeId": qrCodeId }
   });
 };
 
 // Delete Single Scanned History
-export const deleteScannedHistory = async (userId: string, qrCodeId: string) => {
+export const deleteScannedHistory = async (qrCodeId: string) => {
   return apiRequest({
     method: 'put',
     url: `${API_BASE_URL}${API_URL_DELETE_SCANNED_HISTORY}`,
-    headers: { "X-USER-ID": userId},
     data: { "qrCodeId": qrCodeId }
   });
 };
+
+// GET Scan user's GMAILS
+export const getScannedGmails = async () => {
+  return apiRequest({
+    method: 'get',
+    url: `${API_BASE_URL}${API_URL_GET_SCANNED_GMAILS}`
+  });
+};

app.config.js

@@ -1,10 +1,15 @@
 import 'dotenv/config';
 
+console.log('Current NODE_ENV:', process.env.NODE_ENV);
+console.log('Current BASE_URL:', process.env.BASE_URL);
+console.log('Current ENVFILE:', process.env.ENVFILE);
+
 export default ({ config }) => {
   return {
     ...config,
     extra: {
       API_BASE_URL: process.env.BASE_URL,
+      ENVIRONMENT: process.env.NODE_ENV
     },
   };
 };

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>

index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

ios/Podfile.lock

@@ -13,7 +13,7 @@ PODS:
   - EXJSONUtils (0.13.1)
   - EXManifests (0.14.3):
     - ExpoModulesCore
-  - Expo (51.0.18):
+  - Expo (51.0.24):
     - ExpoModulesCore
   - expo-dev-client (4.0.19):
     - EXManifests
@@ -224,13 +224,13 @@ PODS:
     - Yoga
   - ExpoAsset (10.0.10):
     - ExpoModulesCore
-  - ExpoCamera (15.0.13):
+  - ExpoCamera (15.0.14):
     - ExpoModulesCore
     - ZXingObjC/OneD
     - ZXingObjC/PDF417
   - ExpoFileSystem (17.0.1):
     - ExpoModulesCore
-  - ExpoFont (12.0.7):
+  - ExpoFont (12.0.9):
     - ExpoModulesCore
   - ExpoImageManipulator (12.0.5):
     - EXImageLoader
@@ -240,7 +240,7 @@ PODS:
     - ExpoModulesCore
   - ExpoKeepAwake (13.0.2):
     - ExpoModulesCore
-  - ExpoModulesCore (1.12.18):
+  - ExpoModulesCore (1.12.20):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1217,9 +1217,9 @@ PODS:
     - React-Core
   - react-native-netinfo (11.3.1):
     - React-Core
-  - react-native-safe-area-context (4.10.8):
+  - react-native-safe-area-context (4.10.5):
     - React-Core
-  - react-native-webview (13.10.4):
+  - react-native-webview (13.8.6):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1825,19 +1825,19 @@ SPEC CHECKSUMS:
   EXImageLoader: ab589d67d6c5f2c33572afea9917304418566334
   EXJSONUtils: 30c17fd9cc364d722c0946a550dfbf1be92ef6a4
   EXManifests: c1fab4c3237675e7b0299ea8df0bcb14baca4f42
-  Expo: 56b642d0930789fc847dc7f424d2d599dfe59a5e
+  Expo: 798848eae1daf13363d69790986146b08d0cf92f
   expo-dev-client: bcca43a56437123873b32a36ea31568e4212c1ca
   expo-dev-launcher: ab76344f7a72c7b6bb255280a66202655ecf1965
   expo-dev-menu: 9b9886b383163f14821e624f3eb51a2084491aa2
   expo-dev-menu-interface: be32c09f1e03833050f0ee290dcc86b3ad0e73e4
   ExpoAsset: 323700f291684f110fb55f0d4022a3362ea9f875
-  ExpoCamera: c5be8a28a769c4dee3a02e017e5b55415d9beb2c
+  ExpoCamera: a5d000b22cd7dfd2c5904ed960e549de42c96da0
   ExpoFileSystem: 80bfe850b1f9922c16905822ecbf97acd711dc51
-  ExpoFont: 43b69559cef3d773db57c7ae7edd3cb0aa0dc610
+  ExpoFont: e7f2275c10ca8573c991e007329ad6bf98086485
   ExpoImageManipulator: aea99205c66043a00a0af90e345395637b9902fa
   ExpoImagePicker: 12a420923383ae38dccb069847218f27a3b87816
   ExpoKeepAwake: 3b8815d9dd1d419ee474df004021c69fdd316d08
-  ExpoModulesCore: 30e1ed4659356cb9a84e0e5ddf1d090d735973c1
+  ExpoModulesCore: 5440e96a8ee014f4fd88e77264985fd0a65f5f8c
   ExpoSharing: 8db05dd85081219f75989a3db2c92fe5e9741033
   EXUpdatesInterface: 996527fd7d1a5d271eb523258d603f8f92038f24
   FBLazyVector: 7e977dd099937dc5458851233141583abba49ff2
@@ -1871,8 +1871,8 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
   react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
   react-native-netinfo: bdb108d340cdb41875c9ced535977cac6d2ff321
-  react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
-  react-native-webview: 596fb33d67a3cde5a74bf1f6b4c28d3543477fdd
+  react-native-safe-area-context: a240ad4b683349e48b1d51fed1611138d1bdad97
+  react-native-webview: 05bae3a03a1e4f59568dfc05286c0ebf8954106c
   React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb
   React-NativeModulesApple: 585d1b78e0597de364d259cb56007052d0bda5e5
   React-perflogger: 7bb9ba49435ff66b666e7966ee10082508a203e8

ios/SafeQR/SplashScreen.storyboard

@@ -22,15 +22,12 @@
                                 <rect key="frame" x="0" y="0" width="414" height="736"/>
                             </imageView>
                         </subviews>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                         <constraints>
                             <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="top" secondItem="EXPO-ContainerView" secondAttribute="top" id="1gX-mQ-vu6"/>
                             <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="leading" secondItem="EXPO-ContainerView" secondAttribute="leading" id="6tX-OG-Sck"/>
                             <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="trailing" secondItem="EXPO-ContainerView" secondAttribute="trailing" id="ABX-8g-7v4"/>
                             <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="bottom" secondItem="EXPO-ContainerView" secondAttribute="bottom" id="jkI-2V-eW5"/>
-                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="top" secondItem="EXPO-ContainerView" secondAttribute="top" id="2VS-Uz-0LU"/>
-                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="leading" secondItem="EXPO-ContainerView" secondAttribute="leading" id="LhH-Ei-DKo"/>
-                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="trailing" secondItem="EXPO-ContainerView" secondAttribute="trailing" id="I6l-TP-6fn"/>
-                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="bottom" secondItem="EXPO-ContainerView" secondAttribute="bottom" id="nbp-HC-eaG"/>
                             <constraint firstItem="EXPO-SplashScreen" firstAttribute="top" secondItem="EXPO-ContainerView" secondAttribute="top" id="83fcb9b545b870ba44c24f0feeb116490c499c52"/>
                             <constraint firstItem="EXPO-SplashScreen" firstAttribute="leading" secondItem="EXPO-ContainerView" secondAttribute="leading" id="61d16215e44b98e39d0a2c74fdbfaaa22601b12c"/>
                             <constraint firstItem="EXPO-SplashScreen" firstAttribute="trailing" secondItem="EXPO-ContainerView" secondAttribute="trailing" id="f934da460e9ab5acae3ad9987d5b676a108796c1"/>

metro.config.js

@@ -0,0 +1,7 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+module.exports = config;

package-lock.json

@@ -18,28 +18,29 @@
         "@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",
         "dotenv": "^16.4.5",
-        "expo": "~51.0.17",
-        "expo-camera": "~15.0.13",
+        "expo": "~51.0.24",
+        "expo-camera": "~15.0.14",
         "expo-dev-client": "~4.0.19",
         "expo-image-manipulator": "^12.0.5",
         "expo-image-picker": "~15.0.7",
         "expo-sharing": "~12.0.1",
         "expo-status-bar": "~1.12.1",
         "react": "18.2.0",
-        "react-native": "^0.74.3",
+        "react-native": "0.74.3",
         "react-native-dotenv": "^3.4.11",
         "react-native-gesture-handler": "~2.16.1",
         "react-native-get-random-values": "^1.11.0",
         "react-native-qrcode-svg": "^6.3.1",
         "react-native-reanimated": "~3.10.1",
-        "react-native-safe-area-context": "^4.10.4",
+        "react-native-safe-area-context": "^4.10.5",
         "react-native-screens": "3.31.1",
         "react-native-svg": "15.2.0",
-        "react-native-webview": "^13.10.4",
+        "react-native-webview": "^13.8.6",
         "react-redux": "^9.1.2",
         "redux": "^5.0.1"
       },
@@ -3694,15 +3695,15 @@
       }
     },
     "node_modules/@expo/cli": {
-      "version": "0.18.22",
-      "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.18.22.tgz",
-      "integrity": "sha512-s2VM+QvgjdDHIRskQj2ER6gKK3/rybiEA0snfKJZ7iXHN5sqiUzY7G/+i5wses842hsLQefCjwo/x6tzWNrF2A==",
+      "version": "0.18.26",
+      "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.18.26.tgz",
+      "integrity": "sha512-u9bTTXgcjaTloE9CHwxgrb8Me/Al4jiPykbVQpJydakH3GsIZfHy1zaLc7O39CoLjRz37WWi6Y5ZdgtQw9dCPQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "@expo/code-signing-certificates": "0.0.5",
         "@expo/config": "~9.0.0-beta.0",
-        "@expo/config-plugins": "~8.0.0-beta.0",
+        "@expo/config-plugins": "~8.0.8",
         "@expo/devcert": "^1.0.0",
         "@expo/env": "~0.3.0",
         "@expo/image-utils": "^0.5.0",
@@ -3711,7 +3712,7 @@
         "@expo/osascript": "^2.0.31",
         "@expo/package-manager": "^1.5.0",
         "@expo/plist": "^0.1.0",
-        "@expo/prebuild-config": "7.0.7",
+        "@expo/prebuild-config": "7.0.8",
         "@expo/rudder-sdk-node": "1.1.1",
         "@expo/spawn-async": "^1.7.2",
         "@expo/xcpretty": "^4.3.0",
@@ -3840,9 +3841,9 @@
       }
     },
     "node_modules/@expo/cli/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -3874,13 +3875,13 @@
       }
     },
     "node_modules/@expo/config": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/@expo/config/-/config-9.0.1.tgz",
-      "integrity": "sha512-0tjaXBstTbXmD4z+UMFBkh2SZFwilizSQhW6DlaTMnPG5ezuw93zSFEWAuEC3YzkpVtNQTmYzxAYjxwh6seOGg==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@expo/config/-/config-9.0.3.tgz",
+      "integrity": "sha512-eOTNM8eOC8gZNHgenySRlc/lwmYY1NOgvjwA8LHuvPT7/eUwD93zrxu3lPD1Cc/P6C/2BcVdfH4hf0tLmDxnsg==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "~7.10.4",
-        "@expo/config-plugins": "~8.0.0-beta.0",
+        "@expo/config-plugins": "~8.0.8",
         "@expo/config-types": "^51.0.0-unreleased",
         "@expo/json-file": "^8.3.0",
         "getenv": "^1.0.0",
@@ -3893,9 +3894,9 @@
       }
     },
     "node_modules/@expo/config-plugins": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-8.0.7.tgz",
-      "integrity": "sha512-7xZCWTRA3SFjbLSCx4Rge8gvgaGbkduETrZx+l4r1hiUdFcG5BAt1CwcOYvTYrOy1nkvloIYJxeU/9AwADeevA==",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-8.0.8.tgz",
+      "integrity": "sha512-Fvu6IO13EUw0R9WeqxUO37FkM62YJBNcZb9DyJAOgMz7Ez/vaKQGEjKt9cwT+Q6uirtCATMgaq6VWAW7YW8xXw==",
       "license": "MIT",
       "dependencies": {
         "@expo/config-types": "^51.0.0-unreleased",
@@ -3995,9 +3996,9 @@
       }
     },
     "node_modules/@expo/config-plugins/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -4301,9 +4302,9 @@
       }
     },
     "node_modules/@expo/image-utils/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -4398,9 +4399,9 @@
       }
     },
     "node_modules/@expo/metro-config": {
-      "version": "0.18.8",
-      "resolved": "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.18.8.tgz",
-      "integrity": "sha512-YGpTlVc1/6EPzPbt0LZt92Bwrpjngulup6uHSTRbwn/heMPfFaVv1Y4VE3GAUkx7/Qwu+dTVIV0Kys4pLOAIiw==",
+      "version": "0.18.10",
+      "resolved": "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.18.10.tgz",
+      "integrity": "sha512-HTYQqKfV0JSuRp5aDvrPHezj5udXOWoXqHOjfTSnce2m13j6D0yYXTJNaKRhlgpPBrkg5DL7z1fL3zwDUpLM4w==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.20.0",
@@ -4650,13 +4651,13 @@
       }
     },
     "node_modules/@expo/prebuild-config": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-7.0.7.tgz",
-      "integrity": "sha512-yN7rSINZrBVu7VfFJk0G4U/cAEjCiiyPfXmXsToHVFxWtxn8jrxyyA1JfQH3xMHJs++sqpKR9yVRtb6ZgUNeJA==",
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-7.0.8.tgz",
+      "integrity": "sha512-wH9NVg6HiwF5y9x0TxiMEeBF+ITPGDXy5/i6OUheSrKpPgb0lF1Mwzl/f2fLPXBEpl+ZXOQ8LlLW32b7K9lrNg==",
       "license": "MIT",
       "dependencies": {
         "@expo/config": "~9.0.0-beta.0",
-        "@expo/config-plugins": "~8.0.0-beta.0",
+        "@expo/config-plugins": "~8.0.8",
         "@expo/config-types": "^51.0.0-unreleased",
         "@expo/image-utils": "^0.5.0",
         "@expo/json-file": "^8.3.0",
@@ -4699,9 +4700,9 @@
       }
     },
     "node_modules/@expo/prebuild-config/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -5233,9 +5234,9 @@
       }
     },
     "node_modules/@npmcli/fs/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -7402,6 +7403,25 @@
         "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==",
+      "license": "MIT",
+      "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",
@@ -9711,9 +9731,9 @@
       }
     },
     "node_modules/cacache": {
-      "version": "18.0.3",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-18.0.3.tgz",
-      "integrity": "sha512-qXCd4rh6I07cnDqh8V48/94Tc/WSfj+o3Gn6NZ0aZovS255bUx8O13uKxRFd2eWG0xgsco7+YItQNPaa5E85hg==",
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-18.0.4.tgz",
+      "integrity": "sha512-B+L5iIa9mgcjLbliir2th36yEwPftrzteHYujzsx3dFP/31GCHcIeS8f5MGd80odLOjaOvSpU3EEAmRQptkxLQ==",
       "license": "ISC",
       "dependencies": {
         "@npmcli/fs": "^3.1.0",
@@ -9743,9 +9763,9 @@
       }
     },
     "node_modules/cacache/node_modules/glob": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.3.tgz",
-      "integrity": "sha512-Q38SGlYRpVtDBPSWEylRyctn7uDeTp4NQERTLiCT1FqA9JXPYWqAVmQU6qh4r/zMM5ehxTcbaO8EjhWnvEhmyg==",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -9758,21 +9778,15 @@
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
-      "engines": {
-        "node": ">=18"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/cacache/node_modules/lru-cache": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.1.tgz",
-      "integrity": "sha512-9/8QXrtbGeMB6LxwQd4x1tIMnsmUxMvIH/qWGsccz6bt9Uln3S+sgAaqfQNhbGA8ufzs2fHuP/yqapGgP9Hh2g==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=18"
-      }
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
     },
     "node_modules/cacache/node_modules/minimatch": {
       "version": "9.0.5",
@@ -11173,24 +11187,24 @@
       }
     },
     "node_modules/expo": {
-      "version": "51.0.18",
-      "resolved": "https://registry.npmjs.org/expo/-/expo-51.0.18.tgz",
-      "integrity": "sha512-QiaNq2XXjfDk009qbyBFd/5CNikcQ0ZucGlOB3ebNf3z9Q9wrfL1A9E4NqPh6sgm0VG486AYT9mNKwAfcOVCIA==",
+      "version": "51.0.24",
+      "resolved": "https://registry.npmjs.org/expo/-/expo-51.0.24.tgz",
+      "integrity": "sha512-HoOuNIWXzS6Gxifcb0N+qRt5K6iR9YitQaWIVNB8elyupvQdyI566IMgMBiO45NgpO5es0sfFNNBasxBHLkbUw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
-        "@expo/cli": "0.18.22",
-        "@expo/config": "9.0.1",
-        "@expo/config-plugins": "8.0.7",
-        "@expo/metro-config": "0.18.8",
+        "@expo/cli": "0.18.26",
+        "@expo/config": "9.0.3",
+        "@expo/config-plugins": "8.0.8",
+        "@expo/metro-config": "0.18.10",
         "@expo/vector-icons": "^14.0.0",
         "babel-preset-expo": "~11.0.12",
         "expo-asset": "~10.0.10",
         "expo-file-system": "~17.0.1",
-        "expo-font": "~12.0.7",
+        "expo-font": "~12.0.9",
         "expo-keep-awake": "~13.0.2",
         "expo-modules-autolinking": "1.11.1",
-        "expo-modules-core": "1.12.18",
+        "expo-modules-core": "1.12.20",
         "fbemitter": "^3.0.0",
         "whatwg-url-without-unicode": "8.0.0-3"
       },
@@ -11213,9 +11227,9 @@
       }
     },
     "node_modules/expo-camera": {
-      "version": "15.0.13",
-      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-15.0.13.tgz",
-      "integrity": "sha512-EhGk1hkc0dgKqtQIw9SX31cl9t+ffDBfMCma+0qvSBnEkcfDQImrDDHSODknQrq6yNQDT9w3LqH5ZouG0m9pJQ==",
+      "version": "15.0.14",
+      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-15.0.14.tgz",
+      "integrity": "sha512-O4uvVywGsQ3a89d0BX4lq6mDuGYGukx1PYY4QrC9zw1yzD2W9BVTl8lanFRPC5h4PRniekfeWUVH1a0jJmkLIw==",
       "license": "MIT",
       "dependencies": {
         "invariant": "^2.2.4"
@@ -11324,9 +11338,10 @@
       }
     },
     "node_modules/expo-font": {
-      "version": "12.0.7",
-      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-12.0.7.tgz",
-      "integrity": "sha512-rbSdpjtT/A3M+u9xchR9tdD+5VGSxptUis7ngX5zfAVp3O5atOcPNSA82Jeo15HkrQE+w/upfFBOvi56lsGdsQ==",
+      "version": "12.0.9",
+      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-12.0.9.tgz",
+      "integrity": "sha512-seTCyf0tbgkAnp3ZI9ZfK9QVtURQUgFnuj+GuJ5TSnN0XsOtVe1s2RxTvmMgkfuvfkzcjJ69gyRpsZS1cC8hjw==",
+      "license": "MIT",
       "dependencies": {
         "fontfaceobserver": "^2.1.0"
       },
@@ -11515,9 +11530,9 @@
       }
     },
     "node_modules/expo-modules-core": {
-      "version": "1.12.18",
-      "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.12.18.tgz",
-      "integrity": "sha512-YhIOJsMNjPvP0tmTbC1MRlxl5q7l21uQQDr1rlXEWHNmI2AEMW0gfr2wXrlB2Tz/oOIx8YqREsj3i0VsYXEaCA==",
+      "version": "1.12.20",
+      "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.12.20.tgz",
+      "integrity": "sha512-CCXjlgT8lDAufgt912P1W7TwD+KAylfIttc1Doh1a0hAfkdkUsDRmrgthnYrrxEo2ECVpbaB71Epp1bnZ1rRrA==",
       "license": "MIT",
       "dependencies": {
         "invariant": "^2.2.4"
@@ -11764,7 +11779,8 @@
     "node_modules/fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
-      "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg=="
+      "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==",
+      "license": "BSD-2-Clause"
     },
     "node_modules/for-each": {
       "version": "0.3.3",
@@ -15672,9 +15688,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "version": "8.4.40",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
+      "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -16373,9 +16389,9 @@
       }
     },
     "node_modules/react-native-safe-area-context": {
-      "version": "4.10.8",
-      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.10.8.tgz",
-      "integrity": "sha512-Jx1lovhvIdYygg0UsMCBUJN0Wvj9GlA5bbcBLzjZf93uJpNHzaiHC4hR280+sNVK1+/pMHEyEkXVHDZE5JWn0w==",
+      "version": "4.10.5",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.10.5.tgz",
+      "integrity": "sha512-Wyb0Nqw2XJ6oZxW/cK8k5q7/UAhg/wbEG6UVf89rQqecDZTDA5ic//P9J6VvJRVZerzGmxWQpVuM7f+PRYUM4g==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*",
@@ -16440,9 +16456,10 @@
       }
     },
     "node_modules/react-native-webview": {
-      "version": "13.10.4",
-      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.10.4.tgz",
-      "integrity": "sha512-kRn70M7vyBS3IDaX2KqyF66ovUkrBS6LiHOgrEmRdZFO0i3hYY0wldEv1fJuKvgQIPMfo7GtGAjozFrk2vQdBw==",
+      "version": "13.8.6",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.8.6.tgz",
+      "integrity": "sha512-jtZ9OgB2AN6rhDwto6dNL3PtOtl/SI4VN93pZEPbMLvRjqHfxiUrilGllL5fKAXq5Ry5FJyfUi82A4Ii8olZ7A==",
+      "license": "MIT",
       "dependencies": {
         "escape-string-regexp": "2.0.0",
         "invariant": "2.2.4"

package.json

@@ -1,14 +1,15 @@
 {
   "name": "safeqr",
   "version": "1.0.0",
-  "main": "expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
-    "android:dev": "ENVFILE=.env.development expo run:android",
-    "android:prod": "ENVFILE=.env.production expo run:android",
-    "ios:dev": "ENVFILE=.env.development expo run:ios",
-    "ios:prod": "ENVFILE=.env.production expo run:ios",
-    "web": "expo start --web"
+    "start": "expo start --dev-client",
+    "android:dev": "NODE_ENV=development ENVFILE=.env.development expo run:android",
+    "android:prod": "NODE_ENV=production ENVFILE=.env.production expo run:android",
+    "ios:dev": "NODE_ENV=development ENVFILE=.env.development expo run:ios",
+    "ios:prod": "NODE_ENV=production ENVFILE=.env.production expo run:ios",
+    "web": "expo start --web",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   },
   "dependencies": {
     "@aws-amplify/auth": "^6.3.10",
@@ -21,28 +22,29 @@
     "@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",
     "dotenv": "^16.4.5",
-    "expo": "~51.0.17",
-    "expo-camera": "~15.0.13",
+    "expo": "~51.0.24",
+    "expo-camera": "~15.0.14",
     "expo-dev-client": "~4.0.19",
     "expo-image-manipulator": "^12.0.5",
     "expo-image-picker": "~15.0.7",
     "expo-sharing": "~12.0.1",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
-    "react-native": "^0.74.3",
+    "react-native": "0.74.3",
     "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-qrcode-svg": "^6.3.1",
     "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "^4.10.4",
+    "react-native-safe-area-context": "^4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
-    "react-native-webview": "^13.10.4",
+    "react-native-webview": "^13.8.6",
     "react-redux": "^9.1.2",
     "redux": "^5.0.1"
   },

reducers/qrCodesReducer.ts

@@ -18,7 +18,7 @@ export const toggleBookmark = createAsyncThunk(
   'qrCodes/toggleBookmark',
   async ({ userId, qrCode }: { userId: string, qrCode: QRCodeType }, { dispatch, rejectWithValue }) => {
     try {
-      await (qrCode.bookmarked ? deleteBookmark(userId, qrCode.data.id) : setBookmark(userId, qrCode.data.id));
+      await (qrCode.bookmarked ? deleteBookmark(qrCode.data.id) : setBookmark(qrCode.data.id));
       // Dispatch the action to update local state
       dispatch(toggleBookmarkInState(qrCode));
       return qrCode;
@@ -33,7 +33,7 @@ export const deleteQRCode = createAsyncThunk(
   'qrCodes/deleteQRCode',
   async ({ userId, qrCodeId }: { userId: string, qrCodeId: string }, { dispatch, rejectWithValue }) => {
     try {
-      await deleteScannedHistory(userId, qrCodeId);
+      await deleteScannedHistory(qrCodeId);
       dispatch(deleteQRCodeInState(qrCodeId));
       return qrCodeId;
     } catch (error) {

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/HistoryScreen.tsx

@@ -25,7 +25,7 @@ const HistoryScreen: React.FC = () => {
 
     try {
       setHistoriesLoading(true);
-      const historiesData = await getScannedHistories(userAttributes.sub);
+      const historiesData = await getScannedHistories();
       dispatch(setScannedHistories(historiesData));
 
       setHistoriesLoading(false);

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;