ovr / react-native-status-bar-height Goto Github PK

View Code? Open in Web Editor NEW

456.0 9.0 55.0 840 KB

Small library that helps you to get status bar height, P.S 📱X supported ❤️

License: MIT License

JavaScript 35.44% TypeScript 64.56%

react-native-status-bar-height's Introduction

react-native-status-bar-height

Small library that helps you to get status bar height

P.S. iPhone X supported ❤️

Install

$ npm install --save react-native-status-bar-height
# OR
$ yarn add react-native-status-bar-height

Usage `getStatusBarHeight(skipAndroid: boolean = false)`

import { getStatusBarHeight } from 'react-native-status-bar-height';

// 44 - on iPhone X
// 20 - on iOS device
// X - on Android platfrom (runtime value)
// 0 - on all other platforms (default)
console.log(getStatusBarHeight());

// Will be 0 on Android, because you pass true to skipAndroid
console.log(getStatusBarHeight(true));

License

This project is open-sourced software licensed under the MIT License.

See the LICENSE file for more information.

react-native-status-bar-height's People

Contributors

Stargazers

Watchers

react-native-status-bar-height's Issues

Wrong height on iPhone 12s except mini

On the x iPhones all have the value 44.
iPhone 12, iPhone 12 Pro, iPhone 12 Pro Max fails and still have 20
iPhone 12 mini is correct with 44

IPHONE 14 Pro issue resolved

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 diff that solved my problem:

diff --git a/node_modules/react-native-status-bar-height/index.d.ts b/node_modules/react-native-status-bar-height/index.d.ts
index 3618a5e..3967bf7 100644
--- a/node_modules/react-native-status-bar-height/index.d.ts
+++ b/node_modules/react-native-status-bar-height/index.d.ts
@@ -5,6 +5,8 @@ declare module 'react-native-status-bar-height' {
     export function isIPhoneXMax(): boolean
     export function isIPhone12(): boolean
     export function isIPhone12Max(): boolean
+    export function isIPhone14(): boolean
+    export function isIPhone14Max(): boolean
     export function isIPhoneWithMonobrow(): boolean
     export function isExpo(): boolean;
 }
diff --git a/node_modules/react-native-status-bar-height/index.js b/node_modules/react-native-status-bar-height/index.js
index 08fd56b..8a92363 100644
--- a/node_modules/react-native-status-bar-height/index.js
+++ b/node_modules/react-native-status-bar-height/index.js
@@ -4,6 +4,8 @@ const STATUSBAR_DEFAULT_HEIGHT = 20;
 const STATUSBAR_X_HEIGHT = 44;
 const STATUSBAR_IP12_HEIGHT = 47;
 const STATUSBAR_IP12MAX_HEIGHT = 47;
+const STATUSBAR_IP14_HEIGHT = 54;
+const STATUSBAR_IP14MAX_HEIGHT = 47;
 
 const X_WIDTH = 375;
 const X_HEIGHT = 812;
@@ -17,6 +19,12 @@ const IP12_HEIGHT = 844;
 const IP12MAX_WIDTH = 428;
 const IP12MAX_HEIGHT = 926;
 
+const IP14_WIDTH = 393;
+const IP14_HEIGHT = 852;
+
+const IP14MAX_WIDTH = 428;
+const IP14MAX_HEIGHT = 926;
+
 const { height: W_HEIGHT, width: W_WIDTH } = Dimensions.get('window');
 
 let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;
@@ -24,6 +32,8 @@ let isIPhoneX_v = false;
 let isIPhoneXMax_v = false;
 let isIPhone12_v = false;
 let isIPhone12Max_v = false;
+let isIPhone14_v = false;
+let isIPhone14Max_v = false;
 let isIPhoneWithMonobrow_v = false;
 
 if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
@@ -43,6 +53,14 @@ if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
         isIPhoneWithMonobrow_v = true;
         isIPhone12Max_v = true;
         statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
+    } else if (W_WIDTH === IP14_WIDTH && W_HEIGHT === IP14_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone14_v = true;
+        statusBarHeight = STATUSBAR_IP14_HEIGHT;
+    } else if (W_WIDTH === IP14MAX_WIDTH && W_HEIGHT === IP14MAX_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone14Max_v = true;
+        statusBarHeight = STATUSBAR_IP14MAX_HEIGHT;
     }
 }
 
@@ -50,6 +68,8 @@ export const isIPhoneX = () =>  isIPhoneX_v;
 export const isIPhoneXMax = () =>  isIPhoneXMax_v;
 export const isIPhone12 = () =>  isIPhone12_v;
 export const isIPhone12Max = () =>  isIPhone12Max_v;
+export const isIPhone14 = () =>  isIPhone14_v;
+export const isIPhone14Max = () =>  isIPhone14Max_v;
 export const isIPhoneWithMonobrow = () => isIPhoneWithMonobrow_v;
 
 const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;

This issue body was partially generated by patch-package.

Create react app + react native web+ react-native-status-bar-height

Hello Dmitry,
When react-native-status-bar-height is imported in a create react app setup, this error is encountered

react-native-status-bar-height/index.js: Unexpected token, expected "," (18:46)

