From 09c9a767e1d5bc431d404957efd284a1149d98e8 Mon Sep 17 00:00:00 2001 From: Guilherme Bauer <91896584+guilhermebauer-builders@users.noreply.github.com> Date: Mon, 27 Mar 2023 11:07:25 -0300 Subject: [PATCH] feature(native): iphone layout helper (#394) --- package.json | 4 ++- src/native/index.ts | 1 + src/native/iphoneHelper.ts | 54 ++++++++++++++++++++++++++++++++++++++ yarn.lock | 5 ++++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/native/iphoneHelper.ts diff --git a/package.json b/package.json index f8058b1..bb6395b 100644 --- a/package.json +++ b/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", diff --git a/src/native/index.ts b/src/native/index.ts index ab4a682..48d2350 100644 --- a/src/native/index.ts +++ b/src/native/index.ts @@ -3,3 +3,4 @@ export * from './isIOS'; export * from './generateHaptic'; export * from './getShadow'; export * from '../shared'; +export * from './iphoneHelper'; diff --git a/src/native/iphoneHelper.ts b/src/native/iphoneHelper.ts new file mode 100644 index 0000000..6f819e9 --- /dev/null +++ b/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 +}; diff --git a/yarn.lock b/yarn.lock index 326ca87..0448b4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7245,6 +7245,11 @@ react-native-codegen@^0.70.6: jscodeshift "^0.13.1" nullthrows "^1.1.1" +react-native-device-info@10.4.0: + 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"