Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greenfrvr/react-native-window-guard
SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
https://github.com/greenfrvr/react-native-window-guard
android ios react-native react-native-component safearea
Last synced: 17 days ago
JSON representation
SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
- Host: GitHub
- URL: https://github.com/greenfrvr/react-native-window-guard
- Owner: greenfrvr
- License: mit
- Created: 2019-05-01T16:06:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:48:03.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T04:44:22.832Z (about 1 month ago)
- Topics: android, ios, react-native, react-native-component, safearea
- Language: Java
- Homepage:
- Size: 3.24 MB
- Stars: 33
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-window-guard
[](https://www.npmjs.com/package/react-native-window-guard)
[](https://github.com/greenfrvr/react-native-window-guard/blob/master/LICENSE)
Project represents simple way to handle notches and system ui decorations for React Native. In comparison to alternatives (e.g. `SafeAreaView`) it works on both iOS and Android and doesn't use hardcoded values, getting all insets with operating system APIs instead.
Android | iOS
:-------------------------:|:-------------------------:
| 
## Getting started
`$ npm install react-native-window-guard --save`
### Mostly automatic installation
`$ react-native link react-native-window-guard`
### Manual installation
#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-window-guard` and add `RNWindowGuard.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNWindowGuard.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
#### Android
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
- Add `import com.github.greenfrvr.RNWindowGuardPackage;` to the imports at the top of the file
- Add `new RNWindowGuardPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':react-native-window-guard'
project(':react-native-window-guard').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-window-guard/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
compile project(':react-native-window-guard')
```
## Usage
Put your layout inside `WindowGuard` component and define which insets you want to be applied. To make this use `applyInsets` prop. It takes array with sides which should be affected with insets. Available values: `top`, `bottom`, `left`, `right`. After this relevant window insets will be requested from native and applied as paddings to `WindowGuard` component.
For convenience and better perfomance there are serveral insets configurations that are predefined. They are defined statically in `WindowGuard`. Available predefined insets configurations are:
- `left`
- `right`
- `top`
- `bottom`
- `vertical`
- `horizontal`
- `all`
Below is an example of applying insets both for top and bottom sides of your content:
```javascript
import WindowGuard from 'react-native-window-guard';
export default class App extends React.Component {
componentDidMount() {
WindowGuard.requestWindowInsets();
}
render() {
return (
//content
);
}
}
```
Notice that you can still add paddings to `WindowGuard` and they will be added to applied window insets. Currently all paddings definitions are supported includeing `paddingHorizontal`, `paddingVertical` and `padding` attributes.
## Dynamic changes
Window guard will handle orientation changes and apply new relevant insets automatically for you. Unfortunately there are still cases where you need to handle some ui changes manually. For example hiding status bar. You can request window guard to refresh insets after configuation change by calling `adjustInsets` method. Below is small usage example:
```javascript
import WindowGuard from 'react-native-window-guard';
export default class App extends React.Component {
toggleStatusBar = () => {
//change statusBarHidden state
StatusBar.setHidden(statusBarHidden, true); //change system ui views state
this.container && this.container.adjustInsets() //request to refresh insets values
};
render() {
return (
this.container = r}
style={{flex: 1}}
applyInsets={WindowGuard.all}>
//content
);
}
}
```
## HOC
For convenience there is HOC wich will simplify `WindowGuard` usage. `withWindowGuard` HOC will return component wrapped into `WindowGuard` with defined insets configuration. For example
`const GuardedView = withWindowGuard(View, WindowGuard.all)`
will return `View` component wrapped into `WindowGuard` with insets applied to all sides.