18 | export function getStatusBarHeight(skipAndroid: boolean = false): number {

Here is a link to reproduce the issue,
https://codesandbox.io/s/rwwp95zw34

Thank you.

wrong height on ipad pro(4th)

const styles = StyleSheet.create({
  statusBar: {
    height: getStatusBarHeight(),
    backgroundColor: Colors.main,
    width: screenWidth
  }
});

Wrong value for iPhone 14 Pro with dynamic island

On iPhone 14 pro with "Dynamic Island" it returns 20 while I think it should be the same as iPhone 12 47

global.__expo is now gettting deprecated.

In index.js - line 55 , there is a function that checks if we are on an expo environment.
The code block is this one in index.js.

const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
export const isExpo = () => getExpoRoot() !== undefined;

Due to the release of SDK40 they are giving a warning that global.__expo or global.Expo will be removed in SDK41. I think this one should be removed or replaced with something else.

Unable to resolve module react-native-status-bar-height

What is the use case for this now that React Native ships with SafeAreaView?

I was using this library until I discovered SafeAreaView. Is there another use case?

https://facebook.github.io/react-native/docs/safeareaview

Fails on new iPhone Xs Max

Returns the incorrect height on iPhone Xs Max. See similar issues around the community.
react-navigation/react-navigation#4985

This is because iPhone Xs Max has the same dpi as the iPhone X but the height and width are different so the library you depend on react-native-iphone-x-helper fails.

Wrong height on Iphone 14 pro and 14 promax

The function getStatusBarHeight() return 59 instead of 49. Even for npmjs.com, it write :
// 59 - iPhone 14 Pro / 14Pro Max

Wrong status bar height on Pixel 6

Title says it all...

Hey guys, how do you doing?
I intent to use this useful library in my clients RN projects. However they have a massive bunch of tests and needed to keep tests coverage and quality in their applications. So thinking about that I want to contibute with Jest setup to test, prioritarily, library frontiers. Do you agree or have any suggestions for that?

Height is always 0 for android

react-native's StatusBar.currentHeight ( https://facebook.github.io/react-native/docs/statusbar.html ) would be a more appropriate thing to return, as it determines the android status bar height.

Fix iPhone14, iPhone14Max, iPhone14ProMax status bar height problems

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 diff that solved my problem:

diff --git a/node_modules/react-native-status-bar-height/index.d.ts b/node_modules/react-native-status-bar-height/index.d.ts
index 3618a5e..8520a23 100644
--- a/node_modules/react-native-status-bar-height/index.d.ts
+++ b/node_modules/react-native-status-bar-height/index.d.ts
@@ -5,6 +5,9 @@ declare module 'react-native-status-bar-height' {
     export function isIPhoneXMax(): boolean
     export function isIPhone12(): boolean
     export function isIPhone12Max(): boolean
+    export function isIPhone14(): boolean
+    export function isIPhone14Max(): boolean
+    export function isIPhone14ProMax(): boolean
     export function isIPhoneWithMonobrow(): boolean
     export function isExpo(): boolean;
 }
diff --git a/node_modules/react-native-status-bar-height/index.js b/node_modules/react-native-status-bar-height/index.js
index 08fd56b..100065d 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_IP14_HEIGHT = 54;
+const STATUSBAR_IP14MAX_HEIGHT = 47;
+const STATUSBAR_IP14PROMAX_HEIGHT = 50;
 
 const X_WIDTH = 375;
 const X_HEIGHT = 812;
@@ -17,6 +20,15 @@ const IP12_HEIGHT = 844;
 const IP12MAX_WIDTH = 428;
 const IP12MAX_HEIGHT = 926;
 
+const IP14_WIDTH = 393;
+const IP14_HEIGHT = 852;
+
+const IP14MAX_WIDTH = 428;
+const IP14MAX_HEIGHT = 926;
+
+const IP14PROMAX_WIDTH = 430;
+const IP14PROMAX_HEIGHT = 932;
+
 const { height: W_HEIGHT, width: W_WIDTH } = Dimensions.get('window');
 
 let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;
@@ -24,6 +36,9 @@ let isIPhoneX_v = false;
 let isIPhoneXMax_v = false;
 let isIPhone12_v = false;
 let isIPhone12Max_v = false;
+let isIPhone14_v = false;
+let isIPhone14Max_v = false;
+let isIPhone14ProMax_v = false;
 let isIPhoneWithMonobrow_v = false;
 
 if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
@@ -43,6 +58,18 @@ if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
         isIPhoneWithMonobrow_v = true;
         isIPhone12Max_v = true;
         statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
+    } else if (W_WIDTH === IP14_WIDTH && W_HEIGHT === IP14_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone14_v = true;
+        statusBarHeight = STATUSBAR_IP14_HEIGHT;
+    } else if (W_WIDTH === IP14MAX_WIDTH && W_HEIGHT === IP14MAX_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone14Max_v = true;
+        statusBarHeight = STATUSBAR_IP14MAX_HEIGHT;
+    } else if (W_WIDTH === IP14PROMAX_WIDTH && W_HEIGHT === IP14PROMAX_HEIGHT) {
+        isIPhoneWithMonobrow_v = true;
+        isIPhone14ProMax_v = true;
+        statusBarHeight = STATUSBAR_IP14PROMAX_HEIGHT;
     }
 }
 
@@ -50,6 +77,9 @@ export const isIPhoneX = () =>  isIPhoneX_v;
 export const isIPhoneXMax = () =>  isIPhoneXMax_v;
 export const isIPhone12 = () =>  isIPhone12_v;
 export const isIPhone12Max = () =>  isIPhone12Max_v;
+export const isIPhone14 = () =>  isIPhone14_v;
+export const isIPhone14Max = () =>  isIPhone14Max_v;
+export const isIPhone14ProMax = () =>  isIPhone14ProMax_v;
 export const isIPhoneWithMonobrow = () => isIPhoneWithMonobrow_v;
 
 const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;

This issue body was partially generated by patch-package.

What exactly is skipAndroid value for?

In my android device I seem to need marginTop: 0 for it to behave as I expect. However, this library returns a value of 25.333, which leaves white space between android's statusbar and the beginning of my app. I have read there's this skipAndroid value that sets it to 0, but, what exactly is this? It means it will ignore every other statusbar height for any other android?