[TMA-402] New and beautiful splashscreen (#135)

* Some changes

* Some more changes

* Final touch

6 files changed, 21 insertions, 45 deletions

diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index e54f038d..cb45ead6 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -4,6 +4,7 @@ import Onboarding from './onboarding';
 import {useSelector, useDispatch} from 'react-redux';
 import {RootState} from '../store/rootReducer';
 import {userLogin} from '../utils';
+import SplashScreen from 'react-native-splash-screen';
 
 const Routes: React.FC = () => {
   const {
@@ -18,9 +19,16 @@ const Routes: React.FC = () => {
    * Suggestions?
    * NOTE : Not something introduced by this commit but something we already have.
    */
+
+  /**
+   * SplashScreen is the actual react-native's splash screen.
+   * We can hide / show it depending on our application needs.
+   */
   useEffect(() => {
     if (!userId) {
       userLogin(dispatch, {userId: '', username: ''});
+    } else {
+      SplashScreen.hide();
     }
   }, [userId, userLogin]);
 
diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx
index 138fb3ed..4ebc281c 100644
--- a/src/routes/onboarding/Onboarding.tsx
+++ b/src/routes/onboarding/Onboarding.tsx
@@ -9,7 +9,6 @@ import {
   Verification,
   ProfileOnboarding,
   Checkpoint,
-  Splash,
   SocialMedia,
 } from '../../screens';
 import {StackCardInterpolationProps} from '@react-navigation/stack';
@@ -23,9 +22,8 @@ const forFade = ({current}: StackCardInterpolationProps) => ({
 const Onboarding: React.FC = () => {
   return (
     <OnboardingStack.Navigator
-      initialRouteName="Splash"
+      initialRouteName="Login"
       screenOptions={{headerShown: false}}>
-      <OnboardingStack.Screen name="Splash" component={Splash} />
       <OnboardingStack.Screen
         name="Login"
         component={Login}
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
index d40e0728..ccf9be47 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStack.tsx
@@ -1,7 +1,6 @@
 import {createStackNavigator} from '@react-navigation/stack';
 
 export type OnboardingStackParams = {
-  Splash: undefined;
   Login: undefined;
   InvitationCodeVerification: undefined;
   RegistrationOne: undefined;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 2ddae403..2738d6ca 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {
@@ -20,6 +20,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {UserType} from '../../types';
 import {useDispatch} from 'react-redux';
 import {userLogin} from '../../utils';
+import SplashScreen from 'react-native-splash-screen';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
@@ -62,8 +63,18 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   const dispatch = useDispatch();
 
   /**
+   * Hide the SplashScreen after the timeout. This is done to wait for AsyncStorage to get us the user from disk
+   */
+  useEffect(() => {
+    setTimeout(() => {
+      SplashScreen.hide();
+    }, 100);
+  });
+
+  /**
    * Updates the state of username. Also verifies the input of the username field by ensuring proper length and appropriate characters.
    */
+
   const handleUsernameUpdate = (val: string) => {
     val = val.trim();
     let validLength: boolean = val.length >= 3;
diff --git a/src/screens/onboarding/Splash.tsx b/src/screens/onboarding/Splash.tsx
deleted file mode 100644
index 332b73b5..00000000
--- a/src/screens/onboarding/Splash.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {useEffect} from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Background} from '../../components';
-import {Image, StyleSheet} from 'react-native';
-import {OnboardingStackParams} from '../../routes';
-
-type SplashScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
-type SplashScreenNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'Login'
->;
-interface SplashProps {
-  route: SplashScreenRouteProp;
-  navigation: SplashScreenNavigationProp;
-}
-const Splash: React.FC<SplashProps> = ({navigation}) => {
-  useEffect(() => {
-    const timer = setTimeout(() => navigation.navigate('Login'), 1500);
-    return () => clearTimeout(timer);
-  }, [navigation]);
-  return (
-    <Background centered>
-      <Image
-        source={require('../../assets/images/logo.png')}
-        style={styles.logo}
-      />
-    </Background>
-  );
-};
-const styles = StyleSheet.create({
-  logo: {
-    width: 284,
-    height: 197,
-    marginBottom: 0,
-  },
-});
-
-export default Splash;
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index d8ae7644..e116bf2c 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -5,6 +5,5 @@ export {default as RegistrationThree} from './RegistrationThree';
 export {default as Verification} from './Verification';
 export {default as Checkpoint} from './Checkpoint';
 export {default as ProfileOnboarding} from './ProfileOnboarding';
-export {default as Splash} from './Splash';
 export {default as InvitationCodeVerification} from './InvitationCodeVerification';
 export {default as SocialMedia} from './SocialMedia';