sketch out nav with auth

This commit is contained in:
Loewy 2024-02-07 10:57:32 -08:00
parent 112ed5b140
commit e5e998df36
4 changed files with 61 additions and 9 deletions

View File

@ -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>
<SetAuthHeaderBasedOnEnv />
<AppNavigator />
<Loading>
<SetAuthHeaderBasedOnEnv />
<AppNavigator />
</Loading>
</ClientProvider>
);
};

View File

@ -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",

36
src/lib/loading/index.tsx Normal file
View File

@ -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' }
});

View File

@ -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>
);