fix: add iphone14Pro modalTopOffset #450

src/index.tsx

@@ -38,7 +38,7 @@ import {
 import { IProps, TOpen, TClose, TStyle, IHandles, TPosition } from './options';
 import { useDimensions } from './utils/use-dimensions';
 import { getSpringConfig } from './utils/get-spring-config';
-import { isIphoneX, isIos, isAndroid } from './utils/devices';
+import { iphoneOffsetHeight, isIos, isAndroid } from './utils/devices';
 import { isBelowRN65, isRNGH2 } from './utils/libraries';
 import { invariant } from './utils/invariant';
 import { composeRefs } from './utils/compose-refs';
@@ -142,7 +142,7 @@ const ModalizeBase = (
   const isHandleOutside = handlePosition === 'outside';
   const handleHeight = withHandle ? 20 : isHandleOutside ? 35 : 20;
   const fullHeight = screenHeight - modalTopOffset;
-  const computedHeight = fullHeight - handleHeight - (isIphoneX ? 34 : 0);
+  const computedHeight = fullHeight - handleHeight - iphoneOffsetHeight();
   const endHeight = modalHeight || computedHeight;
   const adjustValue = adjustToContentHeight ? undefined : endHeight;
   const snaps = snapPoint ? [0, endHeight - snapPoint, endHeight] : [0, endHeight];

src/utils/devices.ts

@@ -3,18 +3,47 @@ import { Platform, Dimensions } from 'react-native';
 const { width, height } = Dimensions.get('window');
 
 export const isIos = Platform.OS === 'ios';
-export const isIphoneX =
-  isIos &&
-  (height === 780 ||
-    width === 780 ||
-    height === 812 ||
-    width === 812 ||
-    height === 844 ||
-    width === 844 ||
-    height === 896 ||
-    width === 896 ||
-    height === 926 ||
-    width === 926);
+
+const DEVICE_LAYOUT_MAX_VALUES: { [key: number]: string } = {
+  780: 'iPhone',
+  812: 'iPhoneX',
+  896: 'iPhoneXMax',
+  844: 'iPhone12',
+  926: 'iPhone12Max',
+  852: 'iPhone14Pro',
+  932: 'iPhone14ProMax',
+};
+
+const targetIphoneSafeArea = (wWidth: number, wHeight: number) => {
+  const equalWidth = DEVICE_LAYOUT_MAX_VALUES[wWidth] ?? null;
+  const equalHeight = DEVICE_LAYOUT_MAX_VALUES[wHeight] ?? null;
+
+  if (equalWidth !== null) {
+    return equalWidth;
+  }
+
+  if (equalHeight !== null) {
+    return equalHeight;
+  }
+
+  return null;
+};
+
+const targetIPhoneOffsetHeight: { [key: string]: number } = {
+  iPhone: 34,
+  iPhoneX: 44,
+  iPhoneXMax: 44,
+  iPhone12: 47,
+  iPhone12Max: 47,
+  iPhone14Pro: 59,
+  iPhone14ProMax: 59,
+};
+
+export const iphoneOffsetHeight = () => {
+  const iphoneType: string | null = targetIphoneSafeArea(width, height);
+
+  return isIos && iphoneType !== null ? targetIPhoneOffsetHeight[iphoneType] : 0;
+};
 
 export const isAndroid = Platform.OS === 'android';
 export const isWeb = Platform.OS === 'web';