Add ScreenHeader component and update page layouts for consistent header usage

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',
   },