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
|
/**
* Welcome to the main entry point of the app. In this file, we'll
* be kicking off our app.
*
* Most of this file is boilerplate and you shouldn't need to modify
* it very often. But take some time to look through and understand
* what is going on here.
*
* The app navigation resides in ./app/navigators, so head over there
* if you're interested in adding screens and navigators.
*/
import './i18n'
import './utils/ignore-warnings'
import React, { useState, useEffect, useRef } from 'react'
import { NavigationContainerRef } from '@react-navigation/native'
import {
SafeAreaProvider,
initialWindowMetrics,
} from 'react-native-safe-area-context'
import { initFonts } from './theme/fonts' // expo
import * as storage from './utils/storage'
import {
useBackButtonHandler,
RootNavigator,
canExit,
setRootNavigation,
useNavigationPersistence,
} from './navigators'
import { RootStore, RootStoreProvider, setupRootStore } from './models'
import { ToggleStorybook } from '../storybook/toggle-storybook'
// This puts screens in a native ViewController or Activity. If you want fully native
// stack navigation, use `createNativeStackNavigator` in place of `createStackNavigator`:
// https://github.com/kmagiera/react-native-screens#using-native-stack-navigator
import { enableScreens } from 'react-native-screens'
enableScreens()
export const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE'
/**
* This is the root component of our app.
*/
function App() {
const navigationRef = useRef<NavigationContainerRef>(null)
const [rootStore, setRootStore] = useState<RootStore | undefined>(undefined)
setRootNavigation(navigationRef)
useBackButtonHandler(navigationRef, canExit)
const {
initialNavigationState,
onNavigationStateChange,
} = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
// Kick off initial async loading actions, like loading fonts and RootStore
useEffect(() => {
;(async () => {
await initFonts() // expo
setupRootStore().then(setRootStore)
})()
}, [])
// Before we show the app, we have to wait for our state to be ready.
// In the meantime, don't render anything. This will be the background
// color set in native by rootView's background color. You can replace
// with your own loading component if you wish.
if (!rootStore) return null
// otherwise, we're ready to render the app
return (
<ToggleStorybook>
<RootStoreProvider value={rootStore}>
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<RootNavigator
ref={navigationRef}
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
</SafeAreaProvider>
</RootStoreProvider>
</ToggleStorybook>
)
}
export default App
|
