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

modify bottom bar to be able to add theme button
continuous-integration/drone/push Build is failing Details

Browse Source
pull/20/head
Rémi REGNAULT 1 year ago
parent d0ace4f255
commit 1b06f401cc
2 changed files with 150 additions and 104 deletions
Show Stats Download Patch File Download Diff File

112
LeftOvers/App.tsx
Unescape View File

@ -1,11 +1,5 @@
import React from 'react';
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';
import RecipeSuggestion from './screens/RecipeSuggestion';
import RecipeDetails from './screens/RecipeDetails';
import IngredientSelection from './screens/IngredientSelection';
import { StyleSheet, Image } from 'react-native';
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
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 initialRouteName='Home' tabBar={ (props) => <BottomBar {...props}/> }>
<Tab.Screen name='Profile' component={ProfilesStackScreen} options={{ headerShown: false }} />
<Tab.Screen name='Home' component={HomeStackScreen} options={{ headerShown: false }}/>
<Tab.Screen name='Cooking' component={CookingStackScreen} options={{ headerShown: false }}/>
</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',
},
});
}

142
LeftOvers/navigation/BottomBar.tsx
Unescape View File

@ -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
}
})
Write Preview
Loading…
Cancel
Save