[TMA-344] Tabs bar margin, Social Taggs margin (#108)

* fixed margin for smaller screen

* fixed header avatar

* cleaned up code, improved logic

* yarn lint

* dynamically calculate avatar and header

* changed back tint color and use 1% for tabs bar margin

* last edit to avatar size

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

2 files changed, 7 insertions, 6 deletions

diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 34ad7f48..a0321341 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,4 +1,5 @@
 import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -12,8 +13,7 @@ import {
 import {AVATAR_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
 import {SimplePostType, TwitterPostType} from '../../types';
-import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
 
 type SocialMediaTaggsRouteProp = RouteProp<
   ProfileStackParams,
@@ -42,7 +42,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
     profile: {name},
     socialAccounts,
   } = context;
-  const headerHeight = headerBarHeightWithImage();
+
   let accountData = socialAccounts[socialMediaType];
 
   /**
@@ -54,8 +54,9 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
       headerTitle: () => {
         return <AvatarTitle isProfileView={isProfileView} />;
       },
+      headerStyle: {height: AvatarHeaderHeight},
     });
-  }, []);
+  }, [isProfileView, navigation]);
 
   return (
     <LinearGradient
@@ -67,7 +68,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
       {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
       <View
         // we want a slightly bigger header here for the avatar image
-        style={[styles.flex, {paddingTop: headerHeight}]}>
+        style={[styles.flex, {marginTop: AvatarHeaderHeight}]}>
         <ScrollView
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainer}>
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index a9f3511c..c2bd4c4b 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -3,4 +3,4 @@ export {default as SocialMediaTaggs} from './SocialMediaTaggs';
 export {default as CaptionScreen} from './CaptionScreen';
 export {default as IndividualMoment} from './IndividualMoment';
 export {default as MomentCommentsScreen} from './MomentCommentsScreen';
-export {default as FollowersListScreen} from './FollowersListScreen';
\ No newline at end of file
+export {default as FollowersListScreen} from './FollowersListScreen';