Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat add style to bottom bar
continuous-integration/drone/push Build is failing Details

Browse Source
pull/20/head
Rémi REGNAULT 1 year ago
parent 49790445e1
commit d0ace4f255
6 changed files with 136 additions and 68 deletions
Show Stats Download Patch File Download Diff File

162
LeftOvers/App.tsx
Unescape View File

@ -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"},
// ]
// 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
initialRouteName='Home'
screenOptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let icon;
// 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;
// }
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'}/>;
},
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>
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }} initialRouteName='Home'>
<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>*/
);
// <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',
},
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',
},
});

BIN
LeftOvers/assets/images/home.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
LeftOvers/assets/images/person_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

22
LeftOvers/navigation/CookingStackScreen.tsx
Unescape View File

@ -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.Screen
name='IngredientSelection'
component={IngredientSelection}
/>
</CookingStack.Navigator>
<CookingStack.Navigator>
<CookingStack.Screen
name='IngredientSelection'
component={IngredientSelection}
options={{
headerStyle: styles.headerBarContainer,
headerTitle: () => (
<HeaderTitle title='Profile Modification'/>
)
}}
/>
</CookingStack.Navigator>
)
}
const styles = StyleSheet.create({
headerBarContainer: {
backgroundColor: '#F2F0E4',
},
})

15
LeftOvers/package-lock.json generated
Unescape View File

@ -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",

1
LeftOvers/package.json
Unescape View File

@ -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",

Write Preview
Loading…
Cancel
Save