Add ScreenHeader component and update page layouts for consistent header usage

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;
+