[TMA-527/506/523] Custom Moment Categories (#174)

* changed logic to allow ≥ 1 categories

* now using array of strings for moment categories

* updated error strings

* formatting and check for picker cancellation

* initial UI done

* cleaned up logic, added custom icon

* renamed onboarding stack to match main stack

* removed unused import

* deterministic color picker

* custom category defaults to selected instead of added

* removed function in route

5 files changed, 24 insertions, 10 deletions

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 4614168b..950f3ffc 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.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 {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
+import {MomentType, ScreenType} from '../../types';
 
 export type MainStackParams = {
   Search: {
@@ -40,10 +40,8 @@ export type MainStackParams = {
     userId: string;
     username: string;
   };
-  CategorySelection: {
-    categories: Array<string>;
-    screenType: CategorySelectionScreenType;
-  };
+  CategorySelection: {};
+  CreateCustomCategory: {};
   Notifications: {
     screenType: ScreenType;
   };
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index bf643fd8..4ad5bf40 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -10,6 +10,7 @@ import {
   CategorySelection,
   FriendsListScreen,
   NotificationsScreen,
+  CreateCustomCategory,
 } from '../../screens';
 import {MainStack, MainStackParams} from './MainStackNavigator';
 import {RouteProp} from '@react-navigation/native';
@@ -141,6 +142,17 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         }}
       />
       <MainStack.Screen
+        name="CreateCustomCategory"
+        component={CreateCustomCategory}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+          headerTitle: '',
+        }}
+      />
+      <MainStack.Screen
         name="IndividualMoment"
         component={IndividualMoment}
         options={{
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index 7ff00271..ea7ce8e8 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -1,7 +1,6 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import {
   CategorySelectionScreenType,
-  MomentCategoryType,
   TaggPopupType,
   UserType,
   VerificationScreenType,
@@ -28,9 +27,14 @@ export type OnboardingStackParams = {
   ProfileOnboarding: {username: string; userId: string};
   SocialMedia: {username: string; userId: string};
   CategorySelection: {
-    categories: Record<MomentCategoryType, boolean>;
     screenType: CategorySelectionScreenType;
     user: UserType;
+    newCustomCategory: string | undefined;
+  };
+  CreateCustomCategory: {
+    screenType: CategorySelectionScreenType;
+    user: UserType;
+    existingCategories: string[];
   };
   TaggPopup: {
     popupProps: TaggPopupType;
diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index a3d281f5..54614b32 100644
--- a/src/routes/onboarding/Onboarding.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {OnboardingStack} from './OnboardingStack';
+import {OnboardingStack} from './OnboardingStackNavigator';
 import {
   Login,
   InvitationCodeVerification,
diff --git a/src/routes/onboarding/index.ts b/src/routes/onboarding/index.ts
index 66b0f3f4..ce9ac046 100644
--- a/src/routes/onboarding/index.ts
+++ b/src/routes/onboarding/index.ts
@@ -1,2 +1,2 @@
-export * from './OnboardingStack';
-export {default} from './Onboarding';
+export * from './OnboardingStackNavigator';
+export {default} from './OnboardingStackScreen';