feat: add startup load & add home, create profile screen

App.js

@@ -4,7 +4,6 @@ import { StatusBar, View } from "react-native";
 import "react-native-gesture-handler";
 import StackNavigator from "./app/navigation/StackNavigator";
 import { NavigationContainer } from '@react-navigation/native';
-import AppLoading from 'expo-app-loading';
 import * as SplashScreen from 'expo-splash-screen';
 import useFont from "./app/hooks/useFont";
 import { AuthContextProvider } from "./app/context/AuthContext";
@@ -105,7 +104,9 @@ export default function App() {
     <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
       <NativeBaseProvider theme={theme}>
         <AuthContextProvider>
-          <NavigationContainer>
+          <NavigationContainer onStateChange={(e) => {
+            console.log(e.index);
+          }}>
             <StatusBar barStyle={"default"} />
             <StackNavigator />
           </NavigationContainer>

app/context/AuthContext/index.js

@@ -1,5 +1,8 @@
-import React, { createContext, useEffect, useState } from "react";
+import React, { createContext, useCallback, useEffect, useState } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as SplashScreen from 'expo-splash-screen';
+
+SplashScreen.preventAutoHideAsync();
 
 const AuthContext = createContext();
 const storeData = async (key, data) => {
@@ -19,6 +22,7 @@ const clearAll = async () => {
 };
 
 const AuthContextProvider = ({ children }) => {
+  const [appIsReady, setAppIsReady] = useState(false)
   const [user, setUser] = useState({});
   const [accessToken, setAccessToken] = useState(null);
 
@@ -31,12 +35,20 @@ const AuthContextProvider = ({ children }) => {
         setAccessToken(JSON.parse(accessToken));
       } catch (err) {
         console.log(err);
+      } finally {
+        setAppIsReady(true);
       }
     };
 
     firstLoad();
   }, []);
 
