3 files changed, 54 insertions, 5 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86e30bdc..15566555 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -431,7 +431,6 @@ const styles = StyleSheet.create({
   postButton: {
     width: SCREEN_WIDTH * 0.8,
     height: normalize(37),
-    backgroundColor: TAGG_LIGHT_BLUE,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 6,
diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index 9b8672ea..2f364e59 100644
--- a/src/screens/profile/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -170,7 +170,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
             onPress={() => {
               navigation.push('CreateCustomCategory', {
                 existingCategories: momentCategories.concat(selectedCategories),
-                fromScreen: 'CategorySelection',
+                fromScreen: route.name,
               });
             }}>
             <PlusIcon width={30} height={30} color="white" />
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 24db015e..cdc941db 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -1,6 +1,6 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {FC} from 'react';
+import React, {FC, useEffect} from 'react';
 import {
   Image,
   ScrollView,
@@ -11,16 +11,19 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {SearchBackground} from '../../components';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
+import {SearchBackground, TaggSquareButton} from '../../components';
 import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
+import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
   getMomentCategoryIconInfo,
   normalize,
   SCREEN_HEIGHT,
+  SCREEN_WIDTH,
   StatusBarHeight,
 } from '../../utils';
 
@@ -39,10 +42,22 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const {momentCategories} = useSelector(
     (state: RootState) => state.momentCategories,
   );
+  const dispatch = useDispatch();
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
   const insetTop = useSafeAreaInsets().top;
 
+  useEffect(() => {
+    if (route.params.newCustomCategory) {
+      dispatch(
+        updateMomentCategories(
+          momentCategories.concat([route.params.newCustomCategory]),
+          false,
+        ),
+      );
+    }
+  }, [route.params.newCustomCategory]);
+
   const ListItem: FC<{
     title: string;
     onPress: () => void;
@@ -90,6 +105,21 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
               }
             />
           ))}
+          <TaggSquareButton
+            onPress={() =>
+              navigation.navigate('CreateCustomCategory', {
+                existingCategories: momentCategories,
+                fromScreen: route.name,
+              })
+            }
+            title={'Create a new category'}
+            buttonStyle={'large'}
+            buttonColor={'blue'}
+            labelColor={'white'}
+            style={styles.button}
+            labelStyle={styles.buttonText}
+            icon={<PlusIcon style={styles.plusIcon} />}
+          />
         </ScrollView>
       </View>
     </SearchBackground>
@@ -138,6 +168,26 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  button: {
+    width: SCREEN_WIDTH * 0.9,
+    height: normalize(67),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    alignSelf: 'center',
+    marginTop: 40,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: 18,
+  },
+  plusIcon: {
+    color: 'white',
+    marginRight: normalize(25),
+    width: 30,
+    height: 30,
+  },
 });
 
 export default ChoosingCategoryScreen;