Add ScreenHeader component and update page layouts for consistent header usage

app/Screens/AdminHubPage.jsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import AdminFooterNavbar from '../components/AdminFooterNavbar';
 import useAdminViewModel from '../ViewModel/useAdminViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const AdminHubPage = () => {
   const navigation = useNavigation();
@@ -20,8 +21,8 @@ const AdminHubPage = () => {
 
   return (
     <View style={styles.wrapper}>
+      <ScreenHeader title="Admin Hub" />
       <View style={styles.container}>
-        <Text style={styles.title}>Admin Hub</Text>
         <Pressable style={styles.button} onPress={handleCreateGame}>
           <Text style={styles.buttonText}>Create a Game</Text>
         </Pressable>
@@ -48,12 +49,6 @@ const styles = StyleSheet.create({
     padding: 20,
     gap: 12,
   },
-  title: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
-  },
   button: {
     backgroundColor: '#2563eb',
     borderRadius: 8,

app/Screens/GameLobbyPage.jsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable, TextInput, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import MemberFooterNavbar from '../components/MemberFooterNavbar';
 import useLobbyViewModel from '../ViewModel/useLobbyViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const GameLobbyPage = () => {
   const navigation = useNavigation();
@@ -31,8 +32,8 @@ const GameLobbyPage = () => {
 
   return (
     <View style={styles.wrapper}>
+      <ScreenHeader title="Game Lobby" />
       <View style={styles.container}>
-        <Text style={styles.title}>Game Lobby</Text>
         <TextInput
           style={styles.input}
           placeholder="Join Team Code"
@@ -68,12 +69,6 @@ const styles = StyleSheet.create({
     padding: 20,
     gap: 12,
   },
-  title: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
-  },
   input: {
     borderWidth: 1,
     borderColor: '#d1d5db',

app/Screens/GameTypePage.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import useGameTypeViewModel from '../ViewModel/useGameTypeViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const GameTypePage = () => {
   const navigation = useNavigation();
@@ -20,30 +21,29 @@ const GameTypePage = () => {
   };
 
   return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Select Game Type" />
       <View style={styles.container}>
-      <Text style={styles.title}>Select Game Type</Text>
         {gameTypes.map((label) => (
           <Pressable key={label} style={styles.button} onPress={() => navigateByType(label)}>
             <Text style={styles.buttonText}>{label}</Text>
           </Pressable>
         ))}
       </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
     padding: 20,
     gap: 12,
-    backgroundColor: '#ffffff',
-  },
-  title: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
   },
   button: {
     backgroundColor: '#2563eb',

app/Screens/JoinPrivateGamePage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import usePrivateGameViewModel from '../ViewModel/usePrivateGameViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const JoinPrivateGamePage = () => {
   const navigation = useNavigation();
@@ -19,8 +20,9 @@ const JoinPrivateGamePage = () => {
   };
 
   return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Join Private Game" />
       <View style={styles.container}>
-      <Text style={styles.title}>Join Private Game</Text>
         <TextInput
           style={styles.input}
           placeholder="Enter Join Code"
@@ -34,22 +36,20 @@ const JoinPrivateGamePage = () => {
         </Pressable>
         {!!error && <Text style={styles.errorText}>{error}</Text>}
       </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
     padding: 20,
     gap: 12,
-    backgroundColor: '#ffffff',
-  },
-  title: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
   },
   input: {
     borderWidth: 1,

app/Screens/LoginPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import useAuthViewModel from '../ViewModel/useAuthViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const LoginPage = () => {
   const navigation = useNavigation();
@@ -30,8 +31,9 @@ const LoginPage = () => {
   };
 
   return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Login" />
       <View style={styles.container}>
-      <Text style={styles.title}>Login</Text>
         <TextInput
           style={styles.input}
           placeholder="Email"
@@ -57,22 +59,20 @@ const LoginPage = () => {
         </View>
         {!!error && <Text style={styles.errorText}>{error}</Text>}
       </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
   container: {
     flex: 1,
     padding: 20,
     justifyContent: 'center',
     gap: 12,
-    backgroundColor: '#ffffff',
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: '700',
-    marginBottom: 8,
-    color: '#111827',
   },
   input: {
     borderWidth: 1,

app/Screens/ManagePrivateSubtaskPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import useManagePrivateSubtaskViewModel from '../ViewModel/useManagePrivateSubtaskViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const ManagePrivateSubtaskPage = () => {
   const navigation = useNavigation();
@@ -35,38 +36,48 @@ const ManagePrivateSubtaskPage = () => {
   };
 
   return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Manage Private Game" />
       <View style={styles.container}>
-      <Text style={styles.title}>Manage Private Game</Text>
+        <Pressable style={styles.primaryButton} onPress={handleCreate}>
+          <Text style={styles.buttonText}>{submitting ? 'Please wait...' : 'Create New Private Game'}</Text>
+        </Pressable>
+        <View style={styles.adminJoinSection}>
+          <Text style={styles.helperText}>Business/School Name is only required for admin join.</Text>
           <TextInput
             style={styles.input}
             placeholder="Business/School Name"
             value={businessOrSchoolName}
             onChangeText={setBusinessOrSchoolName}
           />
-      <Pressable style={styles.primaryButton} onPress={handleCreate}>
-        <Text style={styles.buttonText}>{submitting ? 'Please wait...' : 'Create New Private Game'}</Text>
-      </Pressable>
           <Pressable style={styles.secondaryButton} onPress={handleJoinAdmin}>
             <Text style={styles.buttonText}>Join as Admin for Private Game</Text>
           </Pressable>
+        </View>
         {!!error && <Text style={styles.errorText}>{error}</Text>}
       </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
     gap: 12,
     padding: 20,
-    backgroundColor: '#ffffff',
   },
-  title: {
+  adminJoinSection: {
-    fontSize: 26,
+    marginTop: 14,
-    fontWeight: '700',
+    gap: 12,
-    color: '#111827',
+  },
-    marginBottom: 8,
+  helperText: {
+    color: '#4b5563',
+    fontSize: 13,
   },
   input: {
     borderWidth: 1,

app/Screens/ManageSubgroupsPage.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
 import useSubgroupAdminViewModel from '../ViewModel/useSubgroupAdminViewModel';
 import AdminFooterNavbar from '../components/AdminFooterNavbar';
+import ScreenHeader from '../components/ScreenHeader';
 
 const ManageSubgroupsPage = () => {
   const {
@@ -17,8 +18,8 @@ const ManageSubgroupsPage = () => {
 
   return (
     <View style={styles.wrapper}>
+      <ScreenHeader title="Manage Subgroups" />
       <View style={styles.container}>
-        <Text style={styles.title}>Manage Subgroups</Text>
         {subgroups.map((subgroup) => (
           <View key={`${subgroup.Gid}_${subgroup.SGid}`} style={styles.row}>
             <Text style={styles.rowText}>
@@ -65,11 +66,6 @@ const styles = StyleSheet.create({
     gap: 10,
     padding: 20,
   },
-  title: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#111827',
-  },
   row: {
     borderWidth: 1,
     borderColor: '#d1d5db',

app/Screens/MapPage.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import MemberFooterNavbar from '../components/MemberFooterNavbar';
 import useMapViewModel from '../ViewModel/useMapViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const MapPage = () => {
   const { points } = useMapViewModel();
 
   return (
     <View style={styles.wrapper}>
+      <ScreenHeader title="Map" />
       <View style={styles.container}>
-        <Text style={styles.title}>Map Page</Text>
         <Text style={styles.body}>Map and hunt markers appear here.</Text>
         <Text style={styles.body}>Points loaded: {points.length}</Text>
       </View>
@@ -30,11 +31,6 @@ const styles = StyleSheet.create({
     padding: 20,
     gap: 6,
   },
-  title: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-  },
   body: {
     color: '#4b5563',
   },

app/Screens/RegisterPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import useAuthViewModel from '../ViewModel/useAuthViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const RegisterPage = () => {
   const navigation = useNavigation();
@@ -32,8 +33,9 @@ const RegisterPage = () => {
   };
 
   return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Register" />
       <View style={styles.container}>
-      <Text style={styles.title}>Register</Text>
         <TextInput style={styles.input} placeholder="Username" value={username} onChangeText={setUsername} />
         <TextInput
           style={styles.input}
@@ -68,27 +70,27 @@ const RegisterPage = () => {
         <Pressable style={styles.submitButton} onPress={handleRegister}>
           <Text style={styles.submitText}>{submitting ? 'Creating...' : 'Create Account'}</Text>
         </Pressable>
+        <View style={styles.errorSlot}>
+          <Text style={[styles.errorText, !error && styles.errorHidden]}>{error || ' '}</Text>
+        </View>
         <Pressable onPress={() => navigation.navigate('(routes)/login')}>
           <Text style={styles.backText}>Back to Login</Text>
         </Pressable>
-      {!!error && <Text style={styles.errorText}>{error}</Text>}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
   container: {
     flex: 1,
     padding: 20,
     justifyContent: 'center',
     gap: 12,
-    backgroundColor: '#ffffff',
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
   },
   input: {
     borderWidth: 1,
@@ -135,10 +137,17 @@ const styles = StyleSheet.create({
     color: '#2563eb',
     fontWeight: '600',
   },
+  errorSlot: {
+    minHeight: 20,
+    justifyContent: 'center',
+  },
   errorText: {
     textAlign: 'center',
     color: '#dc2626',
   },
+  errorHidden: {
+    opacity: 0,
+  },
 });
 
 export default RegisterPage;

app/Screens/TeamPage.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import MemberFooterNavbar from '../components/MemberFooterNavbar';
 import useTeamViewModel from '../ViewModel/useTeamViewModel';
+import ScreenHeader from '../components/ScreenHeader';
 
 const TeamPage = () => {
   const { team } = useTeamViewModel();
 
   return (
     <View style={styles.wrapper}>
+      <ScreenHeader title="Team" />
       <View style={styles.container}>
-        <Text style={styles.title}>Team Page</Text>
         <Text style={styles.body}>Team details and members appear here.</Text>
         <Text style={styles.body}>{team?.team?.TeamName || 'No team joined yet'}</Text>
       </View>
@@ -30,11 +31,6 @@ const styles = StyleSheet.create({
     padding: 20,
     gap: 6,
   },
-  title: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-  },
   body: {
     color: '#4b5563',
   },

app/_layout.tsx

@@ -2,18 +2,18 @@ import { Stack } from "expo-router";
 
 export default function RootLayout() {
   return (
-    <Stack initialRouteName="(routes)/index">
+    <Stack initialRouteName="(routes)/index" screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="(routes)/index" options={{ headerShown: false }} />
+      <Stack.Screen name="(routes)/index" />
-      <Stack.Screen name="(routes)/login" options={{ title: "Login" }} />
+      <Stack.Screen name="(routes)/login" />
-      <Stack.Screen name="(routes)/register" options={{ title: "Register" }} />
+      <Stack.Screen name="(routes)/register" />
-      <Stack.Screen name="(routes)/game-type" options={{ title: "Select Game Type" }} />
+      <Stack.Screen name="(routes)/game-type" />
-      <Stack.Screen name="(routes)/join-private-game" options={{ title: "Join Private Game" }} />
+      <Stack.Screen name="(routes)/join-private-game" />
-      <Stack.Screen name="(routes)/manage-private-subtask" options={{ title: "Manage Private Game" }} />
+      <Stack.Screen name="(routes)/manage-private-subtask" />
-      <Stack.Screen name="(routes)/game-lobby" options={{ title: "Game Lobby" }} />
+      <Stack.Screen name="(routes)/game-lobby" />
-      <Stack.Screen name="(routes)/team" options={{ title: "Team" }} />
+      <Stack.Screen name="(routes)/team" />
-      <Stack.Screen name="(routes)/map" options={{ title: "Map" }} />
+      <Stack.Screen name="(routes)/map" />
-      <Stack.Screen name="(routes)/admin-hub" options={{ title: "Admin Hub" }} />
+      <Stack.Screen name="(routes)/admin-hub" />
-      <Stack.Screen name="(routes)/manage-subgroups" options={{ title: "Manage Subgroups" }} />
+      <Stack.Screen name="(routes)/manage-subgroups" />
     </Stack>
   );
 }

app/components/AdminFooterNavbar.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { View, Pressable, Text, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const AdminFooterNavbar = () => {
   const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { paddingBottom: Math.max(insets.bottom, 12) + 8 }]}>
       <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/admin-hub')}>
         <Text style={styles.text}>Admin Hub</Text>
       </Pressable>
@@ -24,15 +26,18 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     borderTopWidth: 1,
     borderColor: '#d4d4d8',
     paddingHorizontal: 16,
-    paddingVertical: 10,
+    paddingTop: 14,
     backgroundColor: '#ffffff',
+    minHeight: 86,
   },
   button: {
     flex: 1,
     alignItems: 'center',
+    paddingVertical: 8,
   },
   text: {
     fontSize: 14,

app/components/MemberFooterNavbar.jsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import { View, Pressable, Text, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const MemberFooterNavbar = ({ visible = false }) => {
   const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
 
   if (!visible) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { paddingBottom: Math.max(insets.bottom, 12) + 8 }]}>
       <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/game-lobby')}>
         <Text style={styles.text}>Lobby</Text>
       </Pressable>
@@ -28,15 +30,18 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     borderTopWidth: 1,
     borderColor: '#d4d4d8',
     paddingHorizontal: 16,
-    paddingVertical: 10,
+    paddingTop: 14,
     backgroundColor: '#ffffff',
+    minHeight: 86,
   },
   button: {
     flex: 1,
     alignItems: 'center',
+    paddingVertical: 8,
   },
   text: {
     fontSize: 14,

app/components/ScreenHeader.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const ScreenHeader = ({ title }) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top + 10 }]}>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000000',
+    paddingHorizontal: 16,
+    paddingBottom: 12,
+    minHeight: 72,
+    justifyContent: 'flex-end',
+  },
+  title: {
+    color: '#ffffff',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default ScreenHeader;
+