sketch out nav with auth
This commit is contained in:
parent
112ed5b140
commit
e5e998df36
7
App.tsx
7
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>
|
||||
<SetAuthHeaderBasedOnEnv />
|
||||
<AppNavigator />
|
||||
<Loading>
|
||||
<SetAuthHeaderBasedOnEnv />
|
||||
<AppNavigator />
|
||||
</Loading>
|
||||
</ClientProvider>
|
||||
);
|
||||
};
|
||||
|
@ -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
36
src/lib/loading/index.tsx
Normal 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' }
|
||||
});
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user