Add logic to display current selected category

2 files changed, 41 insertions, 22 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index ad301ded..a8664d85 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -219,25 +219,35 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   };
 
   const SelectableItem: FC<{
-    text: string;
+    text: 'Tag Friends' | 'Category';
     imageUri: ImageSourcePropType;
     onPress: () => void;
-  }> = ({text, imageUri, onPress}) => (
-    <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
-      <View style={styles.row}>
-        <Image style={styles.tagIcon} source={imageUri} />
-        <Text style={styles.tagFriendsTitle}>{text}</Text>
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.taggedUsersText}>{taggedUsersText}</Text>
-        <FrontArrow
-          width={normalize(13)}
-          height={normalize(13)}
-          color={'white'}
-        />
-      </View>
-    </TouchableOpacity>
-  );
+  }> = ({text, imageUri, onPress}) => {
+    return (
+      <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
+        <View style={styles.row}>
+          {text === 'Category' && !momentCategory && (
+            <Text style={styles.asteriskText}>* </Text>
+          )}
+          <Image style={styles.tagIcon} source={imageUri} />
+          <Text style={styles.tagFriendsTitle}>{text}</Text>
+        </View>
+        <View style={styles.row}>
+          {text === 'Tag Friends' && (
+            <Text style={styles.itemInfoText}>{taggedUsersText}</Text>
+          )}
+          {text === 'Category' && (
+            <Text style={styles.itemInfoText}>{momentCategory}</Text>
+          )}
+          <FrontArrow
+            width={normalize(13)}
+            height={normalize(13)}
+            color={'white'}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <SearchBackground>
@@ -363,13 +373,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: normalize(20),
   },
-  taggedUsersText: {
+  asteriskText: {
+    color: TAGG_LIGHT_BLUE_2,
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    height: 15,
+    alignSelf: 'center',
+  },
+  itemInfoText: {
     color: 'white',
     width: 150,
     fontSize: normalize(10),
     lineHeight: normalize(11),
     letterSpacing: normalize(0.3),
     textAlign: 'right',
+
     marginRight: 5,
   },
   tagIcon: {
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 285732e7..dd3bc1bb 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -33,10 +33,11 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
     title: string;
   }> = ({title}) => (
     <TouchableOpacity
-      onPress={async () => {
-        await AsyncStorage.setItem('selectedMomentCategory', title);
-        navigation.goBack();
-      }}>
+      onPress={async () =>
+        navigation.navigate('CaptionScreen', {
+          selectedCategory: 'Food',
+        })
+      }>
       <Text style={{height: 100, backgroundColor: 'green'}}>foo</Text>
     </TouchableOpacity>
   );