bottom bar is working but as no images for now

LeftOvers/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View } from 'react-native';
+import {StyleSheet, View, Image, Text } from 'react-native';
 import ProfileModification from './components/ProfileModification';
 import ValidateButton from './components/ValidateButton';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -7,44 +7,48 @@ import RecipeSuggestion from './screens/RecipeSuggestion';
 import RecipeDetails from './screens/RecipeDetails';
 import IngredientSelection from './screens/IngredientSelection';
 import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
-const Stack = createNativeStackNavigator();
+import HomeStackScreen from './navigation/HomeStackScreen';
+import ProfilesStackScreen from './navigation/ProfileStackScreen';
+
+const Tab = createBottomTabNavigator();
 
 export default function App() {
-  const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
+  // const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
-  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
+  // const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
-  const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}]
+  // const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}]
-  const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
+  // const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
-  const steps = [{value: "Chauffer chocolat"}, 
+  // const steps = [{value: "Chauffer chocolat"}, 
-  {value: "1. Casser oeuf"}, 
+  //   {value: "1. Casser oeuf"}, 
-  {value: "2. Melanger la farine, le lait et les oeufs"},
+  //   {value: "2. Melanger la farine, le lait et les oeufs"},
-  {value: "3. Battre fort"},
+  //   {value: "3. Battre fort"},
-  {value: "4. Voler la montre de Louison"},
+  //   {value: "4. Voler la montre de Louison"},
-  {value: "5. Melanger avec le chocolat"},
+  //   {value: "5. Melanger avec le chocolat"},
-  {value: "6. Mettre au four"},
+  //   {value: "6. Mettre au four"},
-]
+  // ]
   
-  function generateList() {
+  // function generateList() {
-    const list = [];
+  //   const list = [];
-    list.push("Meat");
+  //   list.push("Meat");
-    list.push("Meat");
+  //   list.push("Meat");
-    list.push("Meat");
+  //   list.push("Meat");
-    list.push("Meat");
+  //   list.push("Meat");
-    list.push("Teat");
+  //   list.push("Teat");
-    list.push("Meat");
+  //   list.push("Meat");
-    list.push("Meat");
+  //   list.push("Meat");
-    list.push("Meat");
+  //   list.push("Meat");
-    return list;
+  //   return list;
-}
+  // }
 
-const ingredients = generateList();
+  // const ingredients = generateList();
   
   return (
     <NavigationContainer>
-      <Stack.Navigator>
+      <Tab.Navigator screenOptions={{ headerShown: false }}>
-        <Stack.Screen name="Home" component={IngredientSelection} />
+        <Tab.Screen name="Home" component={HomeStackScreen} />
-      </Stack.Navigator>
+        <Tab.Screen name="Profile" component={ProfilesStackScreen}/>
+      </Tab.Navigator>
     </NavigationContainer>
     // <IngredientSelection listIngredient={ingredients}></IngredientSelection>
     /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/

LeftOvers/components/ValidateButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, Pressable, Text, View, Image} from 'react-native';
+import {StyleSheet, Pressable, Text, View, Image, GestureResponderEvent} from 'react-native';
 
 
 type ValidateButtonProps = {
@@ -7,14 +7,18 @@ type ValidateButtonProps = {
   image: string
   colour: string
   backColour: string
+  todo: (event: GestureResponderEvent) => void
 }
 
 export default function ValidateButton(props: ValidateButtonProps) {
   return (
-    <Pressable style={{
+    <Pressable 
-        alignItems: 'center',
+        style={{
-        justifyContent: 'center',
+          alignItems: 'center',
-        borderRadius: 20,}}>
+          justifyContent: 'center',
+          borderRadius: 20,
+        }}
+        onPress={props.todo}>
         <View style={{
             borderRadius: 30,
             borderWidth: 2,

LeftOvers/navigation/HomeStackScreen.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View, Image, Text, StyleSheet } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import HomePage from '../screens/HomePage';
+import Profiles from '../screens/Profiles';
+import appLogo from '../assets/images/icon.png';
+
+const HomeStack = createNativeStackNavigator()
+
+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>
+  )
+}
+
+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: {
+        
+    }
+})

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { View, Image, Text, StyleSheet } from 'react-native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import Profiles from '../screens/Profiles';
+
+const ProfilesStack = createNativeStackNavigator()
+
+export default function ProfilesStackScreen() {
+  return (
+    <ProfilesStack.Navigator>
+      <ProfilesStack.Screen
+        name='Profiles'
+        component={Profiles}
+      />
+    </ProfilesStack.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: {
+        
+    }
+})

LeftOvers/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/webpack-config": "^19.0.0",
+        "@react-navigation/bottom-tabs": "^6.5.11",
         "@react-navigation/native": "^6.1.9",
         "@react-navigation/native-stack": "^6.9.17",
         "@types/react": "~18.2.14",
@@ -5960,6 +5961,51 @@
         "react-native": "*"
       }
     },
+    "node_modules/@react-navigation/bottom-tabs": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz",
+      "integrity": "sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.21",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/bottom-tabs/node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/@react-navigation/bottom-tabs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@react-navigation/bottom-tabs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/@react-navigation/core": {
       "version": "6.4.10",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
@@ -21816,6 +21862,40 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "@react-navigation/bottom-tabs": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz",
+      "integrity": "sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.21",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "dependencies": {
+        "color": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+          "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+          "requires": {
+            "color-convert": "^2.0.1",
+            "color-string": "^1.9.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
     "@react-navigation/core": {
       "version": "6.4.10",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",

LeftOvers/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@expo/webpack-config": "^19.0.0",
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@types/react": "~18.2.14",

LeftOvers/screens/HomePage.tsx

@@ -12,7 +12,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 
-export default function HomePage(props) {
+export default function HomePage(props, { navigation }) {
   const profiles = [
         {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
         {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
@@ -69,7 +69,7 @@ export default function HomePage(props) {
                     <View style={{marginTop: 10}}/>
                     <ProfileSelection listProfile={profiles} disableSelection={true}/>
                     <View style={{marginTop: 20}}/>
-                    <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                    <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
                 </View>
                 <View style={{marginTop: 20}}/>
                 <View style={styles.profilesSelection}>
@@ -190,7 +190,6 @@ const styles = StyleSheet.create({
         marginHorizontal: 10,
         padding: 5
   },
-
   appName: {
         fontSize: 20,
         fontWeight: "bold",

LeftOvers/screens/Profiles.tsx

@@ -6,7 +6,7 @@ import TopBar from '../components/TopBar';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 
-export default function ModifyProfile(props) {
+export default function Profiles(props) {
   const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
   const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]