change contants.js

MobileApp/api/constants.js

 // export const BACKEND_URL = "http://192.168.8.103:8000"
 import { Platform } from 'react-native'
 
-export const BACKEND_ADDRESS = Platform.OS == 'web' ? "127.0.0.1:8000" : "0afe-112-134-223-169.ap.ngrok.io"
-export const BACKEND_URL = `http://${BACKEND_ADDRESS}`
+export const BACKEND_ADDRESS = Platform.OS == 'web' ? "http://127.0.0.1:8000" : "https//9845-112-134-223-169.ap.ngrok.io"
+export const BACKEND_URL = `${BACKEND_ADDRESS}`
 

MobileApp/components/UserIcon.jsx

+import React, { useEffect, useState } from 'react'
+import { View, Text, ActivityIndicator } from 'react-native'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+export const UserProfile = () => {
+    const [loading, setLoading] = useState(true)
+    const [username, setUsername] = useState("")
+    const [modalVisible, setModalVisible] = useState(false)
+    useEffect(() => {
+        AsyncStorage.getItem('username').then((username) => {
+            setUsername(username)
+            setLoading(false)
+        })
+    })
+
+    if (loading) {
+        return <ActivityIndicator />
+    }
+    return (
+        <>
+            <Modal
+                animationType="slide"
+                transparent={true}
+                visible={modalVisible}
+                onRequestClose={() => {
+                    Alert.alert('Modal has been closed.');
+                    setModalVisible(!modalVisible);
+                }}>
+                <View style={styles.centeredView}>
+                    <View style={styles.modalView}>
+                        <Text style={styles.modalText}>Hello World!</Text>
+                        <Pressable
+                            style={[styles.button, styles.buttonClose]}
+                            onPress={() => setModalVisible(!modalVisible)}>
+                            <Text style={styles.textStyle}>Hide Modal</Text>
+                        </Pressable>
+                    </View>
+                </View>
+            </Modal>
+        </>
+    )
+}
\ No newline at end of file

MobileApp/navigation/index.jsx

@@ -123,6 +123,7 @@ function BottomTabNavigator({ onLogout }) {
               style={({ pressed }) => ({
                 opacity: pressed ? 0.5 : 1,
               })}>
+                {/* <Text>Logout</Text> */}
               <FontAwesome
                 name="info-circle"
                 size={25}

MobileApp/screens/TabTwoScreen.tsx

+import { StatusBar } from 'expo-status-bar';
 import { StyleSheet } from 'react-native';
 
 import EditScreenInfo from '../components/EditScreenInfo';
@@ -6,6 +7,7 @@ import { Text, View } from '../components/Themed';
 export default function TabTwoScreen() {
   return (
     <View style={styles.container}>
+      <StatusBar />
     
     </View>
   );