React-Native Detect Screen Notch

问题

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.

回答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.

回答2:

I'm using the approach from this answer https://stackoverflow.com/a/53593067/923497 and it is working fine for me.

In React Native looks like

import { StatusBar, Platform } from 'react-native';

if (Platform.OS === 'android') {
  const hasNotch = StatusBar.currentHeight > 24;
}

回答3:

Not Using Expo

If you are using React Native without Expo, or an Expo app which has been ejected, you can use the react-native-device-info package. It has a hasNotch() function which works pretty well at detecting such devices.

The Native Base Content, Footer and Header components inspect an isIphoneX theme variable to determine whether or not to add spacing for a device notch.

You can customized your Native Base theme and modify your variables files to use react-native-device-info to detect the notch:

# native-base-theme/variables/*.js
import DeviceInfo from 'react-native-device-info';
...
isIphoneX = DeviceInfo.hasNotch();
...

Now your Native Base Header, Footer and Content components should add the appropriate spacing for devices that have notches.

Using Expo

Since react-native-device-info does not work on Expo projects, there is not a simple way to do this. You will have to write a function to accomplish your goal. If you inspect the hasNotch() source code, you will notice that the function simply does an array lookup based on the device's brand and model. You can get the device model using Expo Constants, but they do not make it easy:

import { Platform } from 'react-native;
import Constants from 'expo-constants';

const getDeviceModel = () => Platform.select({
  ios: Constants.platform.ios.model,
  android: Constants.deviceName
});

However, there is no way to get the device brand in Expo. Obviously, all ios devices have a brand of Apple, but the Android device brands are more elusive. You may be able to construct a lookup array that only uses the device model, but it may not be as accurate.

I wish there were a better solution for Expo users.

回答4:

I have been using this library "react-native-status-bar-height" and works pretty good.

https://www.npmjs.com/package/react-native-status-bar-height

来源：https://stackoverflow.com/questions/51858807/react-native-detect-screen-notch

标签

react-native

native-base