ios: header home

app/(application)/home.tsx

@@ -7,19 +7,23 @@ import EventHome from "@/components/home/eventHome";
 import FiturHome from "@/components/home/fiturHome";
 import { HeaderRightHome } from "@/components/home/headerRightHome";
 import ProjectHome from "@/components/home/projectHome";
+import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { Stack } from "expo-router";
 import { useEffect } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Platform, SafeAreaView, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch, useSelector } from "react-redux";
 
+
 export default function Home() {
    const entities = useSelector((state: any) => state.entities)
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
+   const insets = useSafeAreaInsets();
 
    useEffect(() => {
       handleUserLogin()
@@ -35,10 +39,13 @@ export default function Home() {
          <Stack.Screen
             options={{
                title: 'Home',
-               headerLeft: () => <></>,
                headerTitle: entities.village,
-               headerRight: () => <HeaderRightHome />,
+               header: () => (
-               headerTitleAlign: 'left',
+                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: '#19345E', paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
+                     <Text style={Styles.textHeaderHome}>{entities.village}</Text>
+                     <HeaderRightHome />
+                  </View>
+               ),
             }}
          />
          <ScrollView>

constants/Styles.ts

@@ -7,6 +7,12 @@ const Styles = StyleSheet.create({
       alignItems: "stretch",
       padding: 20,
    },
+   textHeaderHome: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      flex: 1,
+      color: 'white'
+   },
    textDefault: {
       fontSize: 15,
       lineHeight: 24,
@@ -62,7 +68,7 @@ const Styles = StyleSheet.create({
    cDefault: {
       color: '#19345E'
    },
-   cFolder:{
+   cFolder: {
       color: '#f9cc40'
    },
    mb05: {
@@ -134,6 +140,21 @@ const Styles = StyleSheet.create({
    ml25: {
       marginLeft: 25
    },
+   pb05: {
+      paddingBottom: 5
+   },
+   pb07: {
+      paddingBottom: 7
+   },
+   pb10: {
+      paddingBottom: 10
+   },
+   pb13: {
+      paddingBottom: 13
+   },
+   pb15: {
+      paddingBottom: 15
+   },
    ph05: {
       paddingHorizontal: 5,
    },
@@ -143,6 +164,9 @@ const Styles = StyleSheet.create({
    ph15: {
       paddingHorizontal: 15,
    },
+   ph20: {
+      paddingHorizontal: 20,
+   },
    pv05: {
       paddingVertical: 5
    },