sketch out nav with auth

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 }}>
-				<Stack.Screen name="App" component={ScreensStack} />
+				{getToken ? (
+					<Stack.Screen name="App" component={ScreensStack} />
+				) : (
+					<Stack.Screen
+						name="Login"
+						component={Login}
+						options={{ headerShown: false }}
+					/>
+				)}
+				
+				
 			</Stack.Navigator>
 		</NavigationContainer>
 	);