Working base navigation system for login (#498)

This gets the project to the 0.2 milestone. The app is working on
iOS and Android. There are light and dark mode splash screens.
There is a simple native navigation system to help the user login.

Add gesture handler and navigation/stack.
Working Auth navigation.

native_gg/app/App.tsx

@@ -1,31 +1,14 @@
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { Button, Text, View } from "react-native";
 import { SafeAreaProvider, initialWindowMetrics } from "react-native-safe-area-context";
-import Director from "./screens/Director";
 import GlobalStateProvider from "./state/GlobalState";
-
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-function HomeScreen({ navigation }: { navigation: any }) {
-  return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      <Text>Home Screen</Text>
-      <Button title="Go to Director" onPress={() => navigation.navigate("Director")} />
-    </View>
-  );
-}
-
-const Stack = createNativeStackNavigator();
+import RootScreen from "./RootScreen";
+import { NavigationContainer } from "@react-navigation/native";
 
 export default function App() {
   return (
     <GlobalStateProvider>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
         <NavigationContainer>
-          <Stack.Navigator>
-            <Stack.Screen name="Home" component={HomeScreen} />
-            <Stack.Screen name="Director" component={Director} />
-          </Stack.Navigator>
+          <RootScreen />
         </NavigationContainer>
       </SafeAreaProvider>
     </GlobalStateProvider>

native_gg/app/RootScreen.tsx

@@ -0,0 +1,41 @@
+import { NavigationProp, useNavigation } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { Button, Text, View } from "react-native";
+import { useGlobalStateContext } from "./state/GlobalState";
+import Login from "./screens/Login";
+import { useEffect } from "react";
+import AuthService from "./authentication/AuthService";
+
+function HomeScreen({ navigation }: { navigation: NavigationProp<ReactNavigation.RootParamList> }) {
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
+      <Button title="Logout" onPress={() => AuthService.logoutCurrentUser()} />
+    </View>
+  );
+}
+
+const RootStack = createStackNavigator();
+
+export default function RootScreen() {
+  const globalState = useGlobalStateContext();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    if (globalState.appReady && !globalState.authenticated) {
+      console.log("not authenticated so opening login");
+      navigation.navigate("Login" as never);
+    }
+  }, [globalState.authenticated, globalState.appReady, navigation]);
+
+  return (
+    <RootStack.Navigator>
+      <RootStack.Group>
+        <RootStack.Screen name="Home" component={HomeScreen} />
+      </RootStack.Group>
+      <RootStack.Group screenOptions={{ presentation: "modal", gestureEnabled: false, headerShown: false }}>
+        <RootStack.Screen name="Login" component={Login} />
+      </RootStack.Group>
+    </RootStack.Navigator>
+  );
+}

native_gg/app/index.js

@@ -1,3 +1,4 @@
+import "react-native-gesture-handler"; // Avoid crash in production https://reactnavigation.org/docs/stack-navigator/#installation
 import * as SplashScreen from "expo-splash-screen";
 SplashScreen.preventAutoHideAsync();
 

native_gg/app/screens/Login.tsx

@@ -1,17 +1,26 @@
 import { ScrollView, StyleSheet, Text, View, useColorScheme } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import type { NavigationProp } from "@react-navigation/native";
 import AuthService from "../authentication/AuthService";
 import AuthUI from "../authentication/AuthUI";
 import { useGlobalStateContext } from "../state/GlobalState";
+import { useEffect } from "react";
 
 type theme = "light" | "dark" | "auto";
 
-export default function Director() {
+export default function Login({ navigation }: { navigation: NavigationProp<ReactNavigation.RootParamList> }) {
   const colorScheme = useColorScheme();
+  const globalState = useGlobalStateContext();
 
   const themeContainerStyle = colorScheme === "light" ? styles.topContainerLight : styles.topContainerDark;
   const themeTextStyle = colorScheme === "light" ? styles.textLight : styles.textDark;
-  const globalState = useGlobalStateContext();
+
+  useEffect(() => {
+    if (globalState.appReady && globalState.authenticated) {
+      console.log("authenticated so dismiss login view");
+      navigation.goBack();
+    }
+  }, [globalState.appReady, globalState.authenticated, navigation]);
 
   return (
     <SafeAreaView style={themeContainerStyle}>

native_gg/ios/Podfile.lock

@@ -1455,6 +1455,25 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNGestureHandler (2.15.0):
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (3.29.0):
     - glog
     - hermes-engine
@@ -1623,6 +1642,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -1789,6 +1809,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSVG:
@@ -1877,6 +1899,7 @@ SPEC CHECKSUMS:
   React-utils: 6e5ad394416482ae21831050928ae27348f83487
   ReactCommon: 840a955d37b7f3358554d819446bffcf624b2522
   RNCAsyncStorage: ecb81c87aa4b13503485f49b48417a646ef1d54f
+  RNGestureHandler: 3ece35af01c47c38ae384e08610905388d4ed591
   RNScreens: f7b8bb892b4957f6f91e5dfd9a191e7f13ce8baa
   RNSVG: db32cfcad0a221fd175e0882eff7bcba7690380a
   SDWebImage: 750adf017a315a280c60fde706ab1e552a3ae4e9

native_gg/package.json

@@ -22,6 +22,7 @@
     "@react-native-async-storage/async-storage": "1.22.1",
     "@react-navigation/native": "6.1.10",
     "@react-navigation/native-stack": "6.9.18",
+    "@react-navigation/stack": "6.3.21",
     "base-64": "1.0.0",
     "expo": "50.0.7",
     "expo-build-properties": "0.11.1",
@@ -37,6 +38,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-gesture-handler": "2.15.0",
     "react-native-mmkv": "2.12.1",
     "react-native-safe-area-context": "4.9.0",
     "react-native-screens": "3.29.0",