Merge pull request #370 from IvanIFChen/tma795-move-create-button

[TMA-795/796] Move create button

35 files changed, 265 insertions, 416 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index 18969972..c9c9dc55 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,5 +2,10 @@ module.exports = {
   root: true,
   extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  plugins: ['react', 'react-native'],
+  rules: {
+    // 'react-native/no-unused-styles': 2,
+    // 'react-native/no-raw-text': 1,
+    // 'react-native/no-single-element-style-arrays': 2,
+  },
 };
diff --git a/package.json b/package.json
index b9362818..2612e67f 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,8 @@
     "@typescript-eslint/parser": "^2.27.0",
     "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-native": "^3.10.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.58.0",
diff --git a/src/components/common/PostCarousel.tsx b/src/components/common/PostCarousel.tsx
index cda9d8db..be3dcb16 100644
--- a/src/components/common/PostCarousel.tsx
+++ b/src/components/common/PostCarousel.tsx
@@ -1,6 +1,7 @@
 import React, {Fragment, useRef, useState} from 'react';
 import {Image} from 'react-native';
 import Carousel, {Pagination} from 'react-native-snap-carousel';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
 interface PostCarouselProps {
@@ -39,7 +40,7 @@ const PostCarousel: React.FC<PostCarouselProps> = ({
         activeDotIndex={currentPage}
         dotsLength={data.length}
         containerStyle={{marginBottom: marginBottom}}
-        dotColor={'#6ee7e7'}
+        dotColor={TAGG_LIGHT_BLUE_2}
         inactiveDotColor={'#e0e0e0'}
       />
     </>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index b5fd0542..5a601f1d 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -17,7 +17,6 @@ export {default as TaggDatePicker} from './TaggDatePicker';
 export {default as BottomDrawer} from './BottomDrawer';
 export {default as TaggLoadingIndicator} from './TaggLoadingIndicator';
 export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
-export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
 export {default as FriendsButton} from './FriendsButton';
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index a7a7268a..8bd3a745 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -5,6 +5,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useStore} from 'react-redux';
 import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   LocalAttachmentType,
   LocalChannelType,
@@ -89,7 +90,7 @@ const styles = StyleSheet.create({
   },
   online: {
     position: 'absolute',
-    backgroundColor: '#6EE7E7',
+    backgroundColor: TAGG_LIGHT_BLUE_2,
     width: normalize(18),
     height: normalize(18),
     borderRadius: normalize(18) / 2,
diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx
index 67a7f1fe..7ddaa7e6 100644
--- a/src/components/messages/ChatHeader.tsx
+++ b/src/components/messages/ChatHeader.tsx
@@ -5,6 +5,7 @@ import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useDispatch, useStore} from 'react-redux';
 import {ChatContext} from '../../App';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ScreenType} from '../../types';
 import {
   ChatHeaderHeight,
@@ -87,7 +88,7 @@ const styles = StyleSheet.create({
   },
   online: {
     position: 'absolute',
-    backgroundColor: '#6EE7E7',
+    backgroundColor: TAGG_LIGHT_BLUE_2,
     width: normalize(16),
     height: normalize(16),
     borderRadius: normalize(16) / 2,
diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/components/onboarding/UpdateRequired.tsx
index adf7ba71..93e4e36d 100644
--- a/src/screens/onboarding/UpdateRequired.tsx
+++ b/src/components/onboarding/UpdateRequired.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Image, Linking, Modal, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
-import {CenteredView, TaggSquareButton} from '../../components';
+import {CenteredView, TaggSquareButton} from '..';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 
 interface UpdateRequiredProps {
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index fdb85090..aad77f96 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -11,3 +11,4 @@ export {default as SocialMediaLinker} from './SocialMediaLinker';
 export {default as LinkSocialMedia} from './LinkSocialMedia';
 export {default as MomentCategory} from './MomentCategory';
 export {default as UniversitySelection} from './UniversitySelection';
+export {default as UpdateRequired} from './UpdateRequired';
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 1c49bff5..d2ee8626 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -243,8 +243,7 @@ const PublicProfile: React.FC<ContentProps> = ({
         <TouchableOpacity
           onPress={() =>
             navigation.navigate('CategorySelection', {
-              screenType: CategorySelectionScreenType.Profile,
-              user: loggedInUser,
+              newCustomCategory: undefined,
             })
           }
           style={styles.createCategoryButton}>
@@ -258,10 +257,6 @@ const PublicProfile: React.FC<ContentProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
   momentsContainer: {
     backgroundColor: '#f2f2f2',
     paddingBottom: SCREEN_HEIGHT * 0.15,
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index 834e32ef..b2889e3e 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {Image, Linking, StyleSheet, View} from 'react-native';
-import {Text} from 'react-native-animatable';
+import { Image, Linking, StyleSheet, View } from 'react-native';
+import { Text } from 'react-native-animatable';
 import Hyperlink from 'react-native-hyperlink';
 import LinearGradient from 'react-native-linear-gradient';
-import {AVATAR_DIM, TAGGS_GRADIENT, TAGG_LIGHT_BLUE} from '../../constants';
-import {TwitterPostType} from '../../types';
-import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
-import {DateLabel, PostCarousel} from '../common';
+import { AVATAR_DIM, TAGGS_GRADIENT, TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2 } from '../../constants';
+import { TwitterPostType } from '../../types';
+import { handleOpenSocialUrlOnBrowser, SCREEN_WIDTH } from '../../utils';
+import { DateLabel, PostCarousel } from '../common';
 
 interface TwitterTaggPostProps {
   ownerHandle: string;
@@ -194,7 +194,7 @@ const styles = StyleSheet.create({
   },
   viewOnTwitterText: {
     fontSize: 12,
-    color: '#6ee7e7',
+    color: TAGG_LIGHT_BLUE_2,
   },
   // reply post
   replyPostContainer: {
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 64ad9198..1f173569 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -3,13 +3,7 @@
  */
 import {createStackNavigator} from '@react-navigation/stack';
 import {Image} from 'react-native-image-crop-picker';
-import {
-  CategorySelectionScreenType,
-  MomentType,
-  ScreenType,
-  SearchCategoryType,
-  UserType,
-} from '../../types';
+import {MomentType, ScreenType, SearchCategoryType} from '../../types';
 
 export type MainStackParams = {
   SuggestedPeople: {
@@ -61,11 +55,11 @@ export type MainStackParams = {
     username: string;
   };
   CategorySelection: {
-    screenType: CategorySelectionScreenType;
-    user: UserType;
     newCustomCategory: string | undefined;
   };
-  CreateCustomCategory: {};
+  CreateCustomCategory: {
+    existingCategories: string[];
+  };
   Notifications: {
     screenType: ScreenType;
   };
diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index a51a6c86..4726a47d 100644
--- a/src/routes/onboarding/OnboardingStackNavigator.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -1,41 +1,16 @@
 import {createStackNavigator} from '@react-navigation/stack';
-import {TaggPopupType, VerificationScreenType} from '../../types';
 
 export type OnboardingStackParams = {
+  InvitationCodeVerification: {userId: string; username: string};
   Login: undefined;
-  WelcomeScreen: undefined;
-  PasswordResetRequest: undefined;
-  PasswordReset: {value: string};
-  Verification: {id: string; screenType: VerificationScreenType};
-  // RegistrationOne: undefined;
-  // RegistrationTwo: {phone: string};
-  // RegistrationThree: {
-  //   firstName: string;
-  //   lastName: string;
-  //   phone: string;
-  //   email: string;
-  // };
-  // Checkpoint: {username: string; userId: string};
-  // ProfileOnboarding: {username: string; userId: string};
-  // SocialMedia: {username: string; userId: string};
-  // CategorySelection: {
-  //   screenType: CategorySelectionScreenType;
-  //   user: UserType;
-  //   newCustomCategory: string | undefined;
-  // };
-  // CreateCustomCategory: {
-  //   screenType: CategorySelectionScreenType;
-  //   user: UserType;
-  //   existingCategories: string[];
-  // };
-  TaggPopup: {
-    popupProps: TaggPopupType;
-  };
   OnboardingStepOne: undefined;
-  PhoneVerification: {firstName: string; lastName: string; phone: string};
-  OnboardingStepTwo: {firstName: string; lastName: string; phone: string};
   OnboardingStepThree: {userId: string; username: string};
-  InvitationCodeVerification: {userId: string; username: string};
+  OnboardingStepTwo: {firstName: string; lastName: string; phone: string};
+  PasswordReset: {value: string};
+  PasswordResetRequest: undefined;
+  PasswordVerification: {id: string};
+  PhoneVerification: {firstName: string; lastName: string; phone: string};
+  WelcomeScreen: undefined;
 };
 
 export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index 79171efd..339c3d0d 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -1,6 +1,5 @@
 import {StackCardInterpolationProps} from '@react-navigation/stack';
 import React from 'react';
-import TaggPopup from '../../components/common/TaggPopup';
 import {
   InvitationCodeVerification,
   Login,
@@ -8,8 +7,8 @@ import {
   OnboardingStepTwo,
   PasswordReset,
   PasswordResetRequest,
+  PasswordVerification,
   PhoneVerification,
-  Verification,
   WelcomeScreen,
 } from '../../screens';
 import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne';
@@ -45,14 +44,6 @@ const Onboarding: React.FC = () => {
       />
       <OnboardingStack.Screen name="WelcomeScreen" component={WelcomeScreen} />
       <OnboardingStack.Screen
-        name="TaggPopup"
-        component={TaggPopup}
-        options={{
-          gestureEnabled: false,
-          ...modalStyle,
-        }}
-      />
-      <OnboardingStack.Screen
         name="PasswordReset"
         component={PasswordReset}
         options={{
@@ -61,8 +52,8 @@ const Onboarding: React.FC = () => {
         }}
       />
       <OnboardingStack.Screen
-        name="Verification"
-        component={Verification}
+        name="PasswordVerification"
+        component={PasswordVerification}
         options={{
           ...modalStyle,
         }}
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index 6bc0ac9d..d84b2ba2 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext} from 'react';
+import React from 'react';
 import {Alert, KeyboardAvoidingView, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {
@@ -27,7 +27,6 @@ import {
 import {OnboardingStackParams} from '../../routes';
 import {BackgroundGradientType} from '../../types';
 import {SCREEN_WIDTH, userLogin} from '../../utils';
-import {ChatContext} from '../../App';
 
 type InvitationCodeVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -59,7 +58,6 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     setValue,
   });
   const dispatch = useDispatch();
-  const {chatClient} = useContext(ChatContext);
 
   const handleInvitationCodeVerification = async () => {
     if (value.length === 6) {
@@ -200,10 +198,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
-  noInviteCode: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
   youveBeenAddedLabel: {
     marginVertical: '5%',
     width: SCREEN_WIDTH * 0.8,
@@ -213,11 +207,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     marginBottom: '10%',
   },
-  inviteCodeLink: {
-    color: 'white',
-    fontSize: 18,
-    textDecorationLine: 'underline',
-  },
 });
 
 export default InvitationCodeVerification;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 6d9abf82..041fba05 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -30,7 +30,7 @@ import {fcmService} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {BackgroundGradientType, UniversityType} from '../../types';
 import {connectChatAccount, normalize, userLogin} from '../../utils';
-import UpdateRequired from './UpdateRequired';
+import UpdateRequired from '../../components/onboarding/UpdateRequired';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
diff --git a/src/screens/onboarding/PasswordResetRequest.tsx b/src/screens/onboarding/PasswordResetRequest.tsx
index a63eae81..8a891bbb 100644
--- a/src/screens/onboarding/PasswordResetRequest.tsx
+++ b/src/screens/onboarding/PasswordResetRequest.tsx
@@ -74,9 +74,8 @@ const PasswordResetRequest: React.FC<PasswordResetRequestProps> = ({
           handlePasswordResetRequest(form.value),
         );
         if (success) {
-          navigation.navigate('Verification', {
+          navigation.navigate('PasswordVerification', {
             id: form.value,
-            screenType: VerificationScreenType.Password,
           });
         }
       } else {
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/PasswordVerification.tsx
index dda18364..6bda37a7 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/PasswordVerification.tsx
@@ -21,7 +21,6 @@ import {
   ArrowButton,
   Background,
   LoadingIndicator,
-  RegistrationWizard,
   SubmitButton,
 } from '../../components';
 import {codeRegex} from '../../constants';
@@ -33,18 +32,16 @@ import {OnboardingStackParams} from '../../routes';
 import {
   handlePasswordCodeVerification,
   handlePasswordResetRequest,
-  sendOtp,
-  verifyOtp,
 } from '../../services';
-import {BackgroundGradientType, VerificationScreenType} from '../../types';
+import {BackgroundGradientType} from '../../types';
 
 type VerificationScreenRouteProp = RouteProp<
   OnboardingStackParams,
-  'Verification'
+  'PasswordVerification'
 >;
 type VerificationScreenNavigationProp = StackNavigationProp<
   OnboardingStackParams,
-  'Verification'
+  'PasswordVerification'
 >;
 interface VerificationProps {
   route: VerificationScreenRouteProp;
@@ -58,39 +55,16 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
     value,
     setValue,
   });
-  const {id, screenType} = route.params;
-  const isPhoneVerification = screenType === VerificationScreenType.Phone;
+  const {id} = route.params;
 
-  const handlePhoneVerification = async () => {
-    const success = await trackPromise(verifyOtp(id, value));
-    if (success) {
-      navigation.navigate('RegistrationTwo', {phone: id});
-    }
-  };
-
-  const handlePasswordVerification = async () => {
-    const success = await trackPromise(
-      handlePasswordCodeVerification(id, value),
-    );
-    if (success) {
-      navigation.navigate('PasswordReset', {value: id});
-    }
-  };
-
-  /**
-   * Sends the verify_otp request upon tapping the Verify button.
-   * If successful, it navigates to the respected page.
-   */
   const handleVerification = async () => {
     if (codeRegex.test(value)) {
       try {
-        switch (screenType) {
-          case VerificationScreenType.Phone:
-            handlePhoneVerification();
-            break;
-          case VerificationScreenType.Password:
-            handlePasswordVerification();
-            break;
+        const success = await trackPromise(
+          handlePasswordCodeVerification(id, value),
+        );
+        if (success) {
+          navigation.navigate('PasswordReset', {value: id});
         }
       } catch (error) {
         console.log(error);
@@ -106,34 +80,19 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
    */
   const handleResend = async () => {
     try {
-      switch (screenType) {
-        case VerificationScreenType.Phone:
-          trackPromise(sendOtp(id));
-          break;
-        case VerificationScreenType.Password:
-          trackPromise(handlePasswordResetRequest(id));
-          break;
-      }
+      trackPromise(handlePasswordResetRequest(id));
     } catch (error) {
       console.log(error);
       Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     }
   };
 
-  const handleGoBack = () => {
-    switch (screenType) {
-      case VerificationScreenType.Phone:
-        navigation.navigate('RegistrationOne');
-        break;
-      case VerificationScreenType.Password:
-        navigation.navigate('PasswordResetRequest');
-        break;
-    }
-  };
-
   const Footer = () => (
     <View style={styles.footer}>
-      <ArrowButton direction="backward" onPress={() => handleGoBack()} />
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('PasswordResetRequest')}
+      />
     </View>
   );
 
@@ -142,16 +101,9 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
       centered
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
-      {isPhoneVerification ? (
-        <RegistrationWizard style={styles.wizard} step="three" />
-      ) : (
-        <React.Fragment />
-      )}
       <KeyboardAvoidingView
         behavior="padding"
-        style={
-          isPhoneVerification ? styles.form : styles.formPasswordVerification
-        }>
+        style={styles.formPasswordVerification}>
         <Text style={styles.formHeader}>Enter 6 digit code</Text>
         <Text style={styles.description}>
           We sent a 6 digit verification code to the phone number you provided.
@@ -200,16 +152,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  wizard: {
-    marginTop: '3.5%',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  form: {
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flex: 3,
-  },
   formPasswordVerification: {
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -261,9 +203,6 @@ const styles = StyleSheet.create({
   button: {
     marginVertical: '5%',
   },
-  loadingIndicator: {
-    marginVertical: '5%',
-  },
   footer: {
     width: '100%',
     flexDirection: 'row',
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 49d7cfb9..7eb0587f 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -1,21 +1,10 @@
-export {default as Login} from './Login';
-export {default as RegistrationOne} from './RegistrationOne';
-export {default as RegistrationTwo} from './RegistrationTwo';
-export {default as RegistrationThree} from './RegistrationThree';
-export {default as Verification} from './Verification';
-export {default as Checkpoint} from './Checkpoint';
-export {default as ProfileOnboarding} from './ProfileOnboarding';
 export {default as InvitationCodeVerification} from './InvitationCodeVerification';
-export {default as SocialMedia} from './SocialMedia';
-export {default as PasswordResetRequest} from './PasswordResetRequest';
-export {default as PasswordReset} from './PasswordReset';
-export {default as WelcomeScreen} from './WelcomeScreen';
-export {default as CategorySelection} from './CategorySelection';
-export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen';
-export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen';
-export {default as CreateCustomCategory} from './CreateCustomCategory';
-export {default as UpdateRequired} from './UpdateRequired';
+export {default as Login} from './Login';
 export {default as OnboardingStepOne} from './OnboardingStepOne';
-export {default as PhoneVerification} from './PhoneVerification';
-export {default as OnboardingStepTwo} from './OnboardingStepTwo';
 export {default as OnboardingStepThree} from './OnboardingStepThree';
+export {default as OnboardingStepTwo} from './OnboardingStepTwo';
+export {default as PasswordReset} from './PasswordReset';
+export {default as PasswordResetRequest} from './PasswordResetRequest';
+export {default as PhoneVerification} from './PhoneVerification';
+export {default as PasswordVerification} from './PasswordVerification';
+export {default as WelcomeScreen} from './WelcomeScreen';
diff --git a/src/screens/onboarding/AddWaitlistUserScreen.tsx b/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx
index 489c30f1..489c30f1 100644
--- a/src/screens/onboarding/AddWaitlistUserScreen.tsx
+++ b/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/legacy/Checkpoint.tsx
index b0b42203..93ff0b7f 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/legacy/Checkpoint.tsx
@@ -1,18 +1,17 @@
-import React from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import React from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
   Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
   TouchableOpacity,
+  View,
 } from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-import {RegistrationWizard, Background} from '../../components';
-import {BackgroundGradientType} from '../../types';
+import {Background, RegistrationWizard} from '../../../components';
+import {OnboardingStackParams} from '../../../routes';
+import {BackgroundGradientType} from '../../../types';
 
 type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>;
 type CheckpointNavigationProp = StackNavigationProp<
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/legacy/ProfileOnboarding.tsx
index c173c8e3..bf0863dc 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/legacy/ProfileOnboarding.tsx
@@ -20,7 +20,7 @@ import {
   TaggBigInput,
   TaggDropDown,
   TaggInput,
-} from '../../components';
+} from '../../../components';
 import {
   bioRegex,
   CLASS_YEAR_LIST,
@@ -28,7 +28,7 @@ import {
   genderRegex,
   TAGG_PURPLE,
   websiteRegex,
-} from '../../constants';
+} from '../../../constants';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_PROFILE_CREATION_SHORT,
@@ -36,10 +36,10 @@ import {
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD_LARGE_PROFILE_PIC,
   ERROR_UPLOAD_SMALL_PROFILE_PIC,
-} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes/onboarding';
-import {BackgroundGradientType} from '../../types';
-import {SCREEN_WIDTH} from '../../utils';
+} from '../../../constants/strings';
+import {OnboardingStackParams} from '../../../routes/onboarding';
+import {BackgroundGradientType} from '../../../types';
+import {SCREEN_WIDTH} from '../../../utils';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
   OnboardingStackParams,
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/legacy/RegistrationOne.tsx
index c9822f76..4bcc2720 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/legacy/RegistrationOne.tsx
@@ -1,34 +1,31 @@
-import React, {useState, useRef} from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useRef, useState} from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
   Alert,
+  KeyboardAvoidingView,
   Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
   TouchableOpacity,
-  KeyboardAvoidingView,
+  View,
 } from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-
+import {trackPromise} from 'react-promise-tracker';
 import {
   ArrowButton,
-  RegistrationWizard,
-  TaggInput,
   Background,
   LoadingIndicator,
-} from '../../components';
-
-import {trackPromise} from 'react-promise-tracker';
-
-import {SEND_OTP_ENDPOINT} from '../../constants';
-
-import {phoneRegex} from '../../constants';
-import {BackgroundGradientType, VerificationScreenType} from '../../types';
-import {ERROR_EMAIL_IN_USE, ERROR_SERVER_DOWN} from '../../constants/strings';
+  RegistrationWizard,
+  TaggInput,
+} from '../../../components';
+import {phoneRegex, SEND_OTP_ENDPOINT} from '../../../constants';
+import {
+  ERROR_EMAIL_IN_USE,
+  ERROR_SERVER_DOWN,
+} from '../../../constants/strings';
+import {OnboardingStackParams} from '../../../routes';
+import {BackgroundGradientType, VerificationScreenType} from '../../../types';
 
 type RegistrationScreenOneRouteProp = RouteProp<
   OnboardingStackParams,
diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/legacy/RegistrationThree.tsx
index 03348e6b..1f4266ff 100644
--- a/src/screens/onboarding/RegistrationThree.tsx
+++ b/src/screens/onboarding/legacy/RegistrationThree.tsx
@@ -3,38 +3,36 @@
  * Purpose : Add a new screen to allow the user to enter first and last name
  */
 
-import React, {useState, useRef} from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useRef, useState} from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
   Alert,
+  KeyboardAvoidingView,
   Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
   TouchableOpacity,
-  KeyboardAvoidingView,
-  ActivityIndicator,
+  View,
 } from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
 import {
   ArrowButton,
+  Background,
+  LoadingIndicator,
   RegistrationWizard,
   TaggInput,
   TermsConditions,
-  Background,
-  LoadingIndicator,
 } from '../../components';
-import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
-import {BackgroundGradientType} from '../../types';
+import {passwordRegex, REGISTER_ENDPOINT, usernameRegex} from '../../constants';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_REGISTRATION,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
 } from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
 
 type RegistrationScreenThreeRouteProp = RouteProp<
   OnboardingStackParams,
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/legacy/RegistrationTwo.tsx
index 6d7b2226..2dd86f90 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/legacy/RegistrationTwo.tsx
@@ -1,29 +1,26 @@
-import React, {useState, useRef} from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useRef, useState} from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
   Alert,
+  KeyboardAvoidingView,
   Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
   TouchableOpacity,
-  KeyboardAvoidingView,
+  View,
 } from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-
 import {
   ArrowButton,
+  Background,
   RegistrationWizard,
   TaggInput,
-  Background,
 } from '../../components';
-
-import {nameRegex, emailRegex} from '../../constants';
-import {BackgroundGradientType} from '../../types';
+import {emailRegex, nameRegex} from '../../constants';
 import {ERROR_NEXT_PAGE} from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
 
 type RegistrationScreenTwoRouteProp = RouteProp<
   OnboardingStackParams,
diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/legacy/SocialMedia.tsx
index 2a978f94..db24830a 100644
--- a/src/screens/onboarding/SocialMedia.tsx
+++ b/src/screens/onboarding/legacy/SocialMedia.tsx
@@ -10,19 +10,18 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {useDispatch} from 'react-redux';
-import {
-  BackgroundGradientType,
-  CategorySelectionScreenType,
-  LinkerType,
-} from '../..//types';
 import {
   Background,
   LinkSocialMedia,
   RegistrationWizard,
-} from '../../components';
-import {SOCIAL_LIST, MOMENT_CATEGORIES} from '../../constants/';
-import {OnboardingStackParams} from '../../routes';
+} from '../../../components';
+import {SOCIAL_LIST} from '../../../constants';
+import {OnboardingStackParams} from '../../../routes';
+import {
+  BackgroundGradientType,
+  CategorySelectionScreenType,
+  LinkerType,
+} from '../../../types';
 
 /**
  * Social Media Screen for displaying social media linkers
diff --git a/src/components/common/TaggPopup.tsx b/src/screens/onboarding/legacy/TaggPopup.tsx
index f9929580..e71a4d2a 100644
--- a/src/components/common/TaggPopup.tsx
+++ b/src/screens/onboarding/legacy/TaggPopup.tsx
@@ -1,13 +1,13 @@
+import {BlurView} from '@react-native-community/blur';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import * as React from 'react';
-import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {Platform, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {Image, View} from 'react-native-animatable';
-import {ArrowButton} from '../onboarding';
-import {OnboardingStackParams} from '../../routes';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import CloseIcon from '../../assets/ionicons/close-outline.svg';
-import {BlurView} from '@react-native-community/blur';
+import {ArrowButton} from '../../../components/onboarding';
+import {OnboardingStackParams} from '../../../routes';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../../utils';
+import CloseIcon from '../../../assets/ionicons/close-outline.svg';
 
 type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
 type TaggPopupNavigationProps = StackNavigationProp<
@@ -41,7 +41,7 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
         <View style={styles.popup}>
           <Image
             style={styles.icon}
-            source={require('../../assets/icons/notificationPrompts/plus-logo.png')}
+            source={require('../../../assets/icons/notificationPrompts/plus-logo.png')}
           />
           <View style={styles.textContainer}>
             <Text style={styles.header}>{messageHeader}</Text>
diff --git a/src/screens/onboarding/WaitlistSuccessScreen.tsx b/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx
index 1f603e3a..72bbec63 100644
--- a/src/screens/onboarding/WaitlistSuccessScreen.tsx
+++ b/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx
@@ -10,12 +10,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ArrowButton, Background, SubmitButton} from '../../components';
-import {OnboardingStackParams} from '../../routes';
-import {BackgroundGradientType} from '../../types';
+import {ArrowButton, Background} from '../../../components';
+import {TAGG_WEBSITE} from '../../../constants';
+import {OnboardingStackParams} from '../../../routes';
+import {BackgroundGradientType} from '../../../types';
+import {SCREEN_HEIGHT} from '../../../utils';
 import CelebrationLogo from '../../assets/icons/celebration-logo.svg';
-import {SCREEN_HEIGHT} from '../../utils';
-import {TAGG_WEBSITE} from '../../constants';
 
 type WaitlistSuccessScreenProp = StackNavigationProp<
   OnboardingStackParams,
diff --git a/src/screens/profile/AccountType.tsx b/src/screens/profile/AccountType.tsx
index 60ed0668..8a3f7775 100644
--- a/src/screens/profile/AccountType.tsx
+++ b/src/screens/profile/AccountType.tsx
@@ -10,6 +10,7 @@ import {
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {Background} from '../../components';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {updateProfileVisibility} from '../../services';
 import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
@@ -60,7 +61,7 @@ const AccountType: React.FC = () => {
               />
               {!isLoading && (
                 <Switch
-                  trackColor={{false: 'red', true: '#6EE7E7'}}
+                  trackColor={{false: 'red', true: TAGG_LIGHT_BLUE_2}}
                   thumbColor={'white'}
                   ios_backgroundColor="transparent"
                   style={styles.switchStyles}
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 998897e2..282857d6 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -13,11 +13,12 @@ import {
 } from 'react-native';
 import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
-import {MainStackParams} from '../../routes';
 import {SearchBackground, TaggBigInput} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
+import {MainStackParams} from '../../routes';
 import {postMoment} from '../../services';
 import {
   loadUserMoments,
@@ -137,7 +138,7 @@ const styles = StyleSheet.create({
   },
   shareButtonTitle: {
     fontWeight: 'bold',
-    color: '#6EE7E7',
+    color: TAGG_LIGHT_BLUE_2,
   },
   header: {
     marginVertical: 20,
diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index ab5ff3be..c02eef0d 100644
--- a/src/screens/onboarding/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -1,9 +1,8 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   Alert,
-  Platform,
   StatusBar,
   StyleSheet,
   Text,
@@ -12,28 +11,23 @@ import {
 } from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
-import {ChatContext} from '../../App';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {Background, MomentCategory} from '../../components';
-import {MOMENT_CATEGORIES} from '../../constants';
+import {MOMENT_CATEGORIES, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes';
-import {postMomentCategories} from '../../services';
-import {
-  updateIsOnboardedUser,
-  updateMomentCategories,
-} from '../../store/actions/';
+import {MainStackParams} from '../../routes';
+import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {BackgroundGradientType, CategorySelectionScreenType} from '../../types';
-import {getTokenOrLogout, SCREEN_WIDTH, userLogin} from '../../utils';
+import {BackgroundGradientType} from '../../types';
+import {normalize, SCREEN_WIDTH} from '../../utils';
 
 type CategorySelectionRouteProps = RouteProp<
-  OnboardingStackParams,
+  MainStackParams,
   'CategorySelection'
 >;
 
 type CategorySelectionNavigationProps = StackNavigationProp<
-  OnboardingStackParams,
+  MainStackParams,
   'CategorySelection'
 >;
 
@@ -46,16 +40,8 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
   route,
   navigation,
 }) => {
-  /**
-   * Same component to be used for category selection while onboarding and while on profile
-   */
-  const {screenType, user} = route.params;
-  const {chatClient} = useContext(ChatContext);
-  const isOnBoarding: boolean =
-    screenType === CategorySelectionScreenType.Onboarding;
-  const {userId, username} = user;
-
-  // During onboarding this will fail and default to []
+  const dispatch = useDispatch();
+  const {newCustomCategory} = route.params;
   const {momentCategories = []} = useSelector(
     (state: RootState) => state.momentCategories,
   );
@@ -78,10 +64,15 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
     (mc) => !MOMENT_CATEGORIES.includes(mc),
   );
 
-  const dispatch = useDispatch();
+  navigation.setOptions({
+    headerRight: () => (
+      <TouchableOpacity onPress={handleButtonPress}>
+        <Text style={styles.createLabel}>Create</Text>
+      </TouchableOpacity>
+    ),
+  });
 
   useEffect(() => {
-    const newCustomCategory = route.params.newCustomCategory;
     if (newCustomCategory) {
       setUncommitedCustomCategories([
         ...uncommitedCustomCategories,
@@ -89,23 +80,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
       ]);
       selectedCategories.push(newCustomCategory);
     }
-  }, [route.params?.newCustomCategory]);
-
-  /**
-   * Show the tutorial if a new user is OnBoarding
-   */
-  useEffect(() => {
-    if (isOnBoarding) {
-      navigation.navigate('TaggPopup', {
-        popupProps: {
-          messageHeader: 'Category And Moments',
-          messageBody:
-            'Use pictures and videos to share \ndifferent aspects of you',
-          next: undefined,
-        },
-      });
-    }
-  }, [isOnBoarding]);
+  }, [newCustomCategory]);
 
   /**
    * Handle selection of a new category
@@ -166,20 +141,13 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
       return;
     }
     try {
-      if (isOnBoarding) {
-        dispatch(updateIsOnboardedUser(true));
-        const token = await getTokenOrLogout(dispatch);
-        await postMomentCategories(selectedCategories, token);
-        userLogin(dispatch, {userId: userId, username: username});
-      } else {
-        dispatch(
-          updateMomentCategories(
-            momentCategories.concat(selectedCategories),
-            true,
-          ),
-        );
-        navigation.goBack();
-      }
+      dispatch(
+        updateMomentCategories(
+          momentCategories.concat(selectedCategories),
+          true,
+        ),
+      );
+      navigation.goBack();
     } catch (error) {
       console.log(error);
       Alert.alert(ERROR_SOMETHING_WENT_WRONG);
@@ -197,24 +165,18 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
         <StatusBar barStyle="light-content" />
         <Text style={styles.subtext}>Create Categories</Text>
         <View style={styles.container}>
-          {!isOnBoarding && (
-            <TouchableOpacity
-              style={styles.createCategory}
-              onPress={() => {
-                navigation.push('CreateCustomCategory', {
-                  screenType,
-                  user,
-                  existingCategories: momentCategories.concat(
-                    selectedCategories,
-                  ),
-                });
-              }}>
-              <PlusIcon width={30} height={30} color="white" />
-              <Text style={styles.createCategoryLabel}>
-                Create your own category
-              </Text>
-            </TouchableOpacity>
-          )}
+          <TouchableOpacity
+            style={styles.createCategory}
+            onPress={() => {
+              navigation.push('CreateCustomCategory', {
+                existingCategories: momentCategories.concat(selectedCategories),
+              });
+            }}>
+            <PlusIcon width={30} height={30} color="white" />
+            <Text style={styles.createCategoryLabel}>
+              Create your own category
+            </Text>
+          </TouchableOpacity>
           <View style={styles.linkerContainer}>
             {/* commited custom categories */}
             {customCategories.map((category, index) => (
@@ -248,13 +210,6 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
               />
             ))}
           </View>
-          <TouchableOpacity
-            onPress={handleButtonPress}
-            style={styles.finalAction}>
-            <Text style={styles.finalActionLabel}>
-              {isOnBoarding ? 'Login' : 'Create'}
-            </Text>
-          </TouchableOpacity>
         </View>
       </Background>
     </ScrollView>
@@ -268,16 +223,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
     marginBottom: '10%',
   },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
   linkerContainer: {
     flex: 1,
     flexDirection: 'row',
@@ -286,13 +231,6 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     marginBottom: '10%',
   },
-  header: {
-    color: '#fff',
-    fontSize: 22,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: '4%',
-  },
   subtext: {
     color: '#fff',
     fontSize: 20,
@@ -302,22 +240,6 @@ const styles = StyleSheet.create({
     marginHorizontal: '10%',
     marginTop: '15%',
   },
-  finalAction: {
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: 'white',
-    marginBottom: '25%',
-  },
-  finalActionLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: 'black',
-  },
   createCategory: {
     backgroundColor: '#53329B',
     width: SCREEN_WIDTH * 0.9,
@@ -334,15 +256,18 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '500',
   },
-  plusIcon: {
-    color: 'white',
-  },
   divider: {
     borderColor: 'white',
     borderBottomWidth: 1,
     width: SCREEN_WIDTH * 0.9,
     marginVertical: '2%',
   },
+  createLabel: {
+    color: TAGG_LIGHT_BLUE_2,
+    marginRight: 20,
+    fontSize: normalize(15),
+    fontWeight: '800',
+  },
 });
 
 export default CategorySelection;
diff --git a/src/screens/onboarding/CreateCustomCategory.tsx b/src/screens/profile/CreateCustomCategory.tsx
index eab72c7d..c4b17b1e 100644
--- a/src/screens/onboarding/CreateCustomCategory.tsx
+++ b/src/screens/profile/CreateCustomCategory.tsx
@@ -11,17 +11,17 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import {Background} from '../../components';
-import {OnboardingStackParams} from '../../routes';
+import {MainStackParams} from '../../routes';
 import {BackgroundGradientType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 type CreateCustomCategoryRouteProps = RouteProp<
-  OnboardingStackParams,
+  MainStackParams,
   'CreateCustomCategory'
 >;
 
 type CreateCustomCategoryNavigationProps = StackNavigationProp<
-  OnboardingStackParams,
+  MainStackParams,
   'CreateCustomCategory'
 >;
 
@@ -45,8 +45,6 @@ const CreateCustomCategory: React.FC<CreateCustomCategoryProps> = ({
       Alert.alert('Looks like you already have that one created!');
     } else {
       navigation.navigate('CategorySelection', {
-        screenType: route.params.screenType,
-        user: route.params.user,
         newCustomCategory: newCategory,
       });
     }
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 871d62bf..515cbacf 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -114,10 +114,6 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingBottom: 0,
   },
-  shareButtonTitle: {
-    fontWeight: 'bold',
-    color: '#6EE7E7',
-  },
   content: {
     flex: 9,
   },
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index b7efdd3b..d5377494 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -10,3 +10,5 @@ export {default as InviteFriendsScreen} from './InviteFriendsScreen';
 export {default as SettingsScreen} from './SettingsScreen';
 export {default as PrivacyScreen} from './PrivacyScreen';
 export {default as AccountType} from './AccountType';
+export {default as CategorySelection} from './CategorySelection';
+export {default as CreateCustomCategory} from './CreateCustomCategory';
diff --git a/src/types/types.ts b/src/types/types.ts
index 8d7f4aed..e7f651dc 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -165,22 +165,6 @@ export interface UserXType {
 }
 
 /**
- * We have two verification screen types, this enum is used to display proper content based on the type
- */
-export enum VerificationScreenType {
-  Phone,
-  Password,
-}
-
-/**
- * Two types for category selection screen
- */
-export enum CategorySelectionScreenType {
-  Onboarding,
-  Profile,
-}
-
-/**
  * Gradient type to accomodate new g background gradients for Tagg
  */
 export enum BackgroundGradientType {
diff --git a/yarn.lock b/yarn.lock
index d129ab5e..d9aab38e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -229,6 +229,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
   integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==
 
+"@babel/parser@^7.13.15":
+  version "7.13.15"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.15.tgz#8e66775fb523599acb6a289e12929fa5ab0954d8"
+  integrity sha512-b9COtcAlVEQljy/9fbcMHpG+UIW9ReF+gpaxDHTlZd0c6/UU9ng8zdySAW9sRTzpvcdCHn6bUcbuYUgGzLAWVQ==
+
 "@babel/plugin-external-helpers@^7.0.0":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.12.13.tgz#65ef9f4576297250dc601d2aa334769790d9966d"
@@ -643,6 +648,20 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.7.4":
+  version "7.13.15"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.15.tgz#c38bf7679334ddd4028e8e1f7b3aa5019f0dada7"
+  integrity sha512-/mpZMNvj6bce59Qzl09fHEs8Bt8NnpEDQYleHUPZQ3wXUMvXi+HJPLars68oAbmp839fGoOkv2pSL2z9ajCIaQ==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.13.9"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/parser" "^7.13.15"
+    "@babel/types" "^7.13.14"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.13", "@babel/types@^7.13.14", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.13.14"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.14.tgz#c35a4abb15c7cd45a2746d78ab328e362cbace0d"
@@ -1670,7 +1689,7 @@ array-filter@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
   integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
-array-includes@^3.1.1:
+array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
   integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
@@ -1701,6 +1720,16 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+array.prototype.flatmap@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz#94cfd47cc1556ec0747d97f7c7738c58122004c9"
+  integrity sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+    function-bind "^1.1.1"
+
 art@^0.10.1:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
@@ -2946,6 +2975,14 @@ eslint-plugin-react-native@3.8.1:
   dependencies:
     eslint-plugin-react-native-globals "^0.1.1"
 
+eslint-plugin-react-native@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-3.10.0.tgz#240f7e6979a908af3dfd9ba9652434c33f4d64cd"
+  integrity sha512-4f5+hHYYq5wFhB5eptkPEAR7FfvqbS7AzScUOANfAMZtYw5qgnCxRq45bpfBaQF+iyPMim5Q8pubcpvLv75NAg==
+  dependencies:
+    "@babel/traverse" "^7.7.4"
+    eslint-plugin-react-native-globals "^0.1.1"
+
 eslint-plugin-react@7.19.0:
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
@@ -2964,6 +3001,24 @@ eslint-plugin-react@7.19.0:
     string.prototype.matchall "^4.0.2"
     xregexp "^4.3.0"
 
+eslint-plugin-react@^7.23.2:
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz#2d2291b0f95c03728b55869f01102290e792d494"
+  integrity sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==
+  dependencies:
+    array-includes "^3.1.3"
+    array.prototype.flatmap "^1.2.4"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.0.4"
+    object.entries "^1.1.3"
+    object.fromentries "^2.0.4"
+    object.values "^1.1.3"
+    prop-types "^15.7.2"
+    resolve "^2.0.0-next.3"
+    string.prototype.matchall "^4.0.4"
+
 eslint-scope@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -4720,6 +4775,14 @@ jsx-ast-utils@^2.2.3:
     array-includes "^3.1.1"
     object.assign "^4.1.0"
 
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
+  integrity sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==
+  dependencies:
+    array-includes "^3.1.2"
+    object.assign "^4.1.2"
+
 jwa@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
@@ -5699,7 +5762,7 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.1:
+object.entries@^1.1.1, object.entries@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
   integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
@@ -5709,7 +5772,7 @@ object.entries@^1.1.1:
     es-abstract "^1.18.0-next.1"
     has "^1.0.3"
 
-object.fromentries@^2.0.2:
+object.fromentries@^2.0.2, object.fromentries@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.4.tgz#26e1ba5c4571c5c6f0890cef4473066456a120b8"
   integrity sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==
@@ -5735,7 +5798,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.0, object.values@^1.1.1:
+object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
   integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
@@ -6717,6 +6780,14 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.5
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -7314,7 +7385,7 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.matchall@^4.0.2:
+string.prototype.matchall@^4.0.2, string.prototype.matchall@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29"
   integrity sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==