feat : header bar is now following theme

LeftOvers/App.tsx

@@ -16,8 +16,8 @@ export default function App() {
     return (
         <ThemeProvider>
             <NavigationContainer>
-                <Tab.Navigator initialRouteName='Home' tabBar={ (props) => <BottomBar {...props}/> }>
+                <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
-                    <Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Home' }} />
+                    <Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profile' }} />
                     <Tab.Screen name='HOME' component={HomeStackScreen} options={{ headerShown: false, title: 'Home' }}/>
                     <Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
                 </Tab.Navigator>

LeftOvers/navigation/BottomBar.tsx

@@ -36,7 +36,7 @@ export default function BottomBar({ state, descriptors, navigation }) {
             right: 0,
             left: 0,
             height: 70,
-            backgroundColor: theme === 'dark' ? "#3F3C42": "transparent"
+            backgroundColor: theme === 'dark' ? "#3F3C42" : "transparent"
         },
         BottomBarBlurContainer: {
             flexDirection: 'row',

LeftOvers/navigation/CookingStackScreen.tsx

@@ -1,27 +1,30 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import IngredientSelection from '../screens/IngredientSelection';
 import { HeaderTitle } from './Utils';
+import ThemeContext from '../theme/ThemeContext';
 
 const CookingStack = createNativeStackNavigator()
 
 export default function CookingStackScreen() {
-  return (
+    const {theme, toggleTheme} = useContext(ThemeContext);
-      <CookingStack.Navigator>
+    
-          <CookingStack.Screen
+    return (
-              name='IngredientSelection'
+        <CookingStack.Navigator>
-              component={IngredientSelection}
+            <CookingStack.Screen
-              options={{
+                name='IngredientSelection'
-                  headerStyle: styles.headerBarContainer,
+                component={IngredientSelection}
-                  headerTitle: () => (
+                options={{
-                      <HeaderTitle title='Profile Modification'/>
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
-                  )
+                    headerTitle: () => (
-              }}
+                        <HeaderTitle title='Profile Modification'/>
-          />
+                    )
-      </CookingStack.Navigator>
+                }}
-  )
+            />
+        </CookingStack.Navigator>
+    )
 }
 
 const styles = StyleSheet.create({

LeftOvers/navigation/HomeStackScreen.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Image, Text, StyleSheet } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import HomePage from '../screens/HomePage';
 import Profiles from '../screens/Profiles';
-import { HeaderTitle } from './Utils';
-import appLogo from '../assets/images/logo.png';
 import CreateProfile from '../screens/CreateProfile';
 import ModifyProfile from '../screens/ModifyProfile';
+import ThemeContext from '../theme/ThemeContext';
+import { HeaderTitle } from './Utils';
+
+import appLogo from '../assets/images/logo.png';
 
 const HomeStack = createNativeStackNavigator()
 
@@ -20,13 +22,15 @@ function AppIcon() {
 }
 
 export default function HomeStackScreen() {
+    const {theme, toggleTheme} = useContext(ThemeContext)
+    
     return (
         <HomeStack.Navigator>
             <HomeStack.Screen 
                 name='Home'
                 component={HomePage}
                 options={{
-                    headerStyle: styles.headerBarContainer,
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
 
                     headerLeft: () => (
                         <AppIcon/>
@@ -46,7 +50,7 @@ export default function HomeStackScreen() {
                 name='Profiles'
                 component={Profiles}
                 options={{
-                    headerStyle: styles.headerBarContainer,
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
                     headerTitle: () => (
                       <HeaderTitle title='Profiles'/>
                     )
@@ -56,7 +60,7 @@ export default function HomeStackScreen() {
                 name='ProfileModification'
                 component={ModifyProfile}
                 options={{
-                    headerStyle: styles.headerBarContainer,
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
                     headerTitle: () => (
                         <HeaderTitle title='Profile Modification'/>
                     )
@@ -67,9 +71,6 @@ export default function HomeStackScreen() {
 }
 
 const styles = StyleSheet.create({
-    headerBarContainer: {
-        backgroundColor: '#F2F0E4',
-    },
     headerAppIcon: {
         width: 45,
         height: 45,

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { StyleSheet, View, Image, Pressable } from 'react-native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Profiles from '../screens/Profiles';
 import CreateProfile from '../screens/CreateProfile';
 import ModifyProfile from '../screens/ModifyProfile';
+import ThemeContext from '../theme/ThemeContext';
 
 import { HeaderTitle } from './Utils';
 
@@ -14,6 +15,25 @@ import AddIcon from '../assets/images/plus.png'
 const ProfilesStack = createNativeStackNavigator()
 
 export default function ProfilesStackScreen({ navigation }) {
+    const {theme, toggleTheme} = useContext(ThemeContext);
+
+    const styles = StyleSheet.create({
+        headerBarContainer: {
+            backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42',
+        },
+        headerBarRightContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignContent: 'space-between',
+            marginHorizontal: 10,
+        },
+        headerBarIcon: {
+            width: 30,
+            height: 30,
+            marginHorizontal: 10
+        }
+    })
+    
     const _handleSearch = () => console.log('Searching');
     const _handleHeaderAdd = () => navigation.navigate('ProfileCreation');
     
@@ -32,12 +52,14 @@ export default function ProfilesStackScreen({ navigation }) {
                             <Pressable onPress={_handleSearch}>
                                 <Image 
                                     source={SearchIcon}
-                                    style={styles.headerBarIcon}/>
+                                    style={styles.headerBarIcon}
+                                    tintColor={theme === 'light' ? '#3F3C42' : '#F2F0E4'}/>
                             </Pressable>
                             <Pressable onPress={_handleHeaderAdd}>
                                 <Image
                                     source={AddIcon}
-                                    style={styles.headerBarIcon}/>
+                                    style={styles.headerBarIcon}
+                                    tintColor={theme === 'light' ? '#3F3C42' : '#F2F0E4'}/>
                             </Pressable>
                         </View>
                     )
@@ -67,19 +89,3 @@ export default function ProfilesStackScreen({ navigation }) {
     )
 }
 
-const styles = StyleSheet.create({
-    headerBarContainer: {
-        backgroundColor: '#F2F0E4',
-    },
-    headerBarRightContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignContent: 'space-between',
-        marginHorizontal: 10,
-    },
-    headerBarIcon: {
-        width: 30,
-        height: 30,
-        marginHorizontal: 10
-    }
-})

LeftOvers/navigation/Utils.tsx

@@ -1,19 +1,23 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text, StyleSheet } from 'react-native';
 
+import ThemeContext from '../theme/ThemeContext';
+
 export function HeaderTitle(props) {
+    const {theme, toggleTheme} = useContext(ThemeContext);
+
+    const styles = StyleSheet.create({
+        headerTitle: {
+            fontSize: 20,
+            fontWeight: "bold",
+            color: theme === 'light' ? '#3F3C42' : '#F2F0E4',
+        }
+    })
+
     return (
         <Text 
             style={styles.headerTitle}>
             {props.title}
         </Text>
     )
-}
+}
-
-const styles = StyleSheet.create({
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: "bold",
-        color: '#3F3C42',
-    }
-})