2 files changed, 24 insertions, 39 deletions

diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index b2123f44..7abe289f 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,7 +1,12 @@
-import React from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {RouteProp, useNavigation} from '@react-navigation/native';
 import {TabsGradient, Friends} from '../../components';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  HeaderHeight,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 import {
   SafeAreaView,
   StyleSheet,
@@ -24,7 +29,6 @@ interface FriendsListScreenProps {
 
 const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   const {userXId, screenType} = route.params;
-  const navigation = useNavigation();
 
   const {friends} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
@@ -55,31 +59,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
   },
-  header: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    height: SCREEN_HEIGHT * 0.05,
-    padding: '3%',
-    paddingBottom: 0,
-    marginTop: '1%',
-  },
-  headerText: {
-    position: 'absolute',
-    alignSelf: 'center',
-    fontSize: normalize(18),
-    fontWeight: '700',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-  },
-  headerButton: {
-    width: '5%',
-    aspectRatio: 1,
-    padding: 0,
-    marginLeft: '5%',
-    alignSelf: 'flex-start',
-    marginBottom: '1%',
+  backButton: {
+    marginLeft: 10,
   },
   body: {
+    marginTop: HeaderHeight,
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT * 0.8,
   },
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ec193db5..4a902e9e 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,5 +1,5 @@
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import BackIcon from '../../assets/icons/back-arrow.svg';
@@ -7,9 +7,14 @@ import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
-import {MainStackParams} from '../../routes/main';
+import {headerBarOptions, MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  HeaderHeight,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -39,19 +44,15 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     CommentType | undefined
   >(undefined);
 
+  useEffect(() => {
+    navigation.setOptions({
+      ...headerBarOptions('black', `${commentsLength} Comments`),
+    });
+  }, [commentsLength, navigation]);
+
   return (
     <View style={styles.background}>
       <SafeAreaView>
-        <View style={styles.header}>
-          <TouchableOpacity
-            style={styles.headerButton}
-            onPress={() => {
-              navigation.pop();
-            }}>
-            <BackIcon height={'100%'} width={'100%'} color={'white'} />
-          </TouchableOpacity>
-          <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
-        </View>
         <View style={styles.body}>
           <CommentsContainer
             objectId={moment_id}