added header (#33)

* added header

* header styling

* compartmentalized some more

---------

Co-authored-by: philipye314 <[email protected]>

src/components/BackButton/index.tsx

@@ -0,0 +1,22 @@
+import { Text, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import BackArrow from 'src/assets/images/back-arrow.svg';
+import styles from './styles';
+
+interface BackButtonProps {
+  label: string; // The string prop for the button label
+}
+
+export default function BackButton({ label }: BackButtonProps) {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      onPress={() => navigation.goBack()}
+      style={styles.backContainer}
+    >
+      <BackArrow />
+      <Text style={styles.backText}>{label}</Text>
+    </TouchableOpacity>
+  );
+}

src/components/BackButton/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { colors } from 'src/styles/colors';
+
+export default StyleSheet.create({
+  backContainer: {
+    position: 'absolute',
+    left: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 0,
+  },
+
+  backText: {
+    fontSize: 17,
+    color: colors.grey,
+  },
+});

src/navigation/BottomTabNavigator.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { View } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import GreyHealingResourcesIcon from 'src/assets/images/healing-resources-grey.svg';
 import OrangeHealingResourcesIcon from 'src/assets/images/healing-resources-orange.svg';
 import GreyHelpResourcesIcon from 'src/assets/images/help-resources-grey.svg';
 import OrangeHelpResourcesIcon from 'src/assets/images/help-resources-orange.svg';
 import GreyHomeIcon from 'src/assets/images/home-grey.svg';
 import OrangeHomeIcon from 'src/assets/images/home-orange.svg';
+import Logo from 'src/assets/images/logo.svg';
 import GreyPREAIcon from 'src/assets/images/prea-grey.svg';
 import OrangePREAIcon from 'src/assets/images/prea-orange.svg';
 import HomeScreen from 'src/screens/Home/';
@@ -25,24 +27,38 @@ export default function NavigationBar() {
       initialRouteName={initialRouteName}
       screenOptions={{
         tabBarActiveTintColor: colors.orange,
-        tabBarInactiveTintColor: colors.grey,
         headerShown: false,
       }}
     >
       <Tab.Screen
         name="Home"
         component={HomeScreen}
         options={{
-          tabBarLabel: 'Home',
+          headerTitle: '',
           tabBarIcon: ({ focused }) =>
             focused ? <OrangeHomeIcon /> : <GreyHomeIcon />,
+          headerStyle: {
+            backgroundColor: '#F7F9FC',
+          },
+          headerShown: true,
+          headerTitleAlign: 'left',
+          headerTitleStyle: {
+            fontSize: 20,
+            fontWeight: 'bold',
+            color: colors.orange,
+            marginLeft: '2%',
+          },
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
         }}
       />
       <Tab.Screen
         name="Healing"
         component={HealingResourcesNavigator}
         options={{
-          tabBarLabel: 'Healing Resources',
           tabBarIcon: ({ focused }) =>
             focused ? (
               <OrangeHealingResourcesIcon />

src/navigation/MainNavigator.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import BottomTabNavigator from './BottomTabNavigator';
 
+const Stack = createNativeStackNavigator();
+
 export default function AppNavigator() {
   return (
     <NavigationContainer>

src/navigation/stacks/HealingResourcesNavigator.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
+import { Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Logo from 'src/assets/images/logo.svg';
+import { colors } from 'src/styles/colors';
+import BackButton from '@/components/BackButton';
 import HealingResources from '@/screens/HealingResources';
 import HealingCatalogue from '@/screens/HealingResources/HealingCatalogue';
 import HopeHealingGuide from '@/screens/HealingResources/HopeHealingGuide/';
@@ -13,14 +17,59 @@ export default function HealingResourcesNavigator() {
       <HealingStack.Screen
         name="HealingResources"
         component={HealingResources}
+        options={{
+          headerShown: true,
+          headerTitleAlign: 'left',
+          headerTitle: '',
+          headerStyle: {
+            backgroundColor: colors.background,
+          },
+          headerLeft: () => (
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: 'bold',
+                color: colors.orange,
+                marginLeft: 10,
+              }}
+            >
+              Healing Resources
+            </Text>
+          ),
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
       <HealingStack.Screen
         name="HealingCatalogue"
         component={HealingCatalogue}
+        options={{
+          headerBackTitle: 'Healing Resources',
+          headerTitle: '',
+          headerLeft: () => <BackButton label={'Healing Resources'} />,
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
       <HealingStack.Screen
         name="HopeForHealingGuide"
         component={HopeHealingGuide}
+        options={{
+          headerBackTitle: 'Healing Resources',
+          headerTitle: '',
+          headerLeft: () => <BackButton label={'Healing Resources'} />,
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
     </HealingStack.Navigator>
   );

src/navigation/stacks/LegalRightsNavigator.tsx

@@ -1,16 +1,59 @@
 import React from 'react';
+import { Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Logo from 'src/assets/images/logo.svg';
+import { colors } from 'src/styles/colors';
 import LegalRights from '@/screens/LegalRights';
 import VideoPage from '@/screens/LegalRights/VideoPage';
+import BackButton from '../../components/BackButton';
 import { LegalStackParams } from '../types';
 
 const LegalStack = createNativeStackNavigator<LegalStackParams>();
 
 export default function LegalRightsNavigator() {
   return (
-    <LegalStack.Navigator>
+    <LegalStack.Navigator
+      screenOptions={{
+        headerShown: true,
+        headerTitleAlign: 'left',
+        headerTitle: '',
+        headerStyle: {
+          backgroundColor: colors.background,
+        },
+        headerLeft: () => (
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: 'bold',
+              color: colors.orange,
+              marginLeft: 10,
+            }}
+          >
+            Legal Rights
+          </Text>
+        ),
+        headerRight: () => (
+          <View style={{ paddingRight: '2%' }}>
+            <Logo />
+          </View>
+        ),
+      }}
+    >
       <LegalStack.Screen name="LegalRights" component={LegalRights} />
-      <LegalStack.Screen name="VideoPage" component={VideoPage} />
+      <LegalStack.Screen
+        name="VideoPage"
+        component={VideoPage}
+        options={{
+          headerBackTitle: 'Legal Rights',
+          headerTitle: '',
+          headerLeft: () => <BackButton label={'Legal Rights'} />,
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
+      />
     </LegalStack.Navigator>
   );
 }

src/navigation/stacks/SeekHelpNavigator.tsx

@@ -1,13 +1,44 @@
 import React from 'react';
+import { Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Logo from 'src/assets/images/logo.svg';
+import { colors } from 'src/styles/colors';
 import SeekHelp from '@/screens/SeekHelp';
 import { SeekHelpStackParams } from '../types';
 
 const SeekHelpStack = createNativeStackNavigator<SeekHelpStackParams>();
 
 export default function SeekHelpNavigator() {
   return (
-    <SeekHelpStack.Navigator>
+    <SeekHelpStack.Navigator
+      screenOptions={{
+        headerShown: true,
+        headerTitleAlign: 'left',
+        headerTitle: '',
+
+        headerLeft: () => (
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: 'bold',
+              color: colors.orange,
+              marginLeft: 10,
+            }}
+          >
+            Seek Help
+          </Text>
+        ),
+        headerStyle: {
+          backgroundColor: colors.background,
+        },
+
+        headerRight: () => (
+          <View style={{ paddingRight: '2%' }}>
+            <Logo />
+          </View>
+        ),
+      }}
+    >
       <SeekHelpStack.Screen name="SeekHelp" component={SeekHelp} />
     </SeekHelpStack.Navigator>
   );

src/styles/colors.ts

@@ -1,4 +1,5 @@
 export const colors = {
   orange: '#E37F1D',
   grey: '#757575',
+  background: '#F7F9FC',
 };