[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>

15 files changed, 71 insertions, 52 deletions

diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index e9998113..f3105f70 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,27 +1,26 @@
 import React from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext} from '../../routes/';
 
-/**
- * An image component that returns the <Image> of the icon for a specific social media platform.
- */
-
 type AvatarTitleProps = {
   isProfileView: boolean;
 };
+
 const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
   const {avatar} = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
   return (
-    <LinearGradient
-      colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
-      useAngle={true}
-      angle={154.72}
-      angleCenter={{x: 0.5, y: 0.5}}
-      style={[styles.gradient]}>
+    <View style={[styles.container]}>
+      <LinearGradient
+        colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.gradient}
+      />
       <Image
         style={styles.avatar}
         source={
@@ -30,22 +29,30 @@ const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-    </LinearGradient>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   gradient: {
-    width: AVATAR_GRADIENT_DIM,
-    height: AVATAR_GRADIENT_DIM,
-    borderRadius: AVATAR_GRADIENT_DIM / 2,
+    width: '82%',
+    height: '82%',
+    borderRadius: 1000,
     justifyContent: 'center',
     alignItems: 'center',
   },
   avatar: {
-    width: AVATAR_DIM,
-    height: AVATAR_DIM,
-    borderRadius: AVATAR_DIM / 2,
+    position: 'absolute',
+    width: '73%',
+    height: '73%',
+    borderRadius: 1000,
   },
 });
 
diff --git a/src/components/profile/FollowUnfollow.tsx b/src/components/profile/FollowUnfollow.tsx
index bb1e9ef7..fa224be3 100644
--- a/src/components/profile/FollowUnfollow.tsx
+++ b/src/components/profile/FollowUnfollow.tsx
@@ -15,7 +15,7 @@ const FollowUnfollow: React.FC<FollowUnfollowProps> = ({
     <TouchableOpacity
       style={styles.button}
       onPress={() => handleFollowUnfollow()}>
-      <Text style={styles.text}>{!followed ? `Follow` : `Unfollow`}</Text>
+      <Text style={styles.text}>{!followed ? 'Follow' : 'Unfollow'}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index f3ef5dfa..0b56a787 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,15 +5,19 @@ import FollowCount from './FollowCount';
 import {View, Text, StyleSheet} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {AuthContext, ProfileContext} from '../../routes/';
-import { ProfilePreviewType } from 'src/types';
+import {ProfilePreviewType} from 'src/types';
 
 type ProfileHeaderProps = {
-  isProfileView: boolean,
-  numFollowing: number,
+  isProfileView: boolean;
+  numFollowing: number;
   numFollowers: number;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView, numFollowing, numFollowers}) => {
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  isProfileView,
+  numFollowing,
+  numFollowers,
+}) => {
   const {
     profile: {name},
   } = isProfileView
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 6848f993..7bbc3fb6 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -149,7 +149,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   };
 
   //With @ sign if on search screen.
-  const usernameToDisplay = !isComment ? `@` + username : username;
+  const usernameToDisplay = !isComment ? '@' + username : username;
   const usernameStyle = isComment
     ? styles.commentUsername
     : styles.searchUsername;
