Merge pull request #531 from IvanIFChen/tma1029-fix-moment-header

[TMA-1029] Fix Moment Header

1 files changed, 13 insertions, 21 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 52b99d58..939c0cf6 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -25,8 +25,7 @@ import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TaggedUsersDrawer} from '.';
 import PauseIcon from '../../assets/icons/pause-icon.svg';
-import {TAGG_PURPLE} from '../../constants/constants';
-import {headerBarOptions} from '../../routes';
+import {headerBarOptions, multilineHeaderTitle} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
 import {loadUserMoments} from '../../store/actions';
@@ -43,7 +42,6 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import CommentsCount from '../comments/CommentsCount';
 import {GradientProgressBar, MomentTags} from '../common';
 import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
-import IndividualMomentTitleBar from './IndividualMomentTitleBar';
 interface MomentPostProps {
   moment: MomentPostType;
   userXId: string | undefined;
@@ -138,16 +136,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   };
 
-  useEffect(
-    () =>
+  useEffect(() => {
+    if (moment.moment_category.length > 20) {
       navigation.setOptions({
         ...headerBarOptions('white', ''),
-        headerTitle: () => (
-          <IndividualMomentTitleBar title={moment.moment_category} />
-        ),
-      }),
-    [moment.moment_id],
-  );
+        ...multilineHeaderTitle(moment.moment_category),
+      });
+    } else {
+      navigation.setOptions({
+        ...headerBarOptions('white', moment.moment_category),
+      });
+    }
+  }, [moment.moment_id]);
 
   /*
    *  Determines if an image is 9:16 to set aspect ratio of current image and
@@ -501,17 +501,9 @@ const styles = StyleSheet.create({
     height: 3,
     marginHorizontal: 2,
   },
-  progressDot: {
-    backgroundColor: '#fff',
-    width: 10,
-    height: 10,
-    borderRadius: 10,
-    borderWidth: 0.3,
-    borderColor: TAGG_PURPLE,
-    position: 'absolute',
-    top: -2.5,
+  profilePreviewContainer: {
+    paddingHorizontal: '3%',
   },
-  profilePreviewContainer: {paddingHorizontal: '3%'},
 });
 
 export default MomentPost;