A tool for getting insets of Safe Area in React Native view.
It exports three constants for three platforms.
For example:
import { isIos, isAndroid, isWeb } from 'react-native-safe-area-inset';
if (isIos) {
// ...
} else if (isAndroid) {
// ...
} else if (isWeb) {
// ...
}There is some constants to identify special devices.
isIPhoneX: iPhone X serial devices.isIPad: iPad.isNewIPadPro: Only new iPad Pro which is full screen.
For example:
import { isIPhoneX, isIPad, isNewIPadPro } from 'react-native-safe-area-inset';
if (isIPhoneX) {
// ...
} else if (isNewIPadPro) {
// ...
} else if (isIPad) {
// ...
}You can use getSafeAreaInset to get the insets of safe area in window. It is implemented by javascript only without native code.
It supports:
- iPhone (Not X).
- iPhone X Serial.
- iPad.
- New iPad Pro (Full Screen).
- Android (Translucent or not).
It support both portrait and landscape for each device.
The method has two parameters. First one is landscape, which uses auto judging when is undefined. Second one is translucent for Android device only.
For example:
import { getSafeAreaInset } from 'react-native-safe-area-inset';
const insets = getSafeAreaInset();
// const insets = getSafeAreaInset(undefined, true);
// const insets = getSafeAreaInset(true);
const {top, bottom, left, right} = insets;There are some utilities:
isLandscape: Get landscape status.
For example:
import { isLandscape } from 'react-native-safe-area-inset';
if (isLandscape()) {
// ...
} else {
// ...
}