diff --git a/src/index.tsx b/src/index.tsx index 68586a5e..9d5f3ed8 100644 --- a/src/index.tsx +++ b/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]; diff --git a/src/utils/devices.ts b/src/utils/devices.ts index 79ab74f1..c0a3da4a 100644 --- a/src/utils/devices.ts +++ b/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';