Fixed iPhone 14, 15 and 16 with Dynamic Island status bar height issue

[Talha-Jawed]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the difference that solved my problem:

diff --git a/node_modules/react-native-status-bar-height/index.js b/node_modules/react-native-status-bar-height/index.js
index 08fd56b..94e5795 100644
--- a/node_modules/react-native-status-bar-height/index.js
+++ b/node_modules/react-native-status-bar-height/index.js
@@ -4,6 +4,9 @@ const STATUSBAR_DEFAULT_HEIGHT = 20;
 const STATUSBAR_X_HEIGHT = 44;
 const STATUSBAR_IP12_HEIGHT = 47;
 const STATUSBAR_IP12MAX_HEIGHT = 47;
+const STATUSBAR_IP14PRO_HEIGHT = 49;
+const STATUSBAR_IP16PRO_HEIGHT = 51;
+const STATUSBAR_IP16PROMAX_HEIGHT = 53;
 
 const X_WIDTH = 375;
 const X_HEIGHT = 812;
@@ -17,6 +20,18 @@ const IP12_HEIGHT = 844;
 const IP12MAX_WIDTH = 428;
 const IP12MAX_HEIGHT = 926;
 
+const IP14PRO_WIDTH = 393;
+const IP14PRO_HEIGHT = 852;
+
+const IP14PROMAX_WIDTH = 430;
+const IP14PROMAX_HEIGHT = 932;
+
+const IP16PRO_WIDTH = 402;
+const IP16PRO_HEIGHT = 874;
+
+const IP16PROMAX_WIDTH = 440;
+const IP16PROMAX_HEIGHT = 956;
+
 const { height: W_HEIGHT, width: W_WIDTH } = Dimensions.get('window');
 
 let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;
@@ -25,6 +40,7 @@ let isIPhoneXMax_v = false;
 let isIPhone12_v = false;
 let isIPhone12Max_v = false;
 let isIPhoneWithMonobrow_v = false;
+let isIPhoneWithDynamicIsland_v = false;
 
 if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
     if (W_WIDTH === X_WIDTH && W_HEIGHT === X_HEIGHT) {
@@ -43,6 +59,20 @@ if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
         isIPhoneWithMonobrow_v = true;
         isIPhone12Max_v = true;
         statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
+    } else if (W_WIDTH === IP14PROMAX_WIDTH && W_HEIGHT === IP14PROMAX_HEIGHT) {
+        isIPhoneWithDynamicIsland_v = true;
+        statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
+    } else if (W_WIDTH === IP14PRO_WIDTH && W_HEIGHT === IP14PRO_HEIGHT) {
+        isIPhoneWithDynamicIsland_v = true;
+        statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
+    } 
+
+    else if (W_WIDTH === IP16PRO_WIDTH && W_HEIGHT === IP16PRO_HEIGHT) {
+        isIPhoneWithDynamicIsland_v = true;
+        statusBarHeight = STATUSBAR_IP16PRO_HEIGHT;
+    } else if (W_WIDTH === IP16PROMAX_WIDTH && W_HEIGHT === IP16PROMAX_HEIGHT) {
+        isIPhoneWithDynamicIsland_v = true;
+        statusBarHeight = STATUSBAR_IP16PROMAX_HEIGHT;
     }
 }
 
@@ -51,6 +81,7 @@ export const isIPhoneXMax = () =>  isIPhoneXMax_v;
 export const isIPhone12 = () =>  isIPhone12_v;
 export const isIPhone12Max = () =>  isIPhone12Max_v;
 export const isIPhoneWithMonobrow = () => isIPhoneWithMonobrow_v;
+export const isIPhoneWithDynamicIsland = () => isIPhoneWithDynamicIsland_v;
 
 const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
 

[flavio-dias]

nice job, i would also try to open a PR to the project since the doc says that its open sourced

[AwaisAliKolachi]

Great work man! you should open a PR as @flavio-dias suggested.

[Talha-Jawed]

@flavio-dias @AwaisAliKolachi

Hi @ovr,

I've created PR #57 to fix status bar height inaccuracies on newer devices.
Many developers seem to be facing this issue, so merging it soon would help the community greatly.
Please review it when possible. Happy to adjust if needed.

Thanks!

[yorickshan]

https://github.com/rn-parts/rn-statusbar-height has merged this pr, [email protected].