sketch out nav with auth

App.tsx

@@ -4,6 +4,7 @@ import AppNavigator from "./src/navigation/app-navigator";
 
 import { DEV_USER_ID } from "@env";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import Loading from "./src/lib/loading";
 
 // TODO: move to different file?
 const SetAuthHeaderBasedOnEnv = () => {
@@ -33,8 +34,10 @@ const SetAuthHeaderBasedOnEnv = () => {
 const App: React.FC = () => {
 	return (
 		<ClientProvider>
+			<Loading>
 				<SetAuthHeaderBasedOnEnv />
 				<AppNavigator />
+			</Loading>
 		</ClientProvider>
 	);
 };

package.json

@@ -4,6 +4,7 @@
 	"main": "node_modules/expo/AppEntry.js",
 	"scripts": {
 		"start": "NODE_ENV=development && expo start",
+		"start:test": "NODE_ENV=test && expo start",
 		"start:android": "expo start --android",
 		"start:ios": "expo start --ios",
 		"android": "expo run:android",
@@ -11,7 +12,7 @@
 		"android:test": "node ./start.js test",
 		"ios": "expo run:ios",
 		"ios:dev": "NODE_ENV=development expo run:ios",
-		"ios:prod": "NODE_ENV=production expo run:ios",
+		"ios:test": "NODE_ENV=test expo run:ios",
 		"web": "expo start --web",
 		"lint": "eslint . --ext .js,.ts,.tsx",
 		"lint:fix": "eslint . --ext .ts,.tsx --fix",

src/lib/loading/index.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { colors } from '../../styles';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const LoadingContext = createContext<boolean>(false);
+
+export default function Loading({ children }) {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkHasToken = async () => {
+      const hasToken = await AsyncStorage.getItem('token');
+      // needs to connect to app state
+      return hasToken
+    }
+
+    checkHasToken()
+      .then(() => setLoading(false))
+  }, []);
+
+  if (!loading) {
+    return <LoadingContext.Provider value={loading}>{children}</LoadingContext.Provider>;
+  }
+
+  return (
+    <View style={s.container}>
+      <ActivityIndicator size="large" color={colors.tournamentBlue} />
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
+});

src/navigation/app-navigator.tsx

@@ -8,6 +8,7 @@ import { useColorScheme } from "react-native";
 
 import Login from "../screens/login";
 import Tabs from "./tab-navigator";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const Stack = createNativeStackNavigator();
 
@@ -18,11 +19,6 @@ const ScreensStack = () => (
 			component={Tabs}
 			options={{ headerShown: false }}
 		/>
-		<Stack.Screen
-			name="Login"
-			component={Login}
-			options={{ headerShown: false }}
-		/>
 	</Stack.Navigator>
 );
 /**
@@ -35,11 +31,27 @@ const ScreensStack = () => (
 export default function AppNavigator(): React.JSX.Element {
 	// useColorScheme get's the theme from device settings
 	const scheme = useColorScheme();
+	const getToken = async () => {
+		const token = await AsyncStorage.getItem('token')
+		console.log('token', token)
+		return token
+	}
+	
 
 	return (
 		<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
 			<Stack.Navigator screenOptions={{ headerShown: false }}>
+				{getToken ? (
 					<Stack.Screen name="App" component={ScreensStack} />
+				) : (
+					<Stack.Screen
+						name="Login"
+						component={Login}
+						options={{ headerShown: false }}
+					/>
+				)}
+				
+				
 			</Stack.Navigator>
 		</NavigationContainer>
 	);