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 { DEV_USER_ID } from "@env";
|
||||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
|
import Loading from "./src/lib/loading";
|
||||||
|
|
||||||
// TODO: move to different file?
|
// TODO: move to different file?
|
||||||
const SetAuthHeaderBasedOnEnv = () => {
|
const SetAuthHeaderBasedOnEnv = () => {
|
||||||
@ -33,8 +34,10 @@ const SetAuthHeaderBasedOnEnv = () => {
|
|||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<ClientProvider>
|
<ClientProvider>
|
||||||
<SetAuthHeaderBasedOnEnv />
|
<Loading>
|
||||||
<AppNavigator />
|
<SetAuthHeaderBasedOnEnv />
|
||||||
|
<AppNavigator />
|
||||||
|
</Loading>
|
||||||
</ClientProvider>
|
</ClientProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
"main": "node_modules/expo/AppEntry.js",
|
"main": "node_modules/expo/AppEntry.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "NODE_ENV=development && expo start",
|
"start": "NODE_ENV=development && expo start",
|
||||||
|
"start:test": "NODE_ENV=test && expo start",
|
||||||
"start:android": "expo start --android",
|
"start:android": "expo start --android",
|
||||||
"start:ios": "expo start --ios",
|
"start:ios": "expo start --ios",
|
||||||
"android": "expo run:android",
|
"android": "expo run:android",
|
||||||
@ -11,7 +12,7 @@
|
|||||||
"android:test": "node ./start.js test",
|
"android:test": "node ./start.js test",
|
||||||
"ios": "expo run:ios",
|
"ios": "expo run:ios",
|
||||||
"ios:dev": "NODE_ENV=development 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",
|
"web": "expo start --web",
|
||||||
"lint": "eslint . --ext .js,.ts,.tsx",
|
"lint": "eslint . --ext .js,.ts,.tsx",
|
||||||
"lint:fix": "eslint . --ext .ts,.tsx --fix",
|
"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 Login from "../screens/login";
|
||||||
import Tabs from "./tab-navigator";
|
import Tabs from "./tab-navigator";
|
||||||
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
|
|
||||||
const Stack = createNativeStackNavigator();
|
const Stack = createNativeStackNavigator();
|
||||||
|
|
||||||
@ -18,11 +19,6 @@ const ScreensStack = () => (
|
|||||||
component={Tabs}
|
component={Tabs}
|
||||||
options={{ headerShown: false }}
|
options={{ headerShown: false }}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
|
||||||
name="Login"
|
|
||||||
component={Login}
|
|
||||||
options={{ headerShown: false }}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
/**
|
/**
|
||||||
@ -35,11 +31,27 @@ const ScreensStack = () => (
|
|||||||
export default function AppNavigator(): React.JSX.Element {
|
export default function AppNavigator(): React.JSX.Element {
|
||||||
// useColorScheme get's the theme from device settings
|
// useColorScheme get's the theme from device settings
|
||||||
const scheme = useColorScheme();
|
const scheme = useColorScheme();
|
||||||
|
const getToken = async () => {
|
||||||
|
const token = await AsyncStorage.getItem('token')
|
||||||
|
console.log('token', token)
|
||||||
|
return token
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
|
<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
|
||||||
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
<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>
|
</Stack.Navigator>
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user