added header

calblueprint · Dec 7, 2024 · 6ad71c1 · 6ad71c1
1 parent 45a4464
commit 6ad71c1
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/src/navigation/BottomTabNavigator.tsx b/src/navigation/BottomTabNavigator.tsx
@@ -10,10 +10,13 @@ import GreyPREAIcon from 'src/assets/images/prea-grey.svg';
 import OrangePREAIcon from 'src/assets/images/prea-orange.svg';
 import HomeScreen from 'src/screens/Home/';
 import { colors } from 'src/styles/colors';
+import Logo from 'src/assets/images/logo.svg';
 import HealingResourcesNavigator from './stacks/HealingResourcesNavigator';
 import LegalRightsNavigator from './stacks/LegalRightsNavigator';
 import SeekHelpNavigator from './stacks/SeekHelpNavigator';
 import { BottomTabParams } from './types';
+import {View} from 'react-native';
+
 
 const initialRouteName = 'Healing';
 
@@ -26,23 +29,43 @@ export default function NavigationBar() {
       screenOptions={{
         tabBarActiveTintColor: colors.orange,
         tabBarInactiveTintColor: colors.grey,
-        headerShown: false,
+        headerShown: true,
+        headerStyle: {
+          backgroundColor: "#F7F9FC",
+        },
+        headerTitleAlign: 'left', 
+        headerTitleStyle: {
+          fontSize: 20,
+
+          fontWeight: 'bold',
+          color: colors.orange,
+          marginLeft: '2%', 
+        },
+        headerRight: () => (
+          <View style={{ paddingRight:  '2%'}}>
+          <Logo/>
+          </View>
+        ),
+
       }}
     >
       <Tab.Screen
         name="Home"
         component={HomeScreen}
         options={{
-          tabBarLabel: 'Home',
+          headerTitle: '',
           tabBarIcon: ({ focused }) =>
             focused ? <OrangeHomeIcon /> : <GreyHomeIcon />,
         }}
+
       />
       <Tab.Screen
         name="Healing"
         component={HealingResourcesNavigator}
+
         options={{
-          tabBarLabel: 'Healing Resources',
+          headerTitle: 'Healing Resources',
+
           tabBarIcon: ({ focused }) =>
             focused ? (
               <OrangeHealingResourcesIcon />
@@ -55,6 +78,7 @@ export default function NavigationBar() {
         name="Legal"
         component={LegalRightsNavigator}
         options={{
+          headerTitle: 'Legal Rights',
           tabBarLabel: 'Legal Rights',
           tabBarIcon: ({ focused }) =>
             focused ? <OrangePREAIcon /> : <GreyPREAIcon />,

diff --git a/src/navigation/stacks/HealingResourcesNavigator.tsx b/src/navigation/stacks/HealingResourcesNavigator.tsx
@@ -13,14 +13,17 @@ export default function HealingResourcesNavigator() {
       <HealingStack.Screen
         name="HealingResources"
         component={HealingResources}
+
       />
       <HealingStack.Screen
         name="HealingCatalogue"
         component={HealingCatalogue}
+
       />
       <HealingStack.Screen
         name="HopeForHealingGuide"
         component={HopeHealingGuide}
+
       />
     </HealingStack.Navigator>
   );

diff --git a/src/navigation/stacks/LegalRightsNavigator.tsx b/src/navigation/stacks/LegalRightsNavigator.tsx
@@ -9,8 +9,17 @@ const LegalStack = createNativeStackNavigator<LegalStackParams>();
 export default function LegalRightsNavigator() {
   return (
     <LegalStack.Navigator>
-      <LegalStack.Screen name="LegalRights" component={LegalRights} />
-      <LegalStack.Screen name="VideoPage" component={VideoPage} />
+      <LegalStack.Screen 
+      name="LegalRights" 
+      component={LegalRights}
+
+      />
+
+      <LegalStack.Screen 
+      name="VideoPage" 
+      component={VideoPage} 
+
+      />
     </LegalStack.Navigator>
   );
 }
diff --git a/src/navigation/stacks/SeekHelpNavigator.tsx b/src/navigation/stacks/SeekHelpNavigator.tsx
@@ -8,7 +8,11 @@ const SeekHelpStack = createNativeStackNavigator<SeekHelpStackParams>();
 export default function SeekHelpNavigator() {
   return (
     <SeekHelpStack.Navigator>
-      <SeekHelpStack.Screen name="SeekHelp" component={SeekHelp} />
+      <SeekHelpStack.Screen 
+      name="SeekHelp" 
+      component={SeekHelp} 
+
+      />
     </SeekHelpStack.Navigator>
   );
 }