feat add style to bottom bar

LeftOvers/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, Image, Text } from 'react-native';
+import {StyleSheet, View, Image, Text, Pressable } from 'react-native';
 import ProfileModification from './components/ProfileModification';
 import ValidateButton from './components/ValidateButton';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -8,77 +8,119 @@ import RecipeDetails from './screens/RecipeDetails';
 import IngredientSelection from './screens/IngredientSelection';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BlurView } from 'expo-blur';
 
 import HomeStackScreen from './navigation/HomeStackScreen';
 import ProfilesStackScreen from './navigation/ProfileStackScreen';
 import CookingStackScreen from './navigation/CookingStackScreen';
 
+import HomeIcon from './assets/images/home.png';
+import ProfileIcon from './assets/images/person_icon.png';
+import CookingIcon from './assets/images/cook.png';
+
 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;
-  // }
+    // }
+    
+    return (
+        <NavigationContainer>
+            <Tab.Navigator
+                initialRouteName='Home'
+                screenOptions={({ route }) => ({
+                    tabBarIcon: ({ focused }) => {
+                        let icon;
+
+                        if (route.name === 'Home') {
+                            icon = HomeIcon;
+                        } else if (route.name === 'Profile') {
+                            icon = ProfileIcon;
+                        } else if (route.name === 'Cooking') {
+                            icon = CookingIcon;
+                        }
 
-  // const ingredients = generateList();
+                        // You can return any component that you like here!
-  
+                        return <Image source={icon} style={{width: 35, height: 35}} tintColor={focused ? '#59BDCD' : '#F2F0E4'}/>;
-  return (
+                    },
-    <NavigationContainer>
+                    tabBarActiveTintColor: '#59BDCD',
-      <Tab.Navigator screenOptions={{ headerShown: false }} initialRouteName='Home'>
+                    tabBarInactiveTintColor: '#F2F0E4',
-        <Tab.Screen name='Profile' component={ProfilesStackScreen}/>
+                    headerShown: false,
-        <Tab.Screen name='Home' component={HomeStackScreen} />
+                    tabBarStyle: {position: 'absolute', height: 70},
-        <Tab.Screen name='Cooking' component={CookingStackScreen}/>
+                    tabBarBackground: () => (
-      </Tab.Navigator>
+                      <BlurView tint="dark" 
-    </NavigationContainer>
+                          intensity={50} 
-    // <IngredientSelection listIngredient={ingredients}></IngredientSelection>
+                          style={[
-    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
+                              StyleSheet.absoluteFill, 
-      /*<RecipeDetails ingredient={ingredient} 
+                              {
-      ustensils={ustensils} 
+                                  borderBlockColor: '#F2F0E4', 
-      steps={steps} 
+                                  borderWidth: 3, 
-      title="Chocolat Cake" 
+                                  borderLeftColor: '#F2F0E4', 
-      number="63"
+                                  borderLeftWidth: 3,
-      duree="30 minutes"
+                                  borderRightColor: '#F2F0E4',
-      ></RecipeDetails>*/
+                                  borderRightWidth: 3
-  );
+                              }
+                          ]}/>
+                    ),
+                    tabBarItemStyle: {marginVertical: 5},
+                    tabBarLabelStyle: {fontSize: 15}
+                })}>
+                <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>
+        /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
+        /*<RecipeDetails ingredient={ingredient} 
+        ustensils={ustensils} 
+        steps={steps} 
+        title="Chocolat Cake" 
+        number="63"
+        duree="30 minutes"
+        ></RecipeDetails>*/
+    );
 }
 
 const styles = StyleSheet.create({
-  container: {
+    container: {
-    flex: 1,
+        flex: 1,
-    backgroundColor: '#3F3C42',
+        backgroundColor: '#3F3C42',
-    alignItems: 'center',
+        alignItems: 'center',
-    justifyContent: 'center',
+        justifyContent: 'center',
-  },
+    },
-  linearGradient: {
+    linearGradient: {
-    //height: 844,
+        //height: 844,
-    //width: 390,
+        //width: 390,
-    flex: 1,
+        flex: 1,
-    padding: 10,
+        padding: 10,
-    paddingTop: 0,
+        paddingTop: 0,
-    //backgroundColor: "#59BDCD",
+        //backgroundColor: "#59BDCD",
-    //alignItems: 'center',
+        //alignItems: 'center',
-    //justifyContent: 'flex-start',
+        //justifyContent: 'flex-start',
-  },
+    },
 });

LeftOvers/navigation/CookingStackScreen.tsx

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

LeftOvers/package-lock.json

@@ -14,6 +14,7 @@
         "@react-navigation/native-stack": "^6.9.17",
         "@types/react": "~18.2.14",
         "expo": "~49.0.15",
+        "expo-blur": "^12.6.0",
         "expo-linear-gradient": "~12.3.0",
         "expo-splash-screen": "~0.20.5",
         "expo-status-bar": "~1.6.0",
@@ -9199,6 +9200,14 @@
         "url-parse": "^1.5.9"
       }
     },
+    "node_modules/expo-blur": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.6.0.tgz",
+      "integrity": "sha512-yrZYu4mQX4ZJtSrjNVMuB9kCMB8Xerk5Zn5iES6ojmGAk+yxJ/jdyhaUVqbpaA8LBmspdKgQz2dW8+9wa8dSAg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "14.4.2",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.4.2.tgz",
@@ -24365,6 +24374,12 @@
         "url-parse": "^1.5.9"
       }
     },
+    "expo-blur": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.6.0.tgz",
+      "integrity": "sha512-yrZYu4mQX4ZJtSrjNVMuB9kCMB8Xerk5Zn5iES6ojmGAk+yxJ/jdyhaUVqbpaA8LBmspdKgQz2dW8+9wa8dSAg==",
+      "requires": {}
+    },
     "expo-constants": {
       "version": "14.4.2",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.4.2.tgz",

LeftOvers/package.json

@@ -15,6 +15,7 @@
     "@react-navigation/native-stack": "^6.9.17",
     "@types/react": "~18.2.14",
     "expo": "~49.0.15",
+    "expo-blur": "^12.6.0",
     "expo-linear-gradient": "~12.3.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",