React-Native Detect Screen Notch

Question

I am using nativebase.io as the UI framework for my app.

My issue

when I input a header for an IOS device, if the iPhone simulator is simulating iPhone X, (where there is a notch on the top of the screen), the Header element automatically detects this and moves the Header element lower on the screen.

some android devices also have a similar notch at the top of the screen, but when I use a nativebase.io Header element, it doesn't detect the notch and the Header overlaps the notch.

My question

is there a way on react-native or nativebase.io to detect if the display has a notch? this way I could dynamically offset the Header.

Answer 1

Since the problem is on android, maybe you should try looking into StatusBar.currentHeight. Since the notch generally is part of the status bar, adding a padding on top of the header the size of the status bar should probably do it.