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.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 style={styles.wrapper}>
+      <ScreenHeader title="Select Game Type" />
+      <View style={styles.container}>
+        {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,37 +20,36 @@ const JoinPrivateGamePage = () => {
   };
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Join Private Game</Text>
-      <TextInput
-        style={styles.input}
-        placeholder="Enter Join Code"
-        autoCapitalize="characters"
-        maxLength={6}
-        value={joinCode}
-        onChangeText={setJoinCode}
-      />
-      <Pressable style={styles.button} onPress={handleJoinGame}>
-        <Text style={styles.buttonText}>{submitting ? 'Joining...' : 'Join Game'}</Text>
-      </Pressable>
-      {!!error && <Text style={styles.errorText}>{error}</Text>}
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Join Private Game" />
+      <View style={styles.container}>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter Join Code"
+          autoCapitalize="characters"
+          maxLength={6}
+          value={joinCode}
+          onChangeText={setJoinCode}
+        />
+        <Pressable style={styles.button} onPress={handleJoinGame}>
+          <Text style={styles.buttonText}>{submitting ? 'Joining...' : 'Join Game'}</Text>
+        </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,49 +31,48 @@ const LoginPage = () => {
   };
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Login</Text>
-      <TextInput
-        style={styles.input}
-        placeholder="Email"
-        autoCapitalize="none"
-        keyboardType="email-address"
-        value={email}
-        onChangeText={setEmail}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Password"
-        secureTextEntry
-        value={password}
-        onChangeText={setPassword}
-      />
-      <View style={styles.row}>
-        <Pressable style={styles.leftButton} onPress={() => navigation.navigate('(routes)/register')}>
-          <Text style={styles.buttonText}>Register</Text>
-        </Pressable>
-        <Pressable style={styles.rightButton} onPress={handleLogin}>
-          <Text style={styles.buttonText}>{submitting ? 'Logging in...' : 'Login'}</Text>
-        </Pressable>
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Login" />
+      <View style={styles.container}>
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+          value={email}
+          onChangeText={setEmail}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          secureTextEntry
+          value={password}
+          onChangeText={setPassword}
+        />
+        <View style={styles.row}>
+          <Pressable style={styles.leftButton} onPress={() => navigation.navigate('(routes)/register')}>
+            <Text style={styles.buttonText}>Register</Text>
+          </Pressable>
+          <Pressable style={styles.rightButton} onPress={handleLogin}>
+            <Text style={styles.buttonText}>{submitting ? 'Logging in...' : 'Login'}</Text>
+          </Pressable>
+        </View>
+        {!!error && <Text style={styles.errorText}>{error}</Text>}
       </View>
-      {!!error && <Text style={styles.errorText}>{error}</Text>}
     </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.container}>
-      <Text style={styles.title}>Manage Private Game</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>
-      {!!error && <Text style={styles.errorText}>{error}</Text>}
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Manage Private Game" />
+      <View style={styles.container}>
+        <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.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: {
-    fontSize: 26,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
+  adminJoinSection: {
+    marginTop: 14,
+    gap: 12,
+  },
+  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,63 +33,64 @@ const RegisterPage = () => {
   };
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Register</Text>
-      <TextInput style={styles.input} placeholder="Username" value={username} onChangeText={setUsername} />
-      <TextInput
-        style={styles.input}
-        placeholder="Email"
-        autoCapitalize="none"
-        keyboardType="email-address"
-        value={email}
-        onChangeText={setEmail}
-      />
-      <TextInput style={styles.input} placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
-      <TextInput
-        style={styles.input}
-        placeholder="Confirm Password"
-        value={confirmPassword}
-        onChangeText={setConfirmPassword}
-        secureTextEntry
-      />
-      <View style={styles.typeRow}>
-        <Pressable
-          style={[styles.typeButton, accountType === 'Individual' && styles.typeButtonActive]}
-          onPress={() => setAccountType('Individual')}
-        >
-          <Text style={[styles.typeText, accountType === 'Individual' && styles.typeTextActive]}>Individual</Text>
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Register" />
+      <View style={styles.container}>
+        <TextInput style={styles.input} placeholder="Username" value={username} onChangeText={setUsername} />
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+          value={email}
+          onChangeText={setEmail}
+        />
+        <TextInput style={styles.input} placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
+        <TextInput
+          style={styles.input}
+          placeholder="Confirm Password"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+        />
+        <View style={styles.typeRow}>
+          <Pressable
+            style={[styles.typeButton, accountType === 'Individual' && styles.typeButtonActive]}
+            onPress={() => setAccountType('Individual')}
+          >
+            <Text style={[styles.typeText, accountType === 'Individual' && styles.typeTextActive]}>Individual</Text>
+          </Pressable>
+          <Pressable
+            style={[styles.typeButton, accountType === 'Business/School' && styles.typeButtonActive]}
+            onPress={() => setAccountType('Business/School')}
+          >
+            <Text style={[styles.typeText, accountType === 'Business/School' && styles.typeTextActive]}>Business/School</Text>
+          </Pressable>
+        </View>
+        <Pressable style={styles.submitButton} onPress={handleRegister}>
+          <Text style={styles.submitText}>{submitting ? 'Creating...' : 'Create Account'}</Text>
         </Pressable>
-        <Pressable
-          style={[styles.typeButton, accountType === 'Business/School' && styles.typeButtonActive]}
-          onPress={() => setAccountType('Business/School')}
-        >
-          <Text style={[styles.typeText, accountType === 'Business/School' && styles.typeTextActive]}>Business/School</Text>
+        <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>
       </View>
-      <Pressable style={styles.submitButton} onPress={handleRegister}>
-        <Text style={styles.submitText}>{submitting ? 'Creating...' : 'Create Account'}</Text>
-      </Pressable>
-      <Pressable onPress={() => navigation.navigate('(routes)/login')}>
-        <Text style={styles.backText}>Back to Login</Text>
-      </Pressable>
-      {!!error && <Text style={styles.errorText}>{error}</Text>}
     </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.Screen name="(routes)/index" options={{ headerShown: false }} />
-      <Stack.Screen name="(routes)/login" options={{ title: "Login" }} />
-      <Stack.Screen name="(routes)/register" options={{ title: "Register" }} />
-      <Stack.Screen name="(routes)/game-type" options={{ title: "Select Game Type" }} />
-      <Stack.Screen name="(routes)/join-private-game" options={{ title: "Join Private Game" }} />
-      <Stack.Screen name="(routes)/manage-private-subtask" options={{ title: "Manage Private Game" }} />
-      <Stack.Screen name="(routes)/game-lobby" options={{ title: "Game Lobby" }} />
-      <Stack.Screen name="(routes)/team" options={{ title: "Team" }} />
-      <Stack.Screen name="(routes)/map" options={{ title: "Map" }} />
-      <Stack.Screen name="(routes)/admin-hub" options={{ title: "Admin Hub" }} />
-      <Stack.Screen name="(routes)/manage-subgroups" options={{ title: "Manage Subgroups" }} />
+    <Stack initialRouteName="(routes)/index" screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="(routes)/index" />
+      <Stack.Screen name="(routes)/login" />
+      <Stack.Screen name="(routes)/register" />
+      <Stack.Screen name="(routes)/game-type" />
+      <Stack.Screen name="(routes)/join-private-game" />
+      <Stack.Screen name="(routes)/manage-private-subtask" />
+      <Stack.Screen name="(routes)/game-lobby" />
+      <Stack.Screen name="(routes)/team" />
+      <Stack.Screen name="(routes)/map" />
+      <Stack.Screen name="(routes)/admin-hub" />
+      <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;
+