4 files changed, 77 insertions, 2 deletions
diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx
index 63a75934..a3d281f5 100644
--- a/src/routes/onboarding/Onboarding.tsx
+++ b/src/routes/onboarding/Onboarding.tsx
@@ -12,8 +12,11 @@ import {
   SocialMedia,
   PasswordResetRequest,
   PasswordReset,
+  WelcomeScreen,
+  CategorySelection,
 } from '../../screens';
 import {StackCardInterpolationProps} from '@react-navigation/stack';
+import TaggPopup from '../../components/common/TaggPopup';
 
 const forFade = ({current}: StackCardInterpolationProps) => ({
   cardStyle: {
@@ -42,6 +45,47 @@ const Onboarding: React.FC = () => {
         }}
       />
       <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={{
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
index 33ff51ea..7ff00271 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStack.tsx
@@ -1,7 +1,14 @@
 import {createStackNavigator} from '@react-navigation/stack';
-import {VerificationScreenType} from '../../types';
+import {
+  CategorySelectionScreenType,
+  MomentCategoryType,
+  TaggPopupType,
+  UserType,
+  VerificationScreenType,
+} from '../../types';
 
 export type OnboardingStackParams = {
+  WelcomeScreen: undefined;
   Login: undefined;
   PasswordResetRequest: undefined;
   PasswordReset: {
@@ -20,6 +27,14 @@ export type OnboardingStackParams = {
   Verification: {id: string; screenType: VerificationScreenType};
   ProfileOnboarding: {username: string; userId: string};
   SocialMedia: {username: string; userId: string};
+  CategorySelection: {
+    categories: Record<MomentCategoryType, boolean>;
+    screenType: CategorySelectionScreenType;
+    user: UserType;
+  };
+  TaggPopup: {
+    popupProps: TaggPopupType;
+  };
 };
 
 export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index 3cb928e5..4c93b1ee 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -8,6 +8,7 @@ import {
   MomentCommentsScreen,
   FollowersListScreen,
   EditProfile,
+  CategorySelection,
 } from '../../screens';
 import {ProfileStack, ProfileStackParams} from './ProfileStack';
 import {RouteProp} from '@react-navigation/native';
@@ -90,6 +91,17 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
         }}
         initialParams={{screenType}}
       />
+      <ProfileStack.Screen
+        name="CategorySelection"
+        component={CategorySelection}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+          headerTitle: '',
+        }}
+      />
       {isProfileStack ? (
         <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
       ) : (
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index e7db9f37..bc0a9560 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -2,7 +2,7 @@
  * Note the name userXId here, it refers to the id of the user being visited
  */
 import {createStackNavigator} from '@react-navigation/stack';
-import {MomentType, ScreenType} from '../../types';
+import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
 
 export type ProfileStackParams = {
   Search: {
@@ -41,6 +41,10 @@ export type ProfileStackParams = {
     userId: string;
     username: string;
   };
+  CategorySelection: {
+    categories: Array<string>;
+    screenType: CategorySelectionScreenType;
+  };
 };
 
 export const ProfileStack = createStackNavigator<ProfileStackParams>();