Solution 1 :

Normally the height of the status bar as below,

  • 44 for safe iPhone X
  • 30 for unsafe iPhone X
  • 20 for other iOS devices
  • StatusBar.currentHeight for Android

Also you can use an external library like react-native-iphone-x-helper to design your app for the iPhone X, XS, XS Max & XR or react-native-safe-area-context to handle safe area.

Hope this helps you feel free for doubts.

Solution 2 :

I was looking for some generic solution and finally I am using ‘react-native-status-bar-height’ to find out the status bar height and then adding it to the actual navigation header height for positioning

Problem :

I am working on a requirement where I have to position the container below header with position: 'absolute' and top based on the header height which I can get it from import { Header } from 'react-navigation-stack' and then Header.HEIGHT.

Everything works perfect expect iPhone X like devices where it has some extra pullover of device due to which it is taking some extra space and thus I am not able to place the container properly, so I want to calculate that height so that I can add it up if it present to the position top value.


Comment posted by Saikat Saha

I am looking for some concrete solution and more specifically I need the height for iPhone X so that I can able to add it up on the positioning value

Comment posted by SDushan

@SaikatSaha what you mean by

Comment posted by Saikat Saha

I mean height of pullover

Comment posted by SDushan

@SaikatSaha that is what I mention in my answer. iPhone X safe area height is

Comment posted by Saikat Saha

That is a hard coded one, suppose in future some company launch a similiar type of phone with different resolution on Android, then my code will break, that’s why I need some generic solution


Leave a Reply

Your email address will not be published. Required fields are marked *