Menu
I am using nativebase.io as the UI framework for my app.
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.
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.
635
Android notches Install react-native-device-info. Check if the device has a notch with DeviceInfo. hasNotch() - this compares the device brand and model to a list of devices with notches - a crude but effective workaround.
React Native device info provide hasNotch() function to check device have notch or not it will return only true or false . hasNotch() function work in ios, android, and windows.
One approach is to use SafeAreaView component available in React Native. 1import { SafeAreaView } from 'react-native'; It can be used in the place of the top-level View component. It renders content within the safe area boundaries around the nested content and automatically applies padding.
The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
