diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index a1a079d..b33d099 100644 --- a/LeftOvers/App.tsx +++ b/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 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; - // } + // 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 ( + + ({ + 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(); - - return ( - - - - - - - - // - /**/ - /**/ - ); + // You can return any component that you like here! + return ; + }, + tabBarActiveTintColor: '#59BDCD', + tabBarInactiveTintColor: '#F2F0E4', + headerShown: false, + tabBarStyle: {position: 'absolute', height: 70}, + tabBarBackground: () => ( + + ), + tabBarItemStyle: {marginVertical: 5}, + tabBarLabelStyle: {fontSize: 15} + })}> + + + + + + + // + /**/ + /**/ + ); } 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', - }, + 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', + }, }); \ No newline at end of file diff --git a/LeftOvers/assets/images/home.png b/LeftOvers/assets/images/home.png new file mode 100644 index 0000000..4c1f9c7 Binary files /dev/null and b/LeftOvers/assets/images/home.png differ diff --git a/LeftOvers/assets/images/person_icon.png b/LeftOvers/assets/images/person_icon.png new file mode 100644 index 0000000..fdbbd58 Binary files /dev/null and b/LeftOvers/assets/images/person_icon.png differ diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx index 836eca3..e974f41 100644 --- a/LeftOvers/navigation/CookingStackScreen.tsx +++ b/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 ( - - - + + ( + + ) + }} + /> + ) } const styles = StyleSheet.create({ + headerBarContainer: { + backgroundColor: '#F2F0E4', + }, }) \ No newline at end of file diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index 52c1a1d..e074240 100644 --- a/LeftOvers/package-lock.json +++ b/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", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index 9d8e5ed..a671046 100644 --- a/LeftOvers/package.json +++ b/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",