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.