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,11 +8,16 @@ 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() {
@@ -42,16 +47,53 @@ export default function App() {
       //   return list;
     // }
     
-  // const ingredients = generateList();
-  
     return (
         <NavigationContainer>
-      <Tab.Navigator screenOptions={{ headerShown: false }} initialRouteName='Home'>
+            <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;
+                        }
+
+                        // You can return any component that you like here!
+                        return <Image source={icon} style={{width: 35, height: 35}} tintColor={focused ? '#59BDCD' : '#F2F0E4'}/>;
+                    },
+                    tabBarActiveTintColor: '#59BDCD',
+                    tabBarInactiveTintColor: '#F2F0E4',
+                    headerShown: false,
+                    tabBarStyle: {position: 'absolute', height: 70},
+                    tabBarBackground: () => (
+                      <BlurView tint="dark" 
+                          intensity={50} 
+                          style={[
+                              StyleSheet.absoluteFill, 
+                              {
+                                  borderBlockColor: '#F2F0E4', 
+                                  borderWidth: 3, 
+                                  borderLeftColor: '#F2F0E4', 
+                                  borderLeftWidth: 3,
+                                  borderRightColor: '#F2F0E4',
+                                  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} 

LeftOvers/navigation/CookingStackScreen.tsx

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import IngredientSelection from '../screens/IngredientSelection';
+import { HeaderTitle } from './Utils';
 
 const CookingStack = createNativeStackNavigator()
 
@@ -12,10 +13,19 @@ export default function CookingStackScreen() {
           <CookingStack.Screen
               name='IngredientSelection'
               component={IngredientSelection}
+              options={{
+                  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",