{"id":16904793,"url":"https://github.com/zoontek/react-native-edge-to-edge","last_synced_at":"2025-05-14T01:02:56.013Z","repository":{"id":37000646,"uuid":"427532950","full_name":"zoontek/react-native-edge-to-edge","owner":"zoontek","description":"Effortlessly enable edge-to-edge display in React Native (formerly known as react-native-bars).","archived":false,"fork":false,"pushed_at":"2025-04-24T12:34:58.000Z","size":4986,"stargazers_count":813,"open_issues_count":0,"forks_count":25,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-30T16:12:35.881Z","etag":null,"topics":["edge-to-edge","navigation-bar","react-native","status-bar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/zoontek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["zoontek"]}},"created_at":"2021-11-13T00:36:28.000Z","updated_at":"2025-04-28T16:17:28.000Z","dependencies_parsed_at":"2024-01-25T11:05:45.857Z","dependency_job_id":"2312567d-7a99-4ec9-a627-35639c63d17d","html_url":"https://github.com/zoontek/react-native-edge-to-edge","commit_stats":{"total_commits":183,"total_committers":5,"mean_commits":36.6,"dds":"0.021857923497267784","last_synced_commit":"2700489d36e5d9e764121c5c74b0b6da80fd67d1"},"previous_names":["zoontek/react-native-edge-to-edge","zoontek/react-native-bars"],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-edge-to-edge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-edge-to-edge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-edge-to-edge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-edge-to-edge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoontek","download_url":"https://codeload.github.com/zoontek/react-native-edge-to-edge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253576267,"owners_count":21930169,"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":["edge-to-edge","navigation-bar","react-native","status-bar"],"created_at":"2024-10-13T18:35:36.177Z","updated_at":"2025-05-14T01:02:56.006Z","avatar_url":"https://github.com/zoontek.png","language":"TypeScript","funding_links":["https://github.com/sponsors/zoontek"],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-edge-to-edge\n\nEffortlessly enable [edge-to-edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge) display in React Native, allowing your Android (v6 and above) app content to flow seamlessly beneath the system bars.\n\n[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/zoontek/react-native-edge-to-edge/blob/main/LICENSE)\n[![npm version](https://img.shields.io/npm/v/react-native-edge-to-edge?style=for-the-badge)](https://www.npmjs.org/package/react-native-edge-to-edge)\n[![npm downloads](https://img.shields.io/npm/dt/react-native-edge-to-edge.svg?label=downloads\u0026style=for-the-badge)](https://www.npmjs.org/package/react-native-edge-to-edge)\n\n\u003cimg width=\"240\" src=\"./docs/logo.svg\" alt=\"Logo\"\u003e\n\n## Credits\n\nThis project has been built and is maintained thanks to the support from [Expo](https://expo.dev).\n\n\u003ca href=\"https://expo.io\"\u003e\n  \u003cimg width=\"180\" src=\"./docs/expo.svg\" alt=\"Expo\"\u003e\n\u003c/a\u003e\n\n## Support\n\nThis library follows the React Native [releases support policy](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md).\u003cbr\u003e\nIt is supporting the **latest version**, and the **two previous minor series**.\n\n## Motivations\n\n### Android 15\n\nRecently, Google introduced a significant change: apps targeting SDK 35 will have edge-to-edge display [enforced by default](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge) on Android 15+. Google is _likely_ to mandate that app updates on the Play Store target SDK 35 starting on August 31, 2025. This assumption is based on the [previous years' requirements following a similar timeline](https://support.google.com/googleplay/android-developer/answer/11926878?sjid=11853000253346477363-EU#zippy=%2Care-there-any-exceptions-for-existing-apps-targeting-api-or-below:~:text=App%20update%20requirements).\n\n### Consistency\n\niOS has long used edge-to-edge displays, so adopting this design across all platforms ensures a consistent user experience. It also simplifies managing safe areas, eliminating the need for special cases specific to Android.\n\n### Immersive mode\n\n[Immersive mode](https://developer.android.com/develop/ui/views/layout/immersive) allows you to hide the status and navigation bars, making it ideal for full-screen experiences. Currently, the built-in [`StatusBar`](https://reactnative.dev/docs/statusbar) component uses [`FLAG_FULLSCREEN`](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#FLAG_FULLSCREEN), a flag that has been deprecated since Android 11.\n\n## Installation\n\n```bash\n$ npm i -S react-native-edge-to-edge\n# --- or ---\n$ yarn add react-native-edge-to-edge\n```\n\n### Pick a parent theme\n\nThis library requires you to update the parent of your Android `AppTheme` to an edge-to-edge version. Don't worry, it's very easy to understand! You just need to choose a theme based on the current value:\n\n| If you currently have…                               | …you should use                            |\n| :--------------------------------------------------- | :----------------------------------------- |\n| `Theme.AppCompat.DayNight.NoActionBar`               | `Theme.EdgeToEdge`                         |\n| `Theme.MaterialComponents.DayNight.NoActionBar`      | `Theme.EdgeToEdge.Material2`               |\n| `Theme.Material3.DayNight.NoActionBar`               | `Theme.EdgeToEdge.Material3`               |\n| `Theme.Material3.DynamicColors.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3.Dynamic`       |\n| `Theme.AppCompat.Light.NoActionBar`                  | `Theme.EdgeToEdge.Light`                   |\n| `Theme.MaterialComponents.Light.NoActionBar`         | `Theme.EdgeToEdge.Material2.Light`         |\n| `Theme.Material3.Light.NoActionBar`                  | `Theme.EdgeToEdge.Material3.Light`         |\n| `Theme.Material3.DynamicColors.Light.NoActionBar`    | `Theme.EdgeToEdge.Material3.Dynamic.Light` |\n\n### Expo\n\nAdd the library plugin in your `app.json` config file and [create a new build](https://docs.expo.dev/develop/development-builds/create-a-build) 👷:\n\n```json\n{\n  \"expo\": {\n    \"plugins\": [\n      [\n        \"react-native-edge-to-edge\",\n        {\n          \"android\": {\n            \"parentTheme\": \"Default\",\n            \"enforceNavigationBarContrast\": false\n          }\n        }\n      ]\n    ]\n  }\n}\n```\n\n_📌 The available plugins options are:_\n\n```ts\ntype ParentTheme =\n  | \"Default\" // uses `Theme.EdgeToEdge`\n  | \"Material2\" // uses `Theme.EdgeToEdge.Material2`\n  | \"Material3\" // uses `Theme.EdgeToEdge.Material3`\n  | \"Material3.Dynamic\" // uses `Theme.EdgeToEdge.Material3.Dynamic`\n  | \"Light\" // uses `Theme.EdgeToEdge.Light`\n  | \"Material2.Light\" // uses `Theme.EdgeToEdge.Material2.Light`\n  | \"Material3.Light\" // uses `Theme.EdgeToEdge.Material3.Light`\n  | \"Material3.Dynamic.Light\"; // uses `Theme.EdgeToEdge.Material3.Dynamic.Light`\n\ntype Options = {\n  android?: {\n    // see the \"Pick a parent theme\" section\n    parentTheme?: ParentTheme; // optional (default: `Default`)\n    // see the \"Transparent navigation bar\" section\n    enforceNavigationBarContrast?: boolean; // optional (default: `true`)\n  };\n};\n```\n\n\u003e [!NOTE]\n\u003e This library is not yet supported in the [Expo Go](https://expo.dev/go) sandbox app.\n\n### Bare React Native\n\nEdit your `android/app/src/main/res/values/styles.xml` file to inherit from one of the provided themes:\n\n```xml\n\u003cresources\u003e\n  \u003c!-- update your AppTheme parent (see the \"Pick a parent theme\" section) --\u003e\n  \u003cstyle name=\"AppTheme\" parent=\"Theme.EdgeToEdge\"\u003e\n    \u003c!-- … --\u003e\n    \u003c!-- disable the contrasting background of the navigation bar (optional) --\u003e\n    \u003citem name=\"enforceNavigationBarContrast\"\u003efalse\u003c/item\u003e\n  \u003c/style\u003e\n\u003c/resources\u003e\n```\n\n## Considerations\n\n### Transparent navigation bar\n\nBy default, this library adopts [Android 15 defaults](https://developer.android.com/about/versions/15/behavior-changes-15#ux): a fully transparent status bar, a fully transparent gesture navigation bar, and a semi-opaque button navigation bar. To enforce full transparency in all cases, set the `enforceNavigationBarContrast` option to `false`.\u003cbr/\u003e\nNote that by doing so, you will need to manage the navigation bar style (using `SystemBars`) in the same way you handle the status bar.\n\n### Keyboard management\n\nEnabling edge-to-edge display disrupts Android keyboard management (`android:windowSoftInputMode=\"adjustResize\"`), requiring an alternative solution. While [`KeyboardAvoidingView`](https://reactnative.dev/docs/keyboardavoidingview) is a viable option, we recommend using [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller) for its enhanced capabilities.\n\n### Safe area management\n\nEffective safe area management is essential to prevent content from being displayed behind transparent system bars. To achieve this, we highly recommend using [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context), a well-known and trusted library.\n\n### Modal component quirks\n\nReact native built-in [`Modal`](https://reactnative.dev/docs/modal) component runs in its own native context, so be sure to set both the `statusBarTranslucent` and `navigationBarTranslucent` props to `true`. However, we recommend using the [react-navigation modals](https://reactnavigation.org/docs/modal) or the [`expo-router` modal screens](https://docs.expo.dev/router/advanced/modals/#modal-screen-using-expo-router) instead.\n\n## API\n\n### SystemBars\n\nUsing [`StatusBar`](https://reactnative.dev/docs/statusbar), [`expo-status-bar`](https://docs.expo.dev/versions/latest/sdk/status-bar), or [`expo-navigation-bar`](https://docs.expo.dev/versions/latest/sdk/navigation-bar/) in apps with edge-to-edge layout enabled may cause unexpected behavior, as they currently use [deprecated APIs](https://developer.android.com/about/versions/15/behavior-changes-15#deprecated-apis).\u003cbr/\u003e\nTo address this, we provide a component to replace them and manage your app's system bars: `\u003cSystemBars /\u003e`.\n\n```tsx\nimport { SystemBars } from \"react-native-edge-to-edge\";\n\n// \"auto\" is based on current color scheme (light -\u003e dark content, dark -\u003e light content)\ntype Style = \"auto\" | \"inverted\" | \"light\" | \"dark\";\n\ntype SystemBarsProps = {\n  // set the color of the system bar content (as no effect on semi-opaque navigation bar)\n  style?: Style | { statusBar?: Style; navigationBar?: Style };\n  // hide system bars (the navigation bar cannot be hidden on iOS)\n  hidden?: boolean | { statusBar?: boolean; navigationBar?: boolean };\n};\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cSystemBars style=\"light\" /\u003e\n    {/* … */}\n  \u003c/\u003e\n);\n```\n\n#### SystemBars.pushStackEntry\n\nPush a `SystemBars` entry onto the stack. The return value should be passed to `popStackEntry` when complete.\n\n```ts\nconst entry: SystemBarsEntry = SystemBars.pushStackEntry(\n  props /*: SystemBarsProps */,\n);\n```\n\n#### SystemBars.popStackEntry\n\nRemove an existing `SystemBars` stack entry from the stack.\n\n```ts\nSystemBars.popStackEntry(entry /*: SystemBarsEntry */);\n```\n\n#### SystemBars.replaceStackEntry\n\nReplace an existing `SystemBars` stack entry with new props.\n\n```ts\nconst entry: SystemBarsEntry = SystemBars.replaceStackEntry(\n  entry /*: SystemBarsEntry */,\n  props /*: SystemBarsProps */,\n);\n```\n\n#### SystemBars.setStyle\n\nSet the system bars style.\n\n```ts\nSystemBars.setStyle(style /*: SystemBarsProps[\"style\"] */);\n```\n\n#### SystemBars.setHidden\n\nShow or hide the system bars.\n\n```ts\nSystemBars.setHidden(style /*: SystemBarsProps[\"hidden\"] */);\n```\n\n## Third-party libraries 🧩\n\nIf you're an author and your package interferes with edge-to-edge, refer to the [`react-native-is-edge-to-edge` `README.md`](./react-native-is-edge-to-edge) for compatibility instructions.\n\n## Troubleshooting 🤔\n\n#### The navigation bar style is erratic\n\nThere's currently [an open issue](https://issuetracker.google.com/issues/346386744) with the Android 15 emulator image regarding the navigation bar style when it is is fully transparent. This issue does not occur on physical devices.\n\n#### The system bars stays opaque\n\nIn recent months, support has been added across the React Native ecosystem. If you use any of the following libraries, make sure you're on the latest version:\n\n- `expo-router`\n- `galeria`\n- `react-native-avoid-softinput`\n- `react-native-bootsplash`\n- `react-native-bottom-tabs`\n- `react-native-keyboard-controller`\n- `react-native-reanimated`\n- `react-native-screens`\n- `react-native-true-sheet`\n- `react-native-unistyles (v3)`\n\nMake also sure to replace all occurrences of the built-in `StatusBar`, [`expo-status-bar`](https://docs.expo.dev/versions/latest/sdk/status-bar) and [`expo-navigation-bar`](https://docs.expo.dev/versions/latest/sdk/navigation-bar/) with `SystemBars`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-native-edge-to-edge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoontek%2Freact-native-edge-to-edge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-native-edge-to-edge/lists"}