feature(native): iphone layout helper (#394)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/helpers",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "Builders helpers library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,6 +39,7 @@
     "react-native": ">=0.69.3",
     "react-native-haptic": ">=1.0.1",
     "react-native-size-matters": ">=0.3.0",
+    "react-native-device-info": ">=10.4.0",
     "styled-components": ">=5"
   },
   "devDependencies": {
@@ -87,6 +88,7 @@
     "react-native": "0.70.6",
     "react-native-haptic": "1.0.1",
     "react-native-size-matters": "0.4.0",
+    "react-native-device-info": "10.4.0",
     "rmfr": "2.0.0",
     "rollup": "3.3.0",
     "rollup-plugin-typescript2": "0.34.1",

src/native/index.ts

@@ -3,3 +3,4 @@ export * from './isIOS';
 export * from './generateHaptic';
 export * from './getShadow';
 export * from '../shared';
+export * from './iphoneHelper';

src/native/iphoneHelper.ts

@@ -0,0 +1,54 @@
+import { Platform, StatusBar } from 'react-native';
+import {
+  hasNotch,
+  hasDynamicIsland,
+  getDeviceId,
+} from 'react-native-device-info';
+
+const isIphone = Platform.OS === 'ios' && !Platform.isPad && !Platform.isTV;
+
+const isIphoneXAbove = () => isIphone && (hasNotch() || hasDynamicIsland());
+
+const getIphoneStatusBar = () => {
+  const deviceId = getDeviceId();
+
+  if (!!iphonesStatusbarHeight[deviceId]) {
+    return iphonesStatusbarHeight[deviceId];
+  }
+
+  return 20;
+};
+
+export const getStatusBarHeight = () => {
+  return Platform.select({
+    ios: getIphoneStatusBar(),
+    android: StatusBar.currentHeight,
+    default: 0,
+  });
+};
+
+export const getBottomSpace = () => (isIphoneXAbove() ? 34 : 0);
+
+const iphonesStatusbarHeight = {
+  'iPhone10,3': 44, // iPhone X
+  'iPhone10,6': 44, // iPhone X
+  'iPhone11,2': 44, // iPhone XS
+  'iPhone11,4': 44, // iPhone XS MAX
+  'iPhone11,6': 44, // // iPhone XS MAX
+  'iPhone11,8': 48, // iPhone XR
+  'iPhone12,1': 48, // iPhone 11
+  'iPhone12,3': 44, // iPhone 11 Pro
+  'iPhone12,5': 44, // iPhone 11 Pro Max
+  'iPhone13,1': 50, // iPhone 12 Mini
+  'iPhone13,2': 47, // iPhone 12
+  'iPhone13,3': 47, // iPhone 12 Pro
+  'iPhone13,4': 47, // iPhone 12 Pro Max
+  'iPhone14,4': 50, // iPhone 13 Mini
+  'iPhone14,5': 47, // iPhone 13
+  'iPhone14,2': 47, // iPhone 13 Pro
+  'iPhone14,3': 47, // iPhone 13 Pro Max
+  'iPhone14,7': 47, // iPhone 14
+  'iPhone14,8': 47, // iPhone 14 Plus
+  'iPhone15,2': 54, // iPhone 14 Pro
+  'iPhone15,3': 54, // iPhone 14 Pro Max
+};

yarn.lock

@@ -7245,6 +7245,11 @@ react-native-codegen@^0.70.6:
     jscodeshift "^0.13.1"
     nullthrows "^1.1.1"
 
+[email protected]:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-10.4.0.tgz#9d90706641941d7da8ab7b316a37d3111eb231e4"
+  integrity sha512-Z37e0HtpBvfkPRgv4xN7lXpvmJyzjwCXSFTXEkw6m2UgnnIsWlOD02Avu4hJXBlIMMazaW3ZLKal3o9h3AYvCw==
+
 react-native-gradle-plugin@^0.70.3:
   version "0.70.3"
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"