React-Native Detect Screen Notch

react-native native-base
X0r0N picture X0r0N · Aug 15, 2018 · Viewed 32.1k times · Source

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

Filipe picture Filipe · Aug 15, 2018

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.

Related questions

Module AppRegistry is not registered callable module (calling runApplication)

I am using native base for making app in react-native. I am new to both things. When I run the app It gives me this error: Here is my code: export default class Point extends Component { render() { return ( <Container&…

Read More
Text vertical align in react native (using nativebase)

I was wondering there is a way I can align vertically in React Native. I'm trying to position on the bottom but I don't think I can find a good way to do it. If anyone knows how to solve …

Read More
React-Native Button Align Center

I'm using native base button i want to align the button in the center of the screen i tried this: <Container style={{flex:1, flexDirection:'row', alignItems:'center', justifyContent:'center',}}> <Form style={{}}> <Item last> <…

Read More