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
|
/**
* 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
|
