From 83e655b9a252cf623b2f5c094212375723457285 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Thu, 27 Aug 2020 09:48:16 -0700
Subject: [TMA-132] App Splash Screen (#38)

* Add splash screen to onboarding stack

* Fix improper wizard behavior

* Set search bar autoCapitalize to none

* Add splash screen fade transition

* Update stack navigator screenOptions
---
 src/components/onboarding/RegistrationWizard.tsx | 19 +++++++-----
 src/components/search/SearchBar.tsx              |  1 +
 src/routes/onboarding/Onboarding.tsx             | 33 +++++++++++---------
 src/routes/onboarding/OnboardingStack.tsx        |  1 +
 src/screens/onboarding/Splash.tsx                | 39 ++++++++++++++++++++++++
 src/screens/onboarding/index.ts                  |  1 +
 6 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 src/screens/onboarding/Splash.tsx

(limited to 'src')

diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx
index 31c3bbdf..0094c8af 100644
--- a/src/components/onboarding/RegistrationWizard.tsx
+++ b/src/components/onboarding/RegistrationWizard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View, StyleSheet, ViewProps, Keyboard} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 
@@ -13,12 +13,17 @@ const RegistrationWizard = (props: RegistrationWizardProps) => {
   // detects visibility of keyboard to display or hide wizard
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
-  Keyboard.addListener('keyboardDidShow', () => {
-    setKeyboardVisible(true);
-  });
-  Keyboard.addListener('keyboardDidHide', () => {
-    setKeyboardVisible(false);
-  });
+  useEffect(() => {
+    const showKeyboard = () => setKeyboardVisible(true);
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
+    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+  }, []);
+
+  useEffect(() => {
+    const hideKeyboard = () => setKeyboardVisible(false);
+    Keyboard.addListener('keyboardWillHide', hideKeyboard);
+    return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+  }, []);
 
   return (
     <View {...props}>
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index ce825d8a..a711f8f8 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -68,6 +68,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
           placeholderTextColor={'#fff'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="while-editing"
+          autoCapitalize="none"
           {...{value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx
index 40dbc970..b14bd85c 100644
--- a/src/routes/onboarding/Onboarding.tsx
+++ b/src/routes/onboarding/Onboarding.tsx
@@ -7,40 +7,43 @@ import {
   Verification,
   ProfileOnboarding,
   Checkpoint,
+  Splash,
 } from '../../screens';
+import {StackCardInterpolationProps} from '@react-navigation/stack';
+
+const forFade = ({current}: StackCardInterpolationProps) => ({
+  cardStyle: {
+    opacity: current.progress,
+  },
+});
 
 const Onboarding: React.FC = () => {
   return (
-    <OnboardingStack.Navigator initialRouteName="Login">
+    <OnboardingStack.Navigator
+      initialRouteName="Splash"
+      screenOptions={{headerShown: false}}>
+      <OnboardingStack.Screen name="Splash" component={Splash} />
       <OnboardingStack.Screen
         name="Login"
         component={Login}
-        options={{headerShown: false}}
+        options={{
+          gestureEnabled: false,
+          cardStyleInterpolator: forFade,
+        }}
       />
       <OnboardingStack.Screen
         name="RegistrationOne"
         component={RegistrationOne}
-        options={{headerShown: false}}
       />
       <OnboardingStack.Screen
         name="RegistrationTwo"
         component={RegistrationTwo}
-        options={{headerShown: false}}
-      />
-      <OnboardingStack.Screen
-        name="Checkpoint"
-        component={Checkpoint}
-        options={{headerShown: false}}
-      />
-      <OnboardingStack.Screen
-        name="Verification"
-        component={Verification}
-        options={{headerShown: false}}
       />
+      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
+      <OnboardingStack.Screen name="Verification" component={Verification} />
       <OnboardingStack.Screen
         name="ProfileOnboarding"
         component={ProfileOnboarding}
-        options={{headerShown: false}}
       />
     </OnboardingStack.Navigator>
   );
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
index f5521ab2..554260c8 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStack.tsx
@@ -1,6 +1,7 @@
 import {createStackNavigator} from '@react-navigation/stack';
 
 export type OnboardingStackParams = {
+  Splash: undefined;
   Login: undefined;
   RegistrationOne: undefined;
   RegistrationTwo:
diff --git a/src/screens/onboarding/Splash.tsx b/src/screens/onboarding/Splash.tsx
new file mode 100644
index 00000000..332b73b5
--- /dev/null
+++ b/src/screens/onboarding/Splash.tsx
@@ -0,0 +1,39 @@
+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 e6627ca7..094d1e7b 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -4,3 +4,4 @@ export {default as RegistrationTwo} from './RegistrationTwo';
 export {default as Verification} from './Verification';
 export {default as Checkpoint} from './Checkpoint';
 export {default as ProfileOnboarding} from './ProfileOnboarding';
+export {default as Splash} from './Splash';
-- 
cgit v1.2.3-70-g09d2