-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
127 lines (117 loc) · 3.77 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
125
126
127
import { useEffect } from 'react';
import { StyleSheet, Appearance } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// Import screens
import Title from './screens/Title';
import Home from './screens/Home';
import ReviewDetails from './screens/ReviewDetails';
import PostCreate from './screens/PostCreate';
import Login from './screens/Login';
import Signup from './screens/Signup';
// Import components
import InfoButton from './components/InfoButton';
import HeaderBG from './components/HeaderBG';
import Profile from './screens/Profile';
SplashScreen.preventAutoHideAsync();
const Stack = createNativeStackNavigator();
export default function App() {
const [fontsLoaded] = useFonts({
'nunito-regular': require('./assets/fonts/Nunito-Regular.ttf'),
'nunito-bold': require('./assets/fonts/Nunito-Bold.ttf'),
'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf'),
});
useEffect(() => {
async function prepare() {
await SplashScreen.preventAutoHideAsync();
}
prepare();
}, []);
if (!fontsLoaded)
return null;
else SplashScreen.hideAsync();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Title'>
<Stack.Screen name="Title"
component={Title}
options={{
headerShown: false,
}}
/>
<Stack.Screen name="Home"
component={Home}
options={ ({ navigation }) => ({
title: 'FlixReview',
headerTitleStyle: styles.appTitle,
headerTitleAlign: 'left',
headerRight: () => (<InfoButton type='account' func={() => navigation.navigate('Profile')} />),
headerBackground: (() => <HeaderBG />),
headerTintColor: '#fff',
}) }
/>
<Stack.Screen name='Details'
component={ReviewDetails}
options={{
title: '',
headerStyle: styles.headerStyle,
headerTintColor: '#fff',
animation: 'slide_from_right',
}} />
<Stack.Screen name='PostCreate'
component={PostCreate}
options={{
title: 'Create a review',
headerStyle: styles.headerStyle,
headerTitleStyle: styles.otherScreenTitle,
headerTintColor: '#fff',
}} />
<Stack.Screen name='Login'
component={Login}
options={{
title: '',
headerStyle: styles.headerStyle,
headerTitleStyle: styles.otherScreenTitle,
headerTintColor: '#fff',
}}
/>
<Stack.Screen name='Signup'
component={Signup}
options={{
title: '',
headerStyle: styles.headerStyle,
headerTitleStyle: styles.otherScreenTitle,
headerTintColor: '#fff',
}}
/>
<Stack.Screen name='Profile'
component={Profile}
options={{
title: 'User Profile',
headerTitleAlign: 'center',
headerStyle: styles.headerStyle,
headerTitleStyle: styles.otherScreenTitle,
headerTintColor: '#fff',
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
headerStyle: {
backgroundColor: Appearance.getColorScheme() === 'dark' ? '#fff' : '#17162e',
},
appTitle: {
color: '#fff',
fontSize: 26,
fontFamily: 'raleway-bold',
},
otherScreenTitle: {
color: Appearance.getColorScheme() === 'dark' ? '#000' : '#fff',
fontSize: 22,
}
});