diff --git a/src/constants/regex.ts b/src/constants/regex.ts
index ac38a3b7..01fd9a2d 100644
--- a/src/constants/regex.ts
+++ b/src/constants/regex.ts
@@ -51,8 +51,8 @@ export const genderRegex: RegExp = /^$|^[A-Za-z\- ]{2,20}$/;
 
 /**
  * The phone regex has the following constraints
- *  - must be 10 digits 
+ *  - must be 10 digits
  *  - accepts 012-345-6789
- * 
+ *
  */
 export const phoneRegex: RegExp = /([0-9]{10})/;
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
index 6bc1ed9d..d40e0728 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStack.tsx
@@ -6,7 +6,12 @@ export type OnboardingStackParams = {
   InvitationCodeVerification: undefined;
   RegistrationOne: undefined;
   RegistrationTwo: {phone: string};
-  RegistrationThree: {firstName: string; lastName: string; phone: string; email: string};
+  RegistrationThree: {
+    firstName: string;
+    lastName: string;
+    phone: string;
+    email: string;
+  };
   Checkpoint: {username: string; userId: string};
   Verification: {phone: string};
   ProfileOnboarding: {username: string; userId: string};
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index d85f003e..b535d90d 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -27,7 +27,7 @@ export type ProfileStackParams = {
     isProfileView: boolean;
   };
   FollowersListScreen: {
-    isProfileView: boolean,
+    isProfileView: boolean;
     isFollowers: boolean;
   };
 };
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e0341c40..21a1f7d2 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -53,7 +53,7 @@ const NavigationBar: React.FC = () => {
           borderTopWidth: 0,
           left: 0,
           right: 0,
-          bottom: 0,
+          bottom: '1%',
         },
       }}>
       <Tabs.Screen name="Home" component={Home} />
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 8e53996f..0be1e831 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -48,7 +48,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="six" />
-       <View style={styles.textContainer}>
+      <View style={styles.textContainer}>
         <Text style={styles.header}>You are registered!</Text>
         <Text style={styles.subtext}>
           We're almost there. Would you like to setup your profile now?
@@ -64,7 +64,6 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
           </TouchableOpacity>
         </View>
       </View>
-      
     </Background>
   );
 };
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 3249a281..edefebaf 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -106,7 +106,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
     });
   };
 
-    /*
+  /*
    * Handles changes to the email field value and verifies the input by updating state and running a validation function.
    */
   const handleEmailUpdate = (email: string) => {
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';
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 60f516ce..bf846b1c 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -81,7 +81,7 @@ export const getMomentCommentsCount = async (
     const status = response.status;
     if (status === 200) {
       const response_data = await response.json();
-      callback(response_data['count']);
+      callback(response_data.count);
     } else {
       console.log(
         'Something went wrong! 😭',
diff --git a/src/types/types.ts b/src/types/types.ts
index 97c8ef64..8b55e113 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -77,9 +77,9 @@ export interface MomentType {
 }
 
 export interface CommentType {
-  comment_id: string, 
-  comment: string,
-  date_time: string,
-  commenter__id: string,
-  commenter__username: string
+  comment_id: string;
+  comment: string;
+  date_time: string;
+  commenter__id: string;
+  commenter__username: string;
 }
diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts
index dd4a67ac..b8eb7b33 100644
--- a/src/utils/statusBarHeight.ts
+++ b/src/utils/statusBarHeight.ts
@@ -1,25 +1,28 @@
-import {useHeaderHeight} from '@react-navigation/stack';
 import {Platform, StatusBar} from 'react-native';
-import {AVATAR_DIM} from '../constants';
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from './screenDimensions';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions';
 
 const X_WIDTH = 375;
 const X_HEIGHT = 812;
 const XSMAX_WIDTH = 414;
 const XSMAX_HEIGHT = 896;
 
-const isIPhoneX = () =>
+export const isIPhoneX = () =>
   Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
     ? (SCREEN_WIDTH === X_WIDTH && SCREEN_HEIGHT === X_HEIGHT) ||
       (SCREEN_WIDTH === XSMAX_WIDTH && SCREEN_HEIGHT === XSMAX_HEIGHT)
     : false;
 
+// Taken from: https://github.com/react-navigation/react-navigation/issues/283
+export const HeaderHeight = Platform.select({
+  ios: 44,
+  android: 56,
+  default: 64,
+});
+
 export const StatusBarHeight = Platform.select({
   ios: isIPhoneX() ? 44 : 20,
   android: StatusBar.currentHeight,
   default: 0,
 });
 
-export const headerBarHeightWithImage = () => {
-  return Math.max(useHeaderHeight() + 14, AVATAR_DIM + StatusBarHeight + 14);
-};
+export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3;