https://github.com/gxsshallot/react-native-safe-area-utility
A tool for getting insets of Safe Area in React Native view.
https://github.com/gxsshallot/react-native-safe-area-utility
react-native safeareainsets
Last synced: 2 months ago
JSON representation
A tool for getting insets of Safe Area in React Native view.
- Host: GitHub
- URL: https://github.com/gxsshallot/react-native-safe-area-utility
- Owner: gxsshallot
- License: mit
- Created: 2019-04-03T06:49:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-03T09:25:34.000Z (over 7 years ago)
- Last Synced: 2024-10-14T12:03:06.246Z (almost 2 years ago)
- Topics: react-native, safeareainsets
- Language: JavaScript
- Size: 4.88 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-safe-area-utility
[](https://www.npmjs.com/package/react-native-safe-area-utility)
[](https://travis-ci.org/gaoxiaosong/react-native-safe-area-utility)
A tool for getting insets of Safe Area in React Native view.
## Platform
It exports three constants for three platforms.
For example:
```javascript
import { isIos, isAndroid, isWeb } from 'react-native-safe-area-inset';
if (isIos) {
// ...
} else if (isAndroid) {
// ...
} else if (isWeb) {
// ...
}
```
## Device
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:
```javascript
import { isIPhoneX, isIPad, isNewIPadPro } from 'react-native-safe-area-inset';
if (isIPhoneX) {
// ...
} else if (isNewIPadPro) {
// ...
} else if (isIPad) {
// ...
}
```
## Safe Area Inset
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:
```javascript
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;
```
## Util
There are some utilities:
* `isLandscape`: Get landscape status.
For example:
```javascript
import { isLandscape } from 'react-native-safe-area-inset';
if (isLandscape()) {
// ...
} else {
// ...
}
```