+  const onLayoutRootView = useCallback(async () => {
+    if (appIsReady) {
+      await SplashScreen.hideAsync();
+    }
+  }, [appIsReady]);
+
   const headers = {
     Authorization: accessToken,
     "Content-Type": "application/json",
@@ -46,8 +58,6 @@ const AuthContextProvider = ({ children }) => {
     user !== null && accessToken !== null ? true : false
   );
 
-  console.log(isAuth, user, accessToken);
-
   const storeCredentials = (resData) => {
     storeData("@user", resData.user);
     storeData("@accessToken", resData.accessToken);
@@ -67,8 +77,13 @@ const AuthContextProvider = ({ children }) => {
     setIsAuth(() => user !== null && accessToken !== null ? true : false)
   }, [user, accessToken])
 
+  if (!appIsReady) {
+    return null
+  }
+
   return (
     <AuthContext.Provider
+      onLayout={onLayoutRootView}
       value={{ user, accessToken, headers, isAuth, storeCredentials }}
     >
       {children}

app/navigation/StackNavigator/index.js

@@ -1,22 +1,52 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
+import { useContext, useEffect } from 'react';
+import { AuthContext } from '../../context/AuthContext';
+import CreateProfile from '../../screens/CreateProfile';
+import Home from '../../screens/Home';
 import Login from '../../screens/Login';
 import Walkthrough from '../../screens/Walkthrough';
 import Welcome from '../../screens/Welcome';
 
 const Stack = createStackNavigator();
 
 const StackNavigator = () => {
-    return (
-        <Stack.Navigator
-            screenOptions={{
-                headerShown: false,
-                ...TransitionPresets.SlideFromRightIOS
-            }}>
-            <Stack.Screen name="Welcome" component={Welcome} />
-            <Stack.Screen name="Walkthrough" component={Walkthrough} />
-            <Stack.Screen name="Login" component={Login} />
-        </Stack.Navigator>
-    );
+
+  const { user, isAuth } = useContext(AuthContext)
+
+  console.log(user, isAuth);
+
+  const initialRoute = () => {
+    if (!isAuth) return "Welcome";
+
+    if (!user.isProfile) return "CreateProfile"
+
+    return "Home"
+  }
+
+  return (
+    <Stack.Navigator
+      initialRouteName={initialRoute()}
+      screenOptions={{
+        headerShown: false,
+        ...TransitionPresets.SlideFromRightIOS
+      }}>
+      <Stack.Screen name="Welcome" component={Welcome} />
+      {!isAuth &&
+        <>
+          <Stack.Screen name="Walkthrough" component={Walkthrough} />
+          <Stack.Screen name="Login" component={Login} />
+        </>
+      }
+      {
+        isAuth &&
+        <>
+          <Stack.Screen name="CreateProfile" component={CreateProfile} />
+          <Stack.Screen name="Home" component={Home} />
+        </>
+      }
+    </Stack.Navigator>
+  );
 }
 
 export default StackNavigator;

app/screens/CreateProfile/index.js

@@ -0,0 +1,101 @@
+import React, { useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { heightScreen, widthScreen } from '../../utils/layout';
+import { Box, Button, Center, CloseIcon, Select, CheckIcon, FormControl, HStack, Icon, IconButton, Image, Input, Stack, Text, VStack } from 'native-base';
+import { AntDesign } from '@expo/vector-icons';
+import { AuthContext } from '../../context/AuthContext';
+import { Fontisto, MaterialIcons } from "@expo/vector-icons";
+
+
+
+const CreateProfile = () => {
+
+  const { user } = useContext(AuthContext)
+
+  return (
+    <View style={styles.container}>
+      <Image source={{ uri: user.imageUrl }} alt={user.name}
+        size='xl'
+        rounded='full' borderColor='primary.100'
+        borderWidth='3'
+      />
+      <Text>Create Profile</Text>
+
+      <FormControl>
+        <FormControl.Label>Basic details:</FormControl.Label>
+        <Stack space={5}>
+          <Stack mt='2'>
+            <Input
+              InputLeftElement={
+                <Icon as={<MaterialIcons name="phone" />}
+                  size={5} ml="2" color="muted.600" />}
+              variant="underlined" p={2} placeholder="Enter your phone number" />
+          </Stack>
+          <Stack mt='2'>
+            <Input
+              InputLeftElement={
+                <Icon as={<MaterialIcons name="phone" />}
+                  size={5} ml="2" color="muted.600" />}
+              variant="underlined" p={2} placeholder="Enter your city name" />
+          </Stack>
+          <Stack mt='2'>
+            <Input
+              InputLeftElement={
+                <Icon as={<MaterialIcons name="location" />}
+                  size={5} ml="2" color="muted.600" />}
+              variant="underlined" p={2} placeholder="Enter your pin code" />
+          </Stack>
+          <Stack mt='2'>
+            <Select
+              // selectedValue={service} 
+              borderWidth='0'
+              borderBottomWidth='1'
+              minWidth="200" accessibilityLabel="Choose Service"
+              placeholder="Choose Service" _selectedItem={{
+                bg: "teal.600",
+                startIcon:
+                  <Icon as={<Fontisto name='blood-drop' />}
+                    size={5} />,
+                endIcon: <CheckIcon size="5" />
+              }} mt={1}
+            // onValueChange={itemValue => setService(itemValue)}
+            >
+              <Select.Item label="UX Research" value="ux" />
+              <Select.Item label="Web Development" value="web" />
+              <Select.Item label="Cross Platform Development" value="cross" />
+              <Select.Item label="UI Designing" value="ui" />
+              <Select.Item label="Backend Development" value="backend" />
+            </Select>
+          </Stack>
+
+          <Center>
+            <Button
+              mt='5'
+              size='lg'
+              w='1/2'
+              fontSize='xl'
+              rounded='2xl'
+            >
+              Continue
+            </Button>
+          </Center>
+        </Stack>
+      </FormControl>
+
+    </View>
+  );
+}
+
+export default CreateProfile
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: widthScreen,
+    backgroundColor: "#fff",
+    paddingHorizontal: heightScreen > 800 ? 32 : 26,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+  },
+});

app/screens/Home/index.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { heightScreen, widthScreen } from '../../utils/layout';
+import { Box, Button, CloseIcon, HStack, Icon, IconButton, Text, VStack } from 'native-base';
+import { AntDesign } from '@expo/vector-icons';
+
+
+
+const Home = () => {
+
+  return (
+    <View style={styles.container}>
+      <Text>Hello</Text>
+
+    </View>
+  );
+}
+
+export default Home
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: widthScreen,
+    backgroundColor: "#fff",
+    paddingHorizontal: heightScreen > 800 ? 32 : 26,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+  },
+});

app/screens/Login/index.js

@@ -10,6 +10,7 @@ import { AntDesign } from '@expo/vector-icons';
 import { Alert } from "native-base";
 import bloodLineApi from '../../api';
 import { AuthContext } from '../../context/AuthContext';
+import { useNavigation } from '@react-navigation/native';
 
 
 WebBrowser.maybeCompleteAuthSession();
@@ -18,6 +19,7 @@ const Login = () => {
 
   const [showError, setShowError] = React.useState(false);
   const { storeCredentials } = React.useContext(AuthContext)
+  const navigation = useNavigation()
 
   const [request, response, promptAsync] = Google.useAuthRequest({
     expoClientId: '938415613346-3ecn64agj1971r8l0s520kc41d4s0n6p.apps.googleusercontent.com',
@@ -32,6 +34,7 @@ const Login = () => {
         accessToken: authentication.accessToken
       }).then((res) => {
         storeCredentials(res.data);
+        setTimeout(() => navigation.navigate("CreateProfile"), 200)
       }).catch((err) => {
         console.log(err);
         setShowError(true)