[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

2 files changed, 15 insertions, 5 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={{