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.Screen name="Home" component={HomeStackScreen} />
-        <Tab.Screen name="Profile" component={ProfilesStackScreen}/>
+      <Tab.Navigator screenOptions={{ headerShown: false }} initialRouteName='Home'>
+        <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,20 +7,19 @@ 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="dots-vertical" onPress={_handleMore} />
-              </>
+            {props.isVisible && (
+                <>
+                    <Appbar.Action icon="magnify" onPress={_handleSearch} />
+                    <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
+                </>
             )}
-      </Appbar.Header>
+        </Appbar.Header>
     );
 }

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,64 +8,74 @@ 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" 
-        component={HomePage}
-        options={{
-          headerStyle: styles.headerBarContainer,
-          headerLeft: () => (
-            <View style={styles.headerAppIconContainer}>
-              <Image 
-                source={appLogo}
-                style={styles.headerAppIcon}/>
-            </View>
-          ),
-          headerTitle: () => (
-            <Text style={styles.headerTitle}>
-              LeftOvers
-            </Text>
-          ),
-          headerRight: () => (
-            <Image 
-              source={appLogo}
-              style={styles.headerAppIcon}/>
-          ),
-          headerTitleAlign: 'center'
-        }} 
-      />
-      <HomeStack.Screen
-        name='Profiles'
-        component={Profiles}
-      />
-    </HomeStack.Navigator>
-  )
+    return (
+        <HomeStack.Navigator>
+            <HomeStack.Screen 
+                name='Home'
+                component={HomePage}
+                options={{
+                    headerStyle: styles.headerBarContainer,
+
+                    headerLeft: () => (
+                        <AppIcon/>
+                    ),
+
+                    headerTitle: () => (
+                        <TextTitle title='LeftOvers'/>
+                    ),
+                    headerTitleAlign: 'center',
+
+                    headerRight: () => (
+                        <AppIcon/>
+                    ),
+                }} 
+            />
+            <HomeStack.Screen
+                name='Profiles'
+                component={Profiles}
+                options={{
+                    headerStyle: styles.headerBarContainer,
+                    headerTitle: () => (
+                      <TextTitle title='Profiles'/>
+                    )
+                }}
+            />
+        </HomeStack.Navigator>
+    )
 }
 
 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
-    },
-    headerAppIconContainer: {
-        
+        height: 35,
+        borderRadius: 20,
+        overflow:'hidden',
+        marginHorizontal: 10,
     }
 })

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -1,18 +1,24 @@
 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()
 
 export default function ProfilesStackScreen() {
   return (
     <ProfilesStack.Navigator>
-      <ProfilesStack.Screen
-        name='Profiles'
-        component={Profiles}
-      />
+        <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}}/>
@@ -109,23 +104,22 @@ export default function HomePage({ navigation , props}) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  linearGradient: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    padding: 10,
-    paddingTop: 0,
-  },
-
-  filterBar: {
+    container: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        backgroundColor: '#3F3C42',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    linearGradient: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        padding: 10,
+        paddingTop: 0,
+    },
+    filterBar: {
         flexDirection: "row",
         width: 300,
         paddingTop: 10,
@@ -133,8 +127,8 @@ const styles = StyleSheet.create({
         alignItems: "flex-end",
         justifyContent: "center",
         flex: 0.2,
-  },
-  filters: {
+    },
+    filters: {
         flex: 0.8,
         fontSize: 20,
         color: '#ACA279',
@@ -142,14 +136,13 @@ const styles = StyleSheet.create({
         padding: 5,
         paddingLeft: 0,
         paddingBottom: 0,
-  },
-  nbSelected: {
+    },
+    nbSelected: {
         fontSize: 11,
         color: "#3F3C42",
         textAlign: "right",
-  },
-
-  profilesSelection: {
+    },
+    profilesSelection: {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
@@ -157,8 +150,8 @@ const styles = StyleSheet.create({
         backgroundColor: '#F2F0E4',
         paddingTop: 5,
         marginHorizontal: 10,
-  },
-  welcome: {
+    },
+    welcome: {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
@@ -167,18 +160,18 @@ const styles = StyleSheet.create({
         paddingVertical: 10,
         paddingHorizontal: 25,
         marginHorizontal: 10,
-  },
-  text: {
+    },
+    text: {
         fontSize: 20,
         color: '#ACA279',
-  },
-  name: {
+    },
+    name: {
         fontSize: 20,
         fontWeight: "bold",
         color: '#59BDCD',
         textAlign: "left",
-  },
-  ingredientSelection: {
+    },
+    ingredientSelection: {
         flexDirection: 'column',
         width: "90%",
         alignItems: 'center',
@@ -189,20 +182,5 @@ const styles = StyleSheet.create({
         borderColor: "#ACA279",
         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,
-  },
+    },
 });