modify bottom bar to be able to add theme button

LeftOvers/App.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, Image, Text, Pressable } from 'react-native';
+import { StyleSheet, Image } from 'react-native';
-import ProfileModification from './components/ProfileModification';
-import ValidateButton from './components/ValidateButton';
-import { LinearGradient } from 'expo-linear-gradient';
-import RecipeSuggestion from './screens/RecipeSuggestion';
-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';
@@ -13,114 +7,24 @@ import { BlurView } from 'expo-blur';
 import HomeStackScreen from './navigation/HomeStackScreen';
 import ProfilesStackScreen from './navigation/ProfileStackScreen';
 import CookingStackScreen from './navigation/CookingStackScreen';
+import BottomBar from './navigation/BottomBar';
 
 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 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 ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
-    // const steps = [{value: "Chauffer chocolat"}, 
-      //   {value: "1. Casser oeuf"}, 
-      //   {value: "2. Melanger la farine, le lait et les oeufs"},
-      //   {value: "3. Battre fort"},
-      //   {value: "4. Voler la montre de Louison"},
-      //   {value: "5. Melanger avec le chocolat"},
-      //   {value: "6. Mettre au four"},
-    // ]
-    
-    // function generateList() {
-      //   const list = [];
-      //   list.push("Meat");
-      //   list.push("Meat");
-      //   list.push("Meat");
-      //   list.push("Meat");
-      //   list.push("Teat");
-      //   list.push("Meat");
-      //   list.push("Meat");
-      //   list.push("Meat");
-      //   return list;
-    // }
     
     return (
         <NavigationContainer>
-            <Tab.Navigator
+            <Tab.Navigator initialRouteName='Home' tabBar={ (props) => <BottomBar {...props}/> }>
-                initialRouteName='Home'
+                <Tab.Screen name='Profile' component={ProfilesStackScreen} options={{ headerShown: false }} />
-                screenOptions={({ route }) => ({
+                <Tab.Screen name='Home' component={HomeStackScreen} options={{ headerShown: false }}/>
-                    tabBarIcon: ({ focused }) => {
+                <Tab.Screen name='Cooking' component={CookingStackScreen} options={{ headerShown: false }}/>
-                        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} 
-        ustensils={ustensils} 
-        steps={steps} 
-        title="Chocolat Cake" 
-        number="63"
-        duree="30 minutes"
-        ></RecipeDetails>*/
     );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#3F3C42',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    linearGradient: {
-        //height: 844,
-        //width: 390,
-        flex: 1,
-        padding: 10,
-        paddingTop: 0,
-        //backgroundColor: "#59BDCD",
-        //alignItems: 'center',
-        //justifyContent: 'flex-start',
-    },
-});

LeftOvers/navigation/BottomBar.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, Image, Pressable } from 'react-native';
+import { GestureResponderEvent, StyleSheet } from 'react-native';
+import {Appearance } from 'react-native';
+import type { AppearancePreferences, ColorSchemeName } from 'react-native/Libraries/Utilities/NativeAppearance';
+import { BlurView } from 'expo-blur';
+
+import HomeIcon from '../assets/images/home.png';
+import ProfileIcon from '../assets/images/person_icon.png';
+import CookingIcon from '../assets/images/cook.png';
+import LightIcon from '../assets/images/update.png';
+import DarkIcon from '../assets/images/validate.png';
+
+export default function BottomBar({ state, descriptors, navigation }) {
+    const [colorScheme, setScheme] = useState<ColorSchemeName | string>(
+        Appearance.getColorScheme(),
+    );
+    const [iconThemeButton, setThemeIconButton] = useState(( colorScheme === 'dark' ) ? LightIcon : DarkIcon)
+    const [textThemeButton, setTextThemeButton] = useState(( colorScheme === 'dark' ) ? 'Light' : 'Dark');
+    
+    
+    
+    useEffect(() => {
+        const subscription = Appearance.addChangeListener(
+            (preferences: AppearancePreferences) => {
+                const {colorScheme: scheme} = preferences;
+                setScheme(scheme);
+            },
+        );
+
+        return () => subscription?.remove();
+    }, [setScheme]);
+    
+    const onThemeButtonPress = (event: GestureResponderEvent) => {
+        if (textThemeButton === "Light") {
+            setThemeIconButton(ProfileIcon);
+            setTextThemeButton("Dark");
+            //Appearance.setColorScheme('light')
+        } else {
+            setThemeIconButton(HomeIcon);
+            setTextThemeButton("Light");
+            //Appearance.setColorScheme('dark')
+        }
+        console.log('TextThemeButton is now: ' + textThemeButton);
+    }
+
+    return (
+        <View style={styles.BottomBarMainContainer}>
+            <BlurView 
+                style={[StyleSheet.absoluteFill, styles.BottomBarBlurContainer]}
+                tint='dark'
+                intensity={50}
+            >
+                {state.routes.map((route, index) => {
+                    const { options } = descriptors[route.key];
+                    const label =
+                        options.tabBarLabel !== undefined
+                            ? options.tabBarLabel
+                            : options.title !== undefined
+                            ? options.title
+                            : route.name;
+
+                    let icon;
+                    if (route.name === 'Home') {
+                        icon = HomeIcon;
+                    } else if (route.name === 'Profile') {
+                        icon = ProfileIcon;
+                    } else if (route.name === 'Cooking') {
+                        icon = CookingIcon;
+                    }
+
+                    const isFocused = state.index === index;
+
+                    const onPress = () => {
+                        const event = navigation.emit({
+                            type: 'tabPress',
+                            target: route.key,
+                            canPreventDefault: true,
+                        });
+
+                        if (!isFocused && !event.defaultPrevented) {
+                            navigation.navigate(route.name, route.params);
+                        }
+                    };
+
+                    return (
+                    <TouchableOpacity
+                        accessibilityRole="button"
+                        accessibilityState={isFocused ? { selected: true } : {}}
+                        accessibilityLabel={options.tabBarAccessibilityLabel}
+                        testID={options.tabBarTestID}
+                        onPress={onPress}
+                        style={[styles.BottomBarElementContainer, { flex: 1 }]}
+                    >
+                            <Image source={icon} style={[styles.BottomBarIcon, {tintColor: isFocused ? '#59BDCD': '#F2F0E4'}]} />
+                            <Text style={{ color: isFocused ? '#59BDCD' : '#F2F0E4' }}>
+                                {label}
+                            </Text>
+                    </TouchableOpacity>
+                    );
+                })}
+                <Pressable onPress={ onThemeButtonPress }>
+                        <Image source={iconThemeButton} style={[styles.BottomBarIcon, {tintColor: '#F2F0E4'}]} />
+                        <Text style={{color: '#F2F0E4'}}>
+                            {textThemeButton}
+                        </Text>
+                </Pressable>
+            </BlurView>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    BottomBarMainContainer: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        left: 0,
+        height: 70
+    },
+    BottomBarBlurContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignContent: 'space-around',
+        padding: 2,
+        borderBlockColor: '#F2F0E4', 
+        borderWidth: 3, 
+        borderLeftColor: '#F2F0E4', 
+        borderLeftWidth: 3,
+        borderRightColor: '#F2F0E4',
+        borderRightWidth: 3
+    },
+    BottomBarIcon: {
+        width: 35,
+        height: 35
+    },
+    BottomBarElementContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        margin: 3
+    }
+})