summaryrefslogtreecommitdiff
path: root/app_expo/navigators/root-navigator.tsx
diff options
context:
space:
mode:
authorKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
committerKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
commit5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch)
tree273dfc086444533d86d580961c92ba8d14781a67 /app_expo/navigators/root-navigator.tsx
parentf0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff)
WIP
Diffstat (limited to 'app_expo/navigators/root-navigator.tsx')
-rw-r--r--app_expo/navigators/root-navigator.tsx59
1 files changed, 59 insertions, 0 deletions
diff --git a/app_expo/navigators/root-navigator.tsx b/app_expo/navigators/root-navigator.tsx
new file mode 100644
index 0000000..ed48dd5
--- /dev/null
+++ b/app_expo/navigators/root-navigator.tsx
@@ -0,0 +1,59 @@
+/**
+ * The root navigator is used to switch between major navigation flows of your app.
+ * Generally speaking, it will contain an auth flow (registration, login, forgot password)
+ * and a "main" flow (which is contained in your MainNavigator) which the user
+ * will use once logged in.
+ */
+import React from 'react'
+import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
+import { MainNavigator } from './main-navigator'
+import { color } from '../theme'
+
+/**
+ * This type allows TypeScript to know what routes are defined in this navigator
+ * as well as what properties (if any) they might take when navigating to them.
+ *
+ * We recommend using MobX-State-Tree store(s) to handle state rather than navigation params.
+ *
+ * For more information, see this documentation:
+ * https://reactnavigation.org/docs/params/
+ * https://reactnavigation.org/docs/typescript#type-checking-the-navigator
+ */
+export type RootParamList = {
+ mainStack: undefined
+}
+
+const Stack = createStackNavigator<RootParamList>()
+
+const RootStack = () => {
+ return (
+ <Stack.Navigator
+ screenOptions={{
+ cardStyle: { backgroundColor: color.palette.deepPurple },
+ headerShown: false,
+ }}
+ >
+ <Stack.Screen
+ name="mainStack"
+ component={MainNavigator}
+ options={{
+ headerShown: false,
+ }}
+ />
+ </Stack.Navigator>
+ )
+}
+
+export const RootNavigator = React.forwardRef<
+ NavigationContainerRef,
+ Partial<React.ComponentProps<typeof NavigationContainer>>
+>((props, ref) => {
+ return (
+ <NavigationContainer {...props} ref={ref}>
+ <RootStack />
+ </NavigationContainer>
+ )
+})
+
+RootNavigator.displayName = 'RootNavigator'