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

1 files changed, 10 insertions, 7 deletions

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;