normalize function and normalized all fonts on profile page

1 files changed, 19 insertions, 2 deletions

diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts
index fbe32189..e2f1f0b1 100644
--- a/src/utils/layouts.ts
+++ b/src/utils/layouts.ts
@@ -1,10 +1,12 @@
-import {Platform, StatusBar} from 'react-native';
+import {PixelRatio, Platform, StatusBar} from 'react-native';
 import {Dimensions} from 'react-native';
 
 export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get(
   'window',
 );
 
+export const SCREEN_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH;
+
 /**
  * Working as of Q1 2021, latest iPhone is 12
  * iPhone 8/SE has a logical screen ratio of about 1.77
@@ -12,7 +14,7 @@ export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get(
  */
 export const isIPhoneX = () =>
   Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
-    ? SCREEN_HEIGHT / SCREEN_WIDTH > 2
+    ? SCREEN_RATIO > 2
     : false;
 
 // Taken from: https://github.com/react-navigation/react-navigation/issues/283
@@ -29,3 +31,18 @@ export const StatusBarHeight = Platform.select({
 });
 
 export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3;
+
+/**
+ * This is a function for normalizing the font size for different devices, based on iphone 8.
+ *
+ * E.g. font size 13 on an iphone 8 is 13, but on an iPhone 11 is
+ * 14.5
+ */
+export const normalize = (fontSize: number) => {
+  // based on iphone 8 logical screen width
+  const scale = SCREEN_WIDTH / 375;
+  let newSize = fontSize * scale;
+  // round to the nearest 0.5
+  newSize = Math.round(PixelRatio.roundToNearestPixel(newSize) * 2) / 2;
+  return newSize;
+};