-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
81 lines (69 loc) · 2.11 KB
/
App.tsx
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
import React, { useContext, useEffect, useState } from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { SafeAreaView, StyleSheet } from 'react-native'
import { setCustomText } from 'react-native-global-props'
import { NavigationContainer } from '@react-navigation/native'
import { StatusBar } from 'expo-status-bar'
import * as SplashScreen from 'expo-splash-screen'
import { COLORS, customTextProps } from './GlobalStyles'
import { UserContext, UserProvider } from './contexts/UserContext'
import { BookProvider } from './contexts/BookContext'
import { SearchProvider } from './contexts/SearchContext'
import { useFonts } from './hooks/useFonts'
import { UnauthenticatedStack } from './stacks/UnauthenticatedStack'
import { AuthenticatedStack } from './stacks/AuthenticatedStack'
const queryClient = new QueryClient()
SplashScreen.preventAutoHideAsync()
const Root = () => {
const { authenticated } = useContext(UserContext)
return (
<SafeAreaView style={styles.app}>
<NavigationContainer>
{authenticated ? <AuthenticatedStack /> : <UnauthenticatedStack />}
</NavigationContainer>
</SafeAreaView>
)
}
const App: React.FC = () => {
const [appReady, setAppReady] = useState(false)
useEffect(() => {
const loadFonts = async () => {
await useFonts()
setAppReady(true)
}
loadFonts()
}, [])
useEffect(() => {
const prepare = async () => {
// simulate longer loading by waiting 1 second
await new Promise(resolve => setTimeout(resolve, 1000))
await SplashScreen.hideAsync()
}
if (appReady) {
prepare()
setCustomText(customTextProps)
}
}, [appReady])
if (!appReady) {
return null
}
return (
<QueryClientProvider client={queryClient}>
<UserProvider>
<BookProvider>
<SearchProvider>
<StatusBar style='dark' />
<Root />
</SearchProvider>
</BookProvider>
</UserProvider>
</QueryClientProvider>
)
}
const styles = StyleSheet.create({
app: {
backgroundColor: COLORS.primary300,
flex: 1,
},
})
export default App