fix: fixed hungry and home screens

wisdomekpotu · Dec 10, 2022 · 8148d33 · 8148d33
1 parent f1eb5ba
commit 8148d33
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 88 deletions.
diff --git a/App.js b/App.js
@@ -9,6 +9,7 @@ import { useFonts } from 'expo-font';
 //import screens
 import Budget from './screens/Budget';
 import Final from './screens/Final';
+import Avoiding from './screens/Avoiding';
 import HowHungry from './screens/HowHungry';
 import MealOptions from './screens/MealOptions';
 import OrderDetails from './screens/OrderDetails';
@@ -20,12 +21,23 @@ import HowLong from './screens/HowLong';
 
 const Tab = createBottomTabNavigator();
 
-function Home() {
+// function Home() {
+// return (
+
+// );
+// }
+
+function Otherscreens() {
  return (
- <Tab.Navigator>
- <Tab.Screen
- name='Budget'
+ <Stack.Navigator>
+ <Stack.Screen
+ name='Home'
  component={Budget}
+ options={{ headerShown: false }}
+ />
+ <Stack.Screen
+ name='MealOptions'
+ component={MealOptions}
  options={{
  title: 'Savour it',
  headerTitleStyle: {
@@ -37,54 +49,45 @@ function Home() {
  top: 10,
  fontFamily: 'Lactosa',
  fontStyle: 'normal',
- fontWeight: 400,
  color: '#FFFFFF',
  border: '2.36364px solid #DA0091',
  textShadow: '0px 2.36364px 0px rgba(218, 0, 145, 0.25)',
  fontWeight: '400',
  },
  headerStyle: { backgroundColor: '#DA0091' },
- tabBarLabel: 'Budget',
- tabBarIcon: ({ color, size }) => (
- <FontAwesome name='cutlery' size={24} color='black' />
- ),
- }}
- />
- <Tab.Screen
- name='Search'
- component={Search}
- options={{
- tabBarLabel: 'Search',
- tabBarIcon: ({ color, size }) => (
- <FontAwesome name='search' size={24} color='black' />
- ),
  }}
  />
- <Tab.Screen
- name='Orders'
- component={Orders}
+ <Stack.Screen name='HowLong' component={HowLong} />
+ <Stack.Screen
+ name='HowHungry'
+ component={HowHungry}
  options={{
- tabBarLabel: 'Orders',
- tabBarStyle: { display: 'none' },
- tabBarIcon: ({ color, size }) => (
- <MaterialIcons name='bookmark-border' size={24} color='black' />
- ),
- }}
- />
- <Tab.Screen
- name='Profile'
- component={Profile}
- options={{
- tabBarLabel: 'Profile',
- tabBarIcon: ({ color, size }) => (
- <Feather name='user' size={24} color='black' />
- ),
+ headerShown: false,
+ title: 'Savour it',
+ headerTitleStyle: {
+ color: 'white',
+ position: 'absolute',
+ width: 91,
+ height: 78,
+ left: 140,
+ top: 10,
+ fontFamily: 'Lactosa',
+ fontStyle: 'normal',
+ color: '#FFFFFF',
+ border: '2.36364px solid #DA0091',
+ textShadow: '0px 2.36364px 0px rgba(218, 0, 145, 0.25)',
+ fontWeight: '400',
+ },
+ headerStyle: { backgroundColor: '#DA0091' },
  }}
  />
- </Tab.Navigator>
+ <Stack.Screen name='OrderDetails' component={OrderDetails} />
+ <Stack.Screen name='Final' component={Final} />
+ <Stack.Screen name='Avoiding' component={Avoiding} />
+ <Stack.Screen name='Curating' component={Curating} />
+ </Stack.Navigator>
  );
 }
-
 const Stack = createNativeStackNavigator();
 export default function App() {
  const [loaded] = useFonts({
@@ -98,17 +101,12 @@ export default function App() {
 
  return (
  <NavigationContainer>
- <Stack.Navigator>
- <Stack.Screen
- name='Home'
- component={Home}
- options={{ headerShown: false }}
- />
- <Stack.Screen
- name='MealOptions'
- component={MealOptions}
+ <Tab.Navigator>
+ <Tab.Screen
+ name='Budget'
+ component={Otherscreens}
  options={{
- title: 'Awesome app',
+ title: 'Savour it',
  headerTitleStyle: {
  color: 'white',
  position: 'absolute',
@@ -118,6 +116,7 @@ export default function App() {
  top: 10,
  fontFamily: 'Lactosa',
  fontStyle: 'normal',
+ fontWeight: 400,
  color: '#FFFFFF',
  border: '2.36364px solid #DA0091',
  textShadow: '0px 2.36364px 0px rgba(218, 0, 145, 0.25)',
@@ -130,37 +129,38 @@ export default function App() {
  ),
  }}
  />
- <Stack.Screen name='HowLong' component={HowLong} />
- <Stack.Screen
- name='HowHungry'
- component={HowHungry}
+ <Tab.Screen
+ name='Search'
+ component={Search}
  options={{
- title: 'Savour it',
- headerTitleStyle: {
- color: 'white',
- position: 'absolute',
- width: 91,
- height: 78,
- left: 140,
- top: 10,
- fontFamily: 'Lactosa',
- fontStyle: 'normal',
- color: '#FFFFFF',
- border: '2.36364px solid #DA0091',
- textShadow: '0px 2.36364px 0px rgba(218, 0, 145, 0.25)',
- fontWeight: '400',
- },
- headerStyle: { backgroundColor: '#DA0091' },
- tabBarLabel: 'Budget',
+ tabBarLabel: 'Search',
  tabBarIcon: ({ color, size }) => (
- <FontAwesome name='cutlery' size={24} color='black' />
+ <FontAwesome name='search' size={24} color='black' />
+ ),
+ }}
+ />
+ <Tab.Screen
+ name='Orders'
+ component={Orders}
+ options={{
+ tabBarLabel: 'Orders',
+
+ tabBarIcon: ({ color, size }) => (
+ <MaterialIcons name='bookmark-border' size={24} color='black' />
+ ),
+ }}
+ />
+ <Tab.Screen
+ name='Profile'
+ component={Profile}
+ options={{
+ tabBarLabel: 'Profile',
+ tabBarIcon: ({ color, size }) => (
+ <Feather name='user' size={24} color='black' />
  ),
  }}
  />
- <Stack.Screen name='OrderDetails' component={OrderDetails} />
- <Stack.Screen name='Final' component={Final} />
- <Stack.Screen name='Curating' component={Curating} />
- </Stack.Navigator>
+ </Tab.Navigator>
  </NavigationContainer>
  );
 }

diff --git a/assets/slider.png b/assets/slider.png
diff --git a/screens/Avoiding.js b/screens/Avoiding.js
@@ -0,0 +1,12 @@
+import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+
+export default function Avoiding() {
+ return (
+ <View>
+ <Text>Avaoiding</Text>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({});
diff --git a/screens/HowHungry.js b/screens/HowHungry.js
@@ -1,21 +1,97 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
 import React from 'react';
-import Slider from '@react-native-community/slider';
 
-export default function HowHungry() {
+export default function HowHungry({ navigation }) {
  return (
  <View>
- <Slider
- style={{ width: 200, height: 40 }}
- minimumValue={0}
- maximumValue={1}
- vertical='true'
- disabled='true'
- minimumTrackTintColor='#FFFFFF'
- maximumTrackTintColor='#000000'
- />
+ <Text style={styles.text}>How hungry are{'\n'}you?</Text>
+ <Image style={styles.img} source={require('../assets/slider.png')} />
+ <Text style={styles.text1}>Very hungry</Text>
+ <Text style={styles.text2}>Not very hungry</Text>
+ <Text style={styles.text3}>Not hungry</Text>
+ <View style={styles.button}>
+ <Pressable onPress={() => navigation.navigate('Avoiding')}>
+ <Text style={styles.btn_text}>Continue</Text>
+ </Pressable>
+ </View>
  </View>
  );
 }
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+ text1: {
+ position: 'absolute',
+ width: 119,
+ height: 26,
+ left: 159,
+ top: 214,
+ fontStyle: 'normal',
+ fontWeight: '800',
+ fontSize: 22,
+ lineHeight: 26,
+ letterSpacing: -0.03,
+ color: '#DA0091',
+ },
+
+ text2: {
+ position: 'absolute',
+ width: 122,
+ height: 20,
+ left: 159,
+ top: 353,
+ fontStyle: 'normal',
+ fontWeight: '700',
+ fontSize: 17,
+ lineHeight: 20,
+ letterSpacing: -0.03,
+ color: '#DA0091',
+ },
+
+ text3: {
+ position: 'absolute',
+ width: 69,
+ height: 17,
+ left: 159,
+ top: 500,
+ fontStyle: 'normal',
+ fontWeight: '500',
+ fontSize: 14,
+ lineHeight: 17,
+ letterSpacing: -0.03,
+ color: '#DA0091',
+ },
+ img: { position: 'absolute', left: 80, top: 210 },
+
+ text: {
+ color: '#4D0033',
+ position: 'absolute',
+ width: 273,
+ height: 64,
+ left: 60,
+ top: 45,
+ fontfamily: 'Clash',
+ fontStyle: 'normal',
+ fontWeight: '600',
+ fontSize: 28,
+ lineHeight: 40,
+ textAlign: 'center',
+ color: '#4D0033',
+ },
+ button: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignitems: 'center',
+ paddingTop: 20,
+ paddingBottom: 0,
+ gap: 8,
+ position: 'absolute',
+ width: 329,
+ height: 62,
+ left: 32,
+ top: 600,
+ color: 'white',
+ backgroundColor: '#B9B9B9',
+ borderRadius: 89,
+ },
+});