Refactor API base URL handling for dynamic environment detection; update navigation stacks and integrate SafeAreaProvider for improved layout management across screens.

src/components/API/API.js

@@ -1,4 +1,18 @@
-export const API_BASE_URL = 'http://localhost:3000';
+import Constants from 'expo-constants';
+
+const getBaseUrl = () => {
+    // In Expo Go the debuggerHost is "192.168.x.x:8081" — grab the IP
+    const debuggerHost = Constants.expoGoConfig?.debuggerHost;
+    if (debuggerHost) {
+        const ip = debuggerHost.split(':')[0];
+        return `http://${ip}:3000`;
+    }
+    // Fallback for web / production
+    return 'http://localhost:3000';
+};
+
+export const API_BASE_URL = getBaseUrl();
+//export const API_BASE_URL = 'http://api.bobby.ip-ddns.com'; // Production server URL
 
 const API = {};
 

src/components/layout/BottomNavbar.js

@@ -1,8 +1,11 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const BottomNavbar = ({ navigation, routeName }) => {
 //   Initialisation ------------
 
+    const insets = useSafeAreaInsets();
+
     const tabs = [
         {
             label: 'Map',
@@ -26,7 +29,7 @@ const BottomNavbar = ({ navigation, routeName }) => {
 //   View -----------------------
 
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, {paddingBottom: insets.bottom}]}>
             {tabs.map((tab) => {
                 const isActive = routeName === tab.route;
                 return (
@@ -47,8 +50,8 @@ const styles = StyleSheet.create({
     container: {
         minHeight: 64,
         borderTopWidth: 1,
-        borderTopColor: '#e5e7eb',
-        backgroundColor: '#ffffff',
+        borderTopColor: '#555555',
+        backgroundColor: '#4a4a4a',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-around',
@@ -63,16 +66,16 @@ const styles = StyleSheet.create({
         marginHorizontal: 4,
     },
     tabActive: {
-        backgroundColor: '#eff6ff',
+        backgroundColor: '#5c5c5c',
     },
     tabText: {
-        color: '#374151',
+        color: '#d1d5db',
         fontSize: 12,
         fontWeight: '600',
         textAlign: 'center',
     },
     tabTextActive: {
-        color: '#2563eb',
+        color: '#ffffff',
     },
 });
 

src/components/layout/Screen.js

@@ -1,6 +1,7 @@
 import {StatusBar} from "expo-status-bar";
 import {StyleSheet, View} from "react-native";
 import {useNavigation, useRoute} from "@react-navigation/native";
+import {useSafeAreaInsets} from "react-native-safe-area-context";
 import TopNavbar from "./TopNavbar";
 import BottomNavbar from "./BottomNavbar";
 
@@ -9,6 +10,7 @@ const Screen = ({ children, style }) => {
 
   const navigation = useNavigation();
   const route = useRoute();
+  const insets = useSafeAreaInsets();
 
   const titleMap = {
     GameTypeScreen: "Game Type",
@@ -35,9 +37,9 @@ const Screen = ({ children, style }) => {
   //   View -----------------------
 
   return (
-    <View style={[styles.screen, style]}>
+    <View style={[styles.screen, isAuthScreen && {paddingTop: insets.top, paddingBottom: insets.bottom}]}>
       {!isAuthScreen && <TopNavbar title={pageTitle} showBack={showBack} navigation={navigation} />}
-      <View style={styles.content}>{children}</View>
+      <View style={[styles.content, style]}>{children}</View>
       {!isAuthScreen && <BottomNavbar navigation={navigation} routeName={routeName} />}
       <StatusBar style="light" />
     </View>

src/components/layout/TopNavbar.js

@@ -1,8 +1,12 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {clearSession} from '../../hooks/SessionStore';
 
 const TopNavbar = ({title, showBack, navigation}) => {
 //   Initialisation ------------
+
+    const insets = useSafeAreaInsets();
+
 //   State ----------------------
 //   Handlers -------------------
 
@@ -21,7 +25,7 @@ const TopNavbar = ({title, showBack, navigation}) => {
 //   View -----------------------
 
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, {paddingTop: insets.top}]}>
             <View style={styles.leftSlot}>
                 {showBack ? (
                     <Pressable onPress={handleBack} style={styles.iconButton}>
@@ -43,12 +47,12 @@ const styles = StyleSheet.create({
     container: {
         minHeight: 56,
         borderBottomWidth: 1,
-        borderBottomColor: '#e5e7eb',
+        borderBottomColor: '#333333',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
         paddingHorizontal: 12,
-        backgroundColor: '#ffffff',
+        backgroundColor: '#000000',
     },
     leftSlot: {
         width: 72,
@@ -64,7 +68,7 @@ const styles = StyleSheet.create({
     },
     iconText: {
         fontSize: 20,
-        color: '#111827',
+        color: '#ffffff',
         fontWeight: '700',
     },
     title: {
@@ -72,14 +76,14 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         fontSize: 18,
         fontWeight: '700',
-        color: '#111827',
+        color: '#ffffff',
     },
     logoutButton: {
         paddingVertical: 6,
         paddingHorizontal: 8,
     },
     logoutText: {
-        color: '#2563eb',
+        color: '#ffffff',
         fontSize: 13,
         fontWeight: '600',
     },