4 files changed, 49 insertions, 36 deletions
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f5352af1..629a0091 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,4 @@
-export * from './screenDimensions';
-export * from './statusBarHeight';
+export * from './layouts';
 export * from './moments';
 export * from './common';
 export * from './users';
diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts
new file mode 100644
index 00000000..e2f1f0b1
--- /dev/null
+++ b/src/utils/layouts.ts
@@ -0,0 +1,48 @@
+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
+ * Rest has a logical screen ratio of about 2.16
+ */
+export const isIPhoneX = () =>
+  Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
+    ? SCREEN_RATIO > 2
+    : 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 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;
+};
diff --git a/src/utils/screenDimensions.ts b/src/utils/screenDimensions.ts
deleted file mode 100644
index 56277ddc..00000000
--- a/src/utils/screenDimensions.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {Dimensions} from 'react-native';
-
-const {width, height} = Dimensions.get('window');
-
-export const SCREEN_WIDTH = width;
-export const SCREEN_HEIGHT = height;
diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts
deleted file mode 100644
index b8eb7b33..00000000
--- a/src/utils/statusBarHeight.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Platform, StatusBar} from 'react-native';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions';
-
-const X_WIDTH = 375;
-const X_HEIGHT = 812;
-const XSMAX_WIDTH = 414;
-const XSMAX_HEIGHT = 896;
-
-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 AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3;