Fix Splash + Onboarding

Author: chnirt

README.md

@@ -90,3 +90,7 @@
 22. Handle ID javascript with firebase
 
 - https://stackoverflow.com/questions/56144736/react-native-firebase-display-array-of-objects-using-flatlist
+
+23. Folder structure READ.ME
+
+- https://github.com/kriasoft/Folder-Structure-Conventions/blob/master/README.md

src/navigation/AppNavigator.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
+import {useNavigation} from '@react-navigation/native';
+import firebase from 'firebase';
 
 import AuthLoadingScreen from './AuthLoadingNavigator';
 import DrawerNavigator from './DrawerNavigator';
@@ -8,6 +10,22 @@ import AuthStackNavigator from './AuthNavigator';
 const Stack = createStackNavigator();
 
 export default function AppStackNavigator() {
+  const navigation = useNavigation();
+  const {navigate} = navigation;
+
+  // const authContext = useContext(CTX);
+  // const {token} = authContext;
+
+  useEffect(() => {
+    _bootstrapAsync();
+  }, []);
+
+  function _bootstrapAsync() {
+    firebase.auth().onAuthStateChanged(user => {
+      navigate(user ? 'Dashboard' : 'Auth');
+    });
+  }
+
   return (
     <Stack.Navigator initialRouteName="AuthLoading" headerMode="none">
       <Stack.Screen name="Auth" component={AuthStackNavigator} />

src/navigation/AuthLoadingNavigator.js

@@ -15,7 +15,7 @@ export default function AuthLoadingScreen(props) {
 
   useEffect(() => {
     _bootstrapAsync();
-  });
+  }, []);
 
   function _bootstrapAsync() {
     firebase.auth().onAuthStateChanged(user => {

src/navigation/InitNavigator.js

@@ -1,12 +1,9 @@
 import React, {useEffect} from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
+import {LayoutAnimation} from 'react-native';
 
-import SplashScreen from '../screens/Splash';
-import OnBoardingScreen from '../screens/OnBoarding';
 import AppNavigator from './AppNavigator';
-
-// import LoadingScreen from '../components/Loading';
-import {LayoutAnimation} from 'react-native';
+import IntroScreen from '../screens/Intro';
 
 const Stack = createStackNavigator();
 
@@ -15,10 +12,8 @@ export default function InitialStackNavigator() {
     LayoutAnimation.easeInEaseOut();
   });
   return (
-    <Stack.Navigator initialRouteName="Splash" headerMode="none">
-      {/* <Stack.Screen name="Loading" component={LoadingScreen} /> */}
-      <Stack.Screen name="Splash" component={SplashScreen} />
-      <Stack.Screen name="OnBoarding" component={OnBoardingScreen} />
+    <Stack.Navigator initialRouteName="Intro" headerMode="none">
+      <Stack.Screen name="Intro" component={IntroScreen} />
       <Stack.Screen name="App" component={AppNavigator} />
     </Stack.Navigator>
   );

src/screens/Home.js

@@ -64,21 +64,20 @@ export default function HomeScreen() {
         var returnArray = [];
 
         snapshot.forEach(function(doc) {
-          let item = {};
-          item = doc.data();
-          item.id = doc.id;
-          item.avatar = require('../assets/avatar/image1.png');
-          returnArray.push(item);
+          const {id} = doc;
+          returnArray.push({
+            id,
+            ...doc.data(),
+            avatar: require('../assets/avatar/image1.png'),
+          });
         });
 
-        // console.log(returnArray);
-
         setPosts(returnArray);
       })
       .catch(err => {
         console.log('Error getting documents', err);
       });
-  });
+  }, []);
 
   renderPost = post => {
     return (

src/screens/Intro.js

@@ -0,0 +1,53 @@
+import React, {useEffect, useContext, useState} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+
+import {CTX} from '../tools/context';
+
+import SplashScreen from './Splash';
+import OnBoardingScreen from './OnBoarding';
+
+export default function IntroScreen() {
+  const [loading, setLoading] = useState(true);
+
+  const skipContext = useContext(CTX);
+  const {skip} = skipContext;
+
+  const navigation = useNavigation();
+  const {navigate} = navigation;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+    return () => clearTimeout(timer);
+  });
+
+  return (
+    <View style={styles.container}>
+      {loading ? (
+        <SplashScreen />
+      ) : skip ? (
+        navigate('App')
+      ) : (
+        <OnBoardingScreen />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFF6F9',
+  },
+  title: {
+    color: '#000000',
+  },
+  image: {
+    height: 200,
+    width: 200,
+  },
+});