summaryrefslogtreecommitdiff
path: root/app_expo/navigators
diff options
context:
space:
mode:
authorKirill Rogovoy <[email protected]>2021-07-23 11:02:26 +0300
committerKirill Rogovoy <[email protected]>2021-07-23 11:02:26 +0300
commit73308af061af5e17ac7d4a73fa027a2f303c70dd (patch)
tree816fb8231e13f58f7afe822742513b3150cdc871 /app_expo/navigators
parentb8c58914cc1e251ce161905340647b6824d0a7c4 (diff)
Update graph data when Emacs node changes + minor improvements
Diffstat (limited to 'app_expo/navigators')
-rw-r--r--app_expo/navigators/index.ts4
-rw-r--r--app_expo/navigators/main-navigator.tsx59
-rw-r--r--app_expo/navigators/navigation-utilities.tsx127
-rw-r--r--app_expo/navigators/root-navigator.tsx59
4 files changed, 0 insertions, 249 deletions
diff --git a/app_expo/navigators/index.ts b/app_expo/navigators/index.ts
deleted file mode 100644
index 57dfc6f..0000000
--- a/app_expo/navigators/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './main-navigator'
-export * from './root-navigator'
-export * from './navigation-utilities'
-// export other navigators from here
diff --git a/app_expo/navigators/main-navigator.tsx b/app_expo/navigators/main-navigator.tsx
deleted file mode 100644
index 095a9bf..0000000
--- a/app_expo/navigators/main-navigator.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * This is the navigator you will modify to display the logged-in screens of your app.
- * You can use RootNavigator to also display an auth flow or other user flows.
- *
- * You'll likely spend most of your time in this file.
- */
-import React from 'react'
-import { createStackNavigator } from '@react-navigation/stack'
-import { WelcomeScreen, DemoScreen, DemoListScreen, GraphScreen } from '../screens'
-
-/**
- * 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.
- *
- * If no params are allowed, pass through `undefined`. Generally speaking, we
- * recommend using your MobX-State-Tree store(s) to keep application state
- * rather than passing state through navigation params.
- *
- * For more information, see this documentation:
- * https://reactnavigation.org/docs/params/
- * https://reactnavigation.org/docs/typescript#type-checking-the-navigator
- */
-export type PrimaryParamList = {
- welcome: undefined
- demo: undefined
- demoList: undefined
- graph: undefined
-}
-
-// Documentation: https://reactnavigation.org/docs/stack-navigator/
-const Stack = createStackNavigator<PrimaryParamList>()
-
-export function MainNavigator() {
- return (
- <Stack.Navigator
- screenOptions={{
- cardStyle: { backgroundColor: 'transparent' },
- headerShown: false,
- }}
- >
- <Stack.Screen name="graph" component={GraphScreen} />
- </Stack.Navigator>
- )
-}
-
-/**
- <Stack.Screen name="welcome" component={WelcomeScreen} />
- <Stack.Screen name="demo" component={DemoScreen} />
- <Stack.Screen name="demoList" component={DemoListScreen} />
- * A list of routes from which we're allowed to leave the app when
- * the user presses the back button on Android.
- *
- * Anything not on this list will be a standard `back` action in
- * react-navigation.
- *
- * `canExit` is used in ./app/app.tsx in the `useBackButtonHandler` hook.
- */
-const exitRoutes = ['welcome']
-export const canExit = (routeName: string) => exitRoutes.includes(routeName)
diff --git a/app_expo/navigators/navigation-utilities.tsx b/app_expo/navigators/navigation-utilities.tsx
deleted file mode 100644
index 95137a4..0000000
--- a/app_expo/navigators/navigation-utilities.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { BackHandler } from 'react-native'
-import { PartialState, NavigationState, NavigationContainerRef } from '@react-navigation/native'
-
-export const RootNavigation = {
- navigate(name: string) {
- name // eslint-disable-line no-unused-expressions
- },
- goBack() {}, // eslint-disable-line @typescript-eslint/no-empty-function
- resetRoot(state?: PartialState<NavigationState> | NavigationState) {}, // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
- getRootState(): NavigationState {
- return {} as any
- },
-}
-
-export const setRootNavigation = (ref: React.RefObject<NavigationContainerRef>) => {
- for (const method in RootNavigation) {
- RootNavigation[method] = (...args: any) => {
- if (ref.current) {
- return ref.current[method](...args)
- }
- }
- }
-}
-
-/**
- * Gets the current screen from any navigation state.
- */
-export function getActiveRouteName(state: NavigationState | PartialState<NavigationState>) {
- const route = state.routes[state.index]
-
- // Found the active route -- return the name
- if (!route.state) return route.name
-
- // Recursive call to deal with nested routers
- return getActiveRouteName(route.state)
-}
-
-/**
- * Hook that handles Android back button presses and forwards those on to
- * the navigation or allows exiting the app.
- */
-export function useBackButtonHandler(
- ref: React.RefObject<NavigationContainerRef>,
- canExit: (routeName: string) => boolean,
-) {
- const canExitRef = useRef(canExit)
-
- useEffect(() => {
- canExitRef.current = canExit
- }, [canExit])
-
- useEffect(() => {
- // We'll fire this when the back button is pressed on Android.
- const onBackPress = () => {
- const navigation = ref.current
-
- if (navigation == null) {
- return false
- }
-
- // grab the current route
- const routeName = getActiveRouteName(navigation.getRootState())
-
- // are we allowed to exit?
- if (canExitRef.current(routeName)) {
- // let the system know we've not handled this event
- return false
- }
-
- // we can't exit, so let's turn this into a back action
- if (navigation.canGoBack()) {
- navigation.goBack()
-
- return true
- }
-
- return false
- }
-
- // Subscribe when we come to life
- BackHandler.addEventListener('hardwareBackPress', onBackPress)
-
- // Unsubscribe when we're done
- return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress)
- }, [ref])
-}
-
-/**
- * Custom hook for persisting navigation state.
- */
-export function useNavigationPersistence(storage: any, persistenceKey: string) {
- const [initialNavigationState, setInitialNavigationState] = useState()
- const [isRestoringNavigationState, setIsRestoringNavigationState] = useState(true)
-
- const routeNameRef = useRef()
- const onNavigationStateChange = (state) => {
- const previousRouteName = routeNameRef.current
- const currentRouteName = getActiveRouteName(state)
-
- if (previousRouteName !== currentRouteName) {
- // track screens.
- __DEV__ && console.tron.log(currentRouteName)
- }
-
- // Save the current route name for later comparision
- routeNameRef.current = currentRouteName
-
- // Persist state to storage
- storage.save(persistenceKey, state)
- }
-
- const restoreState = async () => {
- try {
- const state = await storage.load(persistenceKey)
- if (state) setInitialNavigationState(state)
- } finally {
- setIsRestoringNavigationState(false)
- }
- }
-
- useEffect(() => {
- if (isRestoringNavigationState) restoreState()
- }, [isRestoringNavigationState])
-
- return { onNavigationStateChange, restoreState, initialNavigationState }
-}
diff --git a/app_expo/navigators/root-navigator.tsx b/app_expo/navigators/root-navigator.tsx
deleted file mode 100644
index ed48dd5..0000000
--- a/app_expo/navigators/root-navigator.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * 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'