-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
122 lines (113 loc) · 4.64 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
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useState, useRef, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'
import mainScreen from './screens/mainScreen'
import LearnScreen from './screens/learnScreen'
import TranslationScreen from './screens/translationScreen'
import LoginScreen from './screens/loginScreen'
import SignupScreen from './screens/signupScreen'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { initializeParse } from '@parse/react-native';
import { useFonts } from 'expo-font';
import Parse from 'parse/react-native.js';
import { addEvent } from './calls/db';
import ProfileScreen from './screens/profileScreen';
initializeParse(
"https://parseapi.back4app.com/",
"KLxcuhhjrb2JQwegqs5jto882HLxv7scW89HDACX",
"hfYT45KTgwRr4JBWGQFaCSokz7URgAPiyoTRlqxT"
);
export default function App() {
const Tab = createBottomTabNavigator();
const User = createStackNavigator();
const [loggedInUser, setLoggedInUser] = useState(false)
useEffect(() => {
const checkForUser = async () => {
await Parse.User.currentAsync().then((result) => {
if(result){
setLoggedInUser(true)
}else{
setLoggedInUser(false)
}
})
}
checkForUser();
}, [loggedInUser]);
const [fontsLoaded] = useFonts({
'Archivo_Black': require('./assets/ArchivoBlack-Regular.ttf'),
'Archivo': require('./assets/Archivo-Regular.ttf'),
});
function UserScreen() {
return (
<User.Navigator screenOptions={{ tabBarShowLabel: false, headerShown: false}} >
<User.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB'}, headerShadowVisible: false}} name="Login">
{(props) => <LoginScreen {...props} onLogIn={() => setLoggedInUser(true) } onLogOut={() => setLoggedInUser(false)} />}
</User.Screen>
<User.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB'}, headerShadowVisible: false}} name="Signup" component={SignupScreen} />
</User.Navigator>
);
}
if (!fontsLoaded) {
return null;
}
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'camera' : 'camera-outline';
iconColor = focused ? '#FFFDFB' : '#F06543'
} else if (route.name === 'Library') {
iconName = focused ? 'book' : 'book-outline';
iconColor = focused ? '#FFFDFB' : '#F06543'
} else if (route.name === 'Practice') {
iconName = focused ? 'language' : 'language-outline';
iconColor = focused ? '#FFFDFB' : '#F06543'
} else if (route.name === 'Profile') {
iconName = focused ? 'person-circle' : 'person-circle-outline';
iconColor = focused ? '#FFFDFB' : '#F06543'
}else {
iconName = focused ? 'log-in' : 'log-in-outline';
iconColor = focused ? '#FFFDFB' : '#F06543'
}
return <Ionicons name={iconName} size={size} color={iconColor} />;
},
tabBarActiveBackgroundColor: '#F06543',
tabBarActiveTintColor: "#FFFDFB",
tabBarInactiveTintColor: "black",
tabBarStyle: [{ backgroundColor: '#FFF8F1', borderTopWidth: 0, marginRight: 5 }],
})}
>
{loggedInUser ? (
<><Tab.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB' } }} name="Home" component={mainScreen} />
<Tab.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB' } }} name="Library" component={LearnScreen} />
<Tab.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB' } }} name="Practice" component={TranslationScreen} />
<Tab.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB' } }} name="Profile">
{(props) => <ProfileScreen {...props} onLogOut={() => setLoggedInUser(false)} />}
</Tab.Screen>
</>
) : (
<><Tab.Screen options={{ headerStyle: { backgroundColor: '#FFFDFB' }, headerShadowVisible: false }} name="Home" component={mainScreen} />
<Tab.Screen
options={{ headerStyle: { backgroundColor: '#FFFDFB' } }}
name="Login"
component={UserScreen} />
</>
)}
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightblue',
alignItems: 'center',
justifyContent: 'center',
},
});