custom header bar

LeftOvers/App.tsx

@@ -11,6 +11,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import HomeStackScreen from './navigation/HomeStackScreen';
 import ProfilesStackScreen from './navigation/ProfileStackScreen';
+import CookingStackScreen from './navigation/CookingStackScreen';
 
 const Tab = createBottomTabNavigator();
 
@@ -45,9 +46,10 @@ export default function App() {
   
   return (
     <NavigationContainer>
-      <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Navigator screenOptions={{ headerShown: false }} initialRouteName='Home'>
-        <Tab.Screen name="Home" component={HomeStackScreen} />
+        <Tab.Screen name='Profile' component={ProfilesStackScreen}/>
-        <Tab.Screen name="Profile" component={ProfilesStackScreen}/>
+        <Tab.Screen name='Home' component={HomeStackScreen} />
+        <Tab.Screen name='Cooking' component={CookingStackScreen}/>
       </Tab.Navigator>
     </NavigationContainer>
     // <IngredientSelection listIngredient={ingredients}></IngredientSelection>

LeftOvers/components/TopBar.tsx

@@ -7,17 +7,16 @@ interface TopBarProps{
 }
   
 export default function TopBar(props) {
-    const _goBack = () => console.log('Went back');
     const _handleSearch = () => console.log('Searching');
     const _handleMore = () => console.log('Shown more');
 
     return (
         <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
-            <Appbar.BackAction onPress={_goBack} />
             <Appbar.Content title={props.title} />
 
             {props.isVisible && (
-              <><Appbar.Action icon="magnify" onPress={_handleSearch} />
+                <>
+                    <Appbar.Action icon="magnify" onPress={_handleSearch} />
                     <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
                 </>
             )}

LeftOvers/navigation/CookingStackScreen.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import IngredientSelection from '../screens/IngredientSelection';
+
+const CookingStack = createNativeStackNavigator()
+
+export default function CookingStackScreen() {
+  return (
+    <CookingStack.Navigator>
+      <CookingStack.Screen
+        name='IngredientSelection'
+        component={IngredientSelection}
+      />
+    </CookingStack.Navigator>
+  )
+}
+
+const styles = StyleSheet.create({
+})

LeftOvers/navigation/HomeStackScreen.tsx

@@ -8,37 +8,55 @@ import appLogo from '../assets/images/icon.png';
 
 const HomeStack = createNativeStackNavigator()
 
+function AppIcon() {
+    return (
+        <Image
+            source={appLogo}
+            style={styles.headerAppIcon}/>
+    )
+}
+
+function TextTitle(props) {
+    return (
+      <Text 
+          style={styles.headerTitle}>
+          {props.title}
+      </Text>
+    )
+}
+
 export default function HomeStackScreen() {
     return (
         <HomeStack.Navigator>
             <HomeStack.Screen 
-        name="Home" 
+                name='Home'
                 component={HomePage}
                 options={{
                     headerStyle: styles.headerBarContainer,
+
                     headerLeft: () => (
-            <View style={styles.headerAppIconContainer}>
+                        <AppIcon/>
-              <Image 
-                source={appLogo}
-                style={styles.headerAppIcon}/>
-            </View>
                     ),
+
                     headerTitle: () => (
-            <Text style={styles.headerTitle}>
+                        <TextTitle title='LeftOvers'/>
-              LeftOvers
-            </Text>
                     ),
+                    headerTitleAlign: 'center',
+
                     headerRight: () => (
-            <Image 
+                        <AppIcon/>
-              source={appLogo}
-              style={styles.headerAppIcon}/>
                     ),
-          headerTitleAlign: 'center'
                 }} 
             />
             <HomeStack.Screen
                 name='Profiles'
                 component={Profiles}
+                options={{
+                    headerStyle: styles.headerBarContainer,
+                    headerTitle: () => (
+                      <TextTitle title='Profiles'/>
+                    )
+                }}
             />
         </HomeStack.Navigator>
     )
@@ -46,26 +64,18 @@ export default function HomeStackScreen() {
 
 const styles = StyleSheet.create({
     headerBarContainer: {
-        flexDirection: 'row',
-        width: "100%",
-        alignItems: 'center',
-        justifyContent: 'center',
         backgroundColor: '#F2F0E4',
-        padding: 5,
     },
     headerTitle: {
         fontSize: 20,
         fontWeight: "bold",
         color: '#3F3C42',
-        textAlign: "center",
-        textAlignVertical: 'center',
-        flex: 0.8,
     },
     headerAppIcon: {
         width: 35,
-        height: 35
+        height: 35,
-    },
+        borderRadius: 20,
-    headerAppIconContainer: {
+        overflow:'hidden',
-        
+        marginHorizontal: 10,
     }
 })

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { View, Image, Text, StyleSheet } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Profiles from '../screens/Profiles';
+import TopBar from '../components/TopBar';
 
 const ProfilesStack = createNativeStackNavigator()
 
@@ -12,6 +13,11 @@ export default function ProfilesStackScreen() {
         <ProfilesStack.Screen
           name='Profiles'
           component={Profiles}
+          options={{
+            headerTitle: () => (
+                <TopBar title='Profiles' isVisible={true}/>
+            )
+          }}
         />
     </ProfilesStack.Navigator>
   )

LeftOvers/screens/HomePage.tsx

@@ -42,11 +42,6 @@ export default function HomePage({ navigation , props}) {
 
   return (
     <SafeAreaProvider>
-        <View style={styles.topBar}>
-            <Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginLeft: 10}}/>
-            <Text style={styles.appName}>LeftOvers</Text>
-            <Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginRight: 10}}/>
-        </View>
         <View style={styles.container}>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
                 <View style={{marginTop: 20}}/>
@@ -124,7 +119,6 @@ const styles = StyleSheet.create({
         padding: 10,
         paddingTop: 0,
     },
-
     filterBar: {
         flexDirection: "row",
         width: 300,
@@ -148,7 +142,6 @@ const styles = StyleSheet.create({
         color: "#3F3C42",
         textAlign: "right",
     },
-
     profilesSelection: {
         flexDirection: 'column',
         alignItems: 'center',
@@ -190,19 +183,4 @@ const styles = StyleSheet.create({
         marginHorizontal: 10,
         padding: 5
     },
-  appName: {
-        fontSize: 20,
-        fontWeight: "bold",
-        color: '#3F3C42',
-        textAlign: "center",
-        flex: 0.8,
-  },
-  topBar: {
-        flexDirection: 'row',
-        width: "100%",
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#F2F0E4',
-        padding: 5,
-  },
 });