{"id":16629964,"url":"https://github.com/greenfrvr/react-native-window-guard","last_synced_at":"2025-03-16T22:30:53.082Z","repository":{"id":34775323,"uuid":"184443195","full_name":"greenfrvr/react-native-window-guard","owner":"greenfrvr","description":"SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.","archived":false,"fork":false,"pushed_at":"2023-01-03T20:48:03.000Z","size":3397,"stargazers_count":33,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T15:51:00.433Z","etag":null,"topics":["android","ios","react-native","react-native-component","safearea"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greenfrvr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-01T16:06:28.000Z","updated_at":"2025-01-12T10:30:18.000Z","dependencies_parsed_at":"2023-01-15T09:15:18.046Z","dependency_job_id":null,"html_url":"https://github.com/greenfrvr/react-native-window-guard","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenfrvr%2Freact-native-window-guard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenfrvr%2Freact-native-window-guard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenfrvr%2Freact-native-window-guard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenfrvr%2Freact-native-window-guard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greenfrvr","download_url":"https://codeload.github.com/greenfrvr/react-native-window-guard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830952,"owners_count":20354854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native","react-native-component","safearea"],"created_at":"2024-10-12T04:44:24.362Z","updated_at":"2025-03-16T22:30:52.753Z","avatar_url":"https://github.com/greenfrvr.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-window-guard\n\n[![npm package](https://img.shields.io/github/package-json/v/greenfrvr/react-native-window-guard.svg)](https://www.npmjs.com/package/react-native-window-guard)\n[![license](https://img.shields.io/github/license/greenfrvr/react-native-window-guard.svg)](https://github.com/greenfrvr/react-native-window-guard/blob/master/LICENSE)\n\n\nProject 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.\n\nAndroid             |  iOS\n:-------------------------:|:-------------------------:\n\u003cimg src=\"https://github.com/greenfrvr/react-native-window-guard/blob/master/example/snapshot_android.png\" height=400/\u003e  |  \u003cimg src=\"https://github.com/greenfrvr/react-native-window-guard/blob/master/example/snapshot_ios.png\" height=400/\u003e\n\n## Getting started\n\n`$ npm install react-native-window-guard --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-window-guard`\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-window-guard` and add `RNWindowGuard.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNWindowGuard.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n  - Add `import com.github.greenfrvr.RNWindowGuardPackage;` to the imports at the top of the file\n  - Add `new RNWindowGuardPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-window-guard'\n  \tproject(':react-native-window-guard').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-window-guard/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-window-guard')\n  \t```\n\n\n## Usage\nPut 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. \n\nFor convenience and better perfomance there are serveral insets configurations that are predefined. They are defined statically in `WindowGuard`. Available predefined insets configurations are: \n- `left`\n- `right`\n- `top`\n- `bottom`\n- `vertical`\n- `horizontal`\n- `all`\n\nBelow is an example of applying insets both for top and bottom sides of your content: \n\n```javascript\nimport WindowGuard from 'react-native-window-guard';\n\nexport default class App extends React.Component {\n\n  componentDidMount() {\n    WindowGuard.requestWindowInsets();\n  }\n\n  render() {\n    return (\n      \u003cWindowGuard\n        style={{flex: 1}}\n        applyInsets={WindowGuard.vertical}\u003e\n        //content\n      \u003c/WindowGuard\u003e\n    );\n  }\n}\n```\nNotice 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.\n\n## Dynamic changes\n\nWindow 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:\n\n ```javascript\nimport WindowGuard from 'react-native-window-guard';\n\nexport default class App extends React.Component {\n\n  toggleStatusBar = () =\u003e {\n    //change statusBarHidden state\n    StatusBar.setHidden(statusBarHidden, true);       //change system ui views state\n    this.container \u0026\u0026 this.container.adjustInsets()   //request to refresh insets values\n  };\n\n  render() {\n    return (\n      \u003cWindowGuard\n        ref={r =\u003e this.container = r}\n        style={{flex: 1}}\n        applyInsets={WindowGuard.all}\u003e\n        //content\n      \u003c/WindowGuard\u003e\n    );\n  }\n}\n```\n\n## HOC \nFor convenience there is HOC wich will simplify `WindowGuard` usage. `withWindowGuard` HOC will return component wrapped into `WindowGuard` with defined insets configuration. For example \n\n`const GuardedView = withWindowGuard(View, WindowGuard.all)`\n\nwill return `View` component wrapped into `WindowGuard` with insets applied to all sides.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreenfrvr%2Freact-native-window-guard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreenfrvr%2Freact-native-window-guard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreenfrvr%2Freact-native-window-guard/lists"}