-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
124 lines (114 loc) · 3.79 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { StyleSheet, Alert } from 'react-native';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import PlantOptionsNavigator from './components/new_plant/PlantOptionsNavigator';
import GardenNavigator from './components/garden/GardenNavigator';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Login from './components/Login';
import Profile from './components/Profile';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Entypo, Foundation, AntDesign } from '@expo/vector-icons';
const Tab = createBottomTabNavigator();
// set all states to null to engage the login page
function App() {
//console.disableYellowBox = true;
// const [userId, setUserId] = useState(null);
// const [username, setUsername] = useState(null);
const [userId, setUserId] = useState(null);
const [username, setUsername] = useState(null);
const [name, setName] = useState(null);
// to undo hardcode, set state back to id null and useState ''
const logIn = (Id, user, fullName) => {
setUserId(Id);
setUsername(user);
setName(fullName);
};
const logOut = () => {
setUserId(null);
Alert.alert('Logged out', 'See you soon - in the meantime, keep growing!');
};
const userInfo = {
userId,
username,
name,
};
// if user isn't logged in, displays login component
// if user is logged in, navigates to garden page, passing userId down through garden navigator
return (
<>
{!userId && <Login logIn={logIn} />}
{userId && (
<>
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
// size = 40;
if (route.name === 'garden') {
return <Entypo name="tree" size={size} color={color} />;
} else if (route.name === 'new plant') {
return (
<Entypo
// style={{ marginBottom: 2 }}
name={'plus'}
size={size}
color={color}
/>
);
} else if (route.name === 'profile') {
return <AntDesign name="user" size={size} color={color} />;
}
// You can return any component that you like here!
},
})}
tabBarOptions={{
inactiveTintColor: '#52875a',
activeTintColor: 'white',
style: styles.bottomNav,
}}
>
<Tab.Screen name="garden">
{(navigation) => (
<GardenNavigator {...navigation} userId={userId} />
)}
</Tab.Screen>
<Tab.Screen name="new plant">
{(navigation) => (
<PlantOptionsNavigator {...navigation} userId={userId} />
)}
</Tab.Screen>
<Tab.Screen name="profile">
{(navigation) => (
<Profile
{...navigation}
userInfo={userInfo}
logOut={logOut}
/>
)}
</Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
</>
)}
</>
);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
bottomNav: {
paddingTop: 10,
backgroundColor: '#355a3a',
color: 'white',
},
userName: {
marginTop: 50,
},
});