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/routes/onboarding/Onboarding.tsx      | 33 +++++++++++++++++--------------
 src/routes/onboarding/OnboardingStack.tsx |  1 +
 2 files changed, 19 insertions(+), 15 deletions(-)

(limited to 'src/routes')

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:
-- 
cgit v1.2.3-70-g09d2