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

* Some changes

* Some more changes

* Final touch

3 files changed, 12 insertions, 41 deletions

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';