1 files changed, 125 insertions, 0 deletions
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
new file mode 100644
index 00000000..54614b32
--- /dev/null
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import {OnboardingStack} from './OnboardingStackNavigator';
+import {
+  Login,
+  InvitationCodeVerification,
+  RegistrationOne,
+  RegistrationTwo,
+  RegistrationThree,
+  Verification,
+  ProfileOnboarding,
+  Checkpoint,
+  SocialMedia,
+  PasswordResetRequest,
+  PasswordReset,
+  WelcomeScreen,
+  CategorySelection,
+} from '../../screens';
+import {StackCardInterpolationProps} from '@react-navigation/stack';
+import TaggPopup from '../../components/common/TaggPopup';
+
+const forFade = ({current}: StackCardInterpolationProps) => ({
+  cardStyle: {
+    opacity: current.progress,
+  },
+});
+
+const Onboarding: React.FC = () => {
+  return (
+    <OnboardingStack.Navigator
+      initialRouteName="Login"
+      screenOptions={{headerShown: false}}>
+      <OnboardingStack.Screen
+        name="Login"
+        component={Login}
+        options={{
+          gestureEnabled: false,
+          cardStyleInterpolator: forFade,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="PasswordResetRequest"
+        component={PasswordResetRequest}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="WelcomeScreen"
+        component={WelcomeScreen}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="CategorySelection"
+        component={CategorySelection}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <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],
+              }),
+            },
+            overlayStyle: {
+              backgroundColor: '#505050',
+              opacity: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 0.9],
+                extrapolate: 'clamp',
+              }),
+            },
+          }),
+        }}
+      />
+      <OnboardingStack.Screen
+        name="PasswordReset"
+        component={PasswordReset}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="InvitationCodeVerification"
+        component={InvitationCodeVerification}
+      />
+      <OnboardingStack.Screen
+        name="RegistrationOne"
+        component={RegistrationOne}
+      />
+      <OnboardingStack.Screen
+        name="RegistrationTwo"
+        component={RegistrationTwo}
+      />
+      <OnboardingStack.Screen
+        name="RegistrationThree"
+        component={RegistrationThree}
+      />
+      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
+      <OnboardingStack.Screen name="Verification" component={Verification} />
+      <OnboardingStack.Screen
+        name="ProfileOnboarding"
+        component={ProfileOnboarding}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen name="SocialMedia" component={SocialMedia} />
+    </OnboardingStack.Navigator>
+  );
+};
+
+export default Onboarding;