Merge pull request #269 from IvanIFChen/tma656-revamp-onboarding

[TMA-656] Revamp Onboarding

1 files changed, 34 insertions, 61 deletions

diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index 78f113cc..79171efd 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -1,24 +1,20 @@
+import {StackCardInterpolationProps} from '@react-navigation/stack';
 import React from 'react';
-import {OnboardingStack} from './OnboardingStackNavigator';
+import TaggPopup from '../../components/common/TaggPopup';
 import {
-  Login,
   InvitationCodeVerification,
-  RegistrationOne,
-  RegistrationTwo,
-  RegistrationThree,
-  Verification,
-  ProfileOnboarding,
-  Checkpoint,
-  SocialMedia,
-  PasswordResetRequest,
+  Login,
+  OnboardingStepThree,
+  OnboardingStepTwo,
   PasswordReset,
+  PasswordResetRequest,
+  PhoneVerification,
+  Verification,
   WelcomeScreen,
-  CategorySelection,
-  AddWaitlistUserScreen,
-  WaitlistSuccessScreen,
 } from '../../screens';
-import {StackCardInterpolationProps} from '@react-navigation/stack';
-import TaggPopup from '../../components/common/TaggPopup';
+import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne';
+import {modalStyle} from '../main';
+import {OnboardingStack} from './OnboardingStackNavigator';
 
 const forFade = ({current}: StackCardInterpolationProps) => ({
   cardStyle: {
@@ -37,6 +33,7 @@ const Onboarding: React.FC = () => {
         options={{
           gestureEnabled: false,
           cardStyleInterpolator: forFade,
+          ...modalStyle,
         }}
       />
       <OnboardingStack.Screen
@@ -46,37 +43,13 @@ const Onboarding: React.FC = () => {
           gestureEnabled: false,
         }}
       />
-      <OnboardingStack.Screen
-        name="WelcomeScreen"
-        component={WelcomeScreen}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="CategorySelection"
-        component={CategorySelection}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
+      <OnboardingStack.Screen name="WelcomeScreen" component={WelcomeScreen} />
       <OnboardingStack.Screen
         name="TaggPopup"
         component={TaggPopup}
         options={{
           gestureEnabled: false,
-          cardStyle: {
-            backgroundColor: 'transparent',
-          },
-          cardOverlayEnabled: true,
-          cardStyleInterpolator: ({current: {progress}}) => ({
-            cardStyle: {
-              opacity: progress.interpolate({
-                inputRange: [0, 0.5, 0.9, 1],
-                outputRange: [0, 0.25, 0.7, 1],
-              }),
-            },
-          }),
+          ...modalStyle,
         }}
       />
       <OnboardingStack.Screen
@@ -84,42 +57,42 @@ const Onboarding: React.FC = () => {
         component={PasswordReset}
         options={{
           gestureEnabled: false,
+          ...modalStyle,
         }}
       />
       <OnboardingStack.Screen
-        name="InvitationCodeVerification"
-        component={InvitationCodeVerification}
-      />
-      <OnboardingStack.Screen
-        name="AddWaitlistUser"
-        component={AddWaitlistUserScreen}
+        name="Verification"
+        component={Verification}
+        options={{
+          ...modalStyle,
+        }}
       />
       <OnboardingStack.Screen
-        name="WaitlistSuccess"
-        component={WaitlistSuccessScreen}
+        name="OnboardingStepOne"
+        component={OnboardingStepOne}
       />
       <OnboardingStack.Screen
-        name="RegistrationOne"
-        component={RegistrationOne}
+        name="PhoneVerification"
+        component={PhoneVerification}
+        options={{...modalStyle}}
       />
       <OnboardingStack.Screen
-        name="RegistrationTwo"
-        component={RegistrationTwo}
+        name="OnboardingStepTwo"
+        component={OnboardingStepTwo}
+        options={{...modalStyle}}
       />
       <OnboardingStack.Screen
-        name="RegistrationThree"
-        component={RegistrationThree}
+        name="OnboardingStepThree"
+        component={OnboardingStepThree}
+        options={{...modalStyle}}
       />
-      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
-      <OnboardingStack.Screen name="Verification" component={Verification} />
       <OnboardingStack.Screen
-        name="ProfileOnboarding"
-        component={ProfileOnboarding}
+        name="InvitationCodeVerification"
+        component={InvitationCodeVerification}
         options={{
-          gestureEnabled: false,
+          ...modalStyle,
         }}
       />
-      <OnboardingStack.Screen name="SocialMedia" component={SocialMedia} />
     </OnboardingStack.Navigator>
   );
 };