ptelad / react-native-iphone-x-helper

A library to help you design your react-native app for notched iPhones
MIT License
942 stars 138 forks source link

react-navigation-tabs iphone14PRO #49

Open JonsonHI opened 2 years ago

JonsonHI commented 2 years ago

image

react-navigation-tabs This library is used

How do I upgrade

alexandrius commented 2 years ago

@JonsonHI use the patch

diff --git a/node_modules/react-native-iphone-x-helper/index.js b/node_modules/react-native-iphone-x-helper/index.js
index afd571f..0cab9cf 100644
--- a/node_modules/react-native-iphone-x-helper/index.js
+++ b/node_modules/react-native-iphone-x-helper/index.js
@@ -1,16 +1,30 @@
 import { Dimensions, Platform, StatusBar } from 'react-native';

+
+function isIphone() {
+    return Platform.OS === 'ios' && !Platform.isPad && !Platform.isTV;
+}
+
 export function isIphoneX() {
     const dimen = Dimensions.get('window');
     return (
-        Platform.OS === 'ios' &&
-        !Platform.isPad &&
-        !Platform.isTVOS &&
+        isIphone() &&
         ((dimen.height === 780 || dimen.width === 780)
           || (dimen.height === 812 || dimen.width === 812)
           || (dimen.height === 844 || dimen.width === 844)
           || (dimen.height === 896 || dimen.width === 896)
-          || (dimen.height === 926 || dimen.width === 926))
+          || (dimen.height === 926 || dimen.width === 926)
+          || (dimen.height === 852 || dimen.width === 852)
+          || (dimen.height === 932 || dimen.width === 932))
+    );
+}
+
+export function hasIsland() {
+    const dimen = Dimensions.get('window');
+    return (
+        isIphone() &&
+        ((dimen.height === 852 || dimen.width === 852)
+            || (dimen.height === 932 || dimen.width === 932))
     );
 }

@@ -21,9 +35,18 @@ export function ifIphoneX(iphoneXStyle, regularStyle) {
     return regularStyle;
 }

+
+function safeHeight() {
+    // FIXME: There are more height values depending on the model (iPhone 12/13 -> 47, 13 mini -> 50, ..)
+    return hasIsland() ? 59 : 44
+}
+function normalHeight(){
+    return hasIsland() ? 40 : 30
+}
+
 export function getStatusBarHeight(safe) {
     return Platform.select({
-        ios: ifIphoneX(safe ? 44 : 30, 20),
+        ios: ifIphoneX(safe ? safeHeight() : normalHeight(), 20),
         android: StatusBar.currentHeight,
         default: 0
     });