react-native-edge-to-edge makes Android apps draw under the system bars

Android 15 turned edge-to-edge into the default

The motivation section of the README is about a platform change rather than about aesthetics. Google introduced a significant change: apps targeting SDK 35 have edge-to-edge display enforced by default on Android 15 and above. The README adds that Google is likely to mandate that app updates on the Play Store target SDK 35 starting on August 31, 2025, an assumption based on the previous years' requirements following a similar timeline. That is the whole reason this library exists. When the platform starts drawing your content under the status bar and navigation bar without asking, an app that was laid out for the old inset model looks broken, and the fix is a theme change rather than a layout rewrite. The consistency argument is the second motivation. iOS has long used edge-to-edge displays, so adopting the same design across platforms gives a consistent user experience, and it simplifies managing safe areas by removing Android specific special cases. The third motivation is immersive mode. The README points out that the built in StatusBar component uses FLAG_FULLSCREEN, a flag deprecated since Android 11, which makes the library the way to hide the status and navigation bars properly for full screen experiences. The audience is Android developers on React Native, including Expo users, who need their content to flow seamlessly beneath the system bars on Android 6 and above.

The mechanism is a theme parent swap

There is no JavaScript API to call here. The library works by changing the parent of your Android AppTheme. The README provides a lookup table, and the rule is mechanical: take the theme you have and move to the EdgeToEdge variant with the same design language. Theme.AppCompat.DayNight.NoActionBar becomes Theme.EdgeToEdge, Theme.MaterialComponents.DayNight.NoActionBar becomes Theme.EdgeToEdge.Material2, Theme.Material3.DayNight.NoActionBar becomes Theme.EdgeToEdge.Material3, and the DynamicColors variant of Material3 becomes Theme.EdgeToEdge.Material3.Dynamic. Light variants map the same way, so Theme.Material3.Light.NoActionBar becomes Theme.EdgeToEdge.Material3.Light, and Theme.Material3Expressive.DayNight.NoActionBar becomes Theme.EdgeToEdge.Material3Expressive. Each of those EdgeToEdge themes is defined in the android/ directory of this package and shipped with it, which is why the library has a native module at all rather than being a pure JavaScript helper. The library also ships a companion package directory named react-native-is-edge-to-edge, which sits alongside src/ in the repository and is presumably how an application checks whether edge-to-edge is currently active. The main entry point is the package root, with the exports map in package.json offering the root plus an ./expo subpath for the config plugin, and an app.plugin.js at the root of the package.

Installing the package and configuring it in Expo

The package installs like any other React Native dependency.

$ npm i -S react-native-edge-to-edge
# --- or ---
$ yarn add react-native-edge-to-edge

For an Expo project, the setup goes through a config plugin rather than by editing the Android theme by hand. The README says to add the library plugin in your app config file and create a new build.

import type { ConfigContext, ExpoConfig } from "expo/config";
import edgeToEdge from "react-native-edge-to-edge/expo"; // use `require` in app.config.js

export default ({ config }: ConfigContext): ExpoConfig => ({
  // …
  plugins: [
    edgeToEdge({
      android: {
        parentTheme: "Default",
        enforceNavigationBarContrast: false,
      },
    }),
  ],
});

The same options work in a static app.json, where the plugin entry is written as an array of the plugin name and its options.

{
  "expo": {
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Default",
            "enforceNavigationBarContrast": false,
          },
        }
      ]
    ]
  }
}

The parentTheme option is the same lookup as the manual table, expressed as a string. The README lists the available values, and each one names the theme it uses, for example Default uses Theme.EdgeToEdge, Material3 uses Theme.EdgeToEdge.Material3, and Material3Expressive.Dynamic.Light uses Theme.EdgeToEdge.Material3Expressive.Dynamic.Light. What you should see after a rebuild is content drawn beneath the system bars rather than above them. If the layout does not change, the parent theme is the first thing to check.

React Native 0.86 already ships these fixes

The most important line in the README is an IMPORTANT callout, and it changes the recommendation. React Native 0.86 ships many edge-to-edge fixes, and if you are on that version or later, the README says to prefer enabling edge-to-edge through the built-in edgeToEdgeEnabled=true Gradle property so that you benefit from them, paired with @zoontek/react-native-navigation-bar if you want to control the navigation bar style. That is an unusually direct statement for a library README: the library tells you that a newer platform version has absorbed its main job. The remaining piece, control over the navigation bar style, is delegated to a sibling package by the same author. The recommendation therefore depends on your React Native version rather than on your Android version. On 0.86 and later, the built-in property is the better path and this package is largely redundant for the core use case. On earlier versions, and given that the library follows the React Native releases support policy while supporting the latest version and the two previous minor series, this package is the way to get the same layout. If you are on an older React Native and are considering upgrading anyway, that upgrade is the cheaper long term path, since it removes the theme swap and the plugin configuration entirely.

What the repository looks like and how it is built

The package metadata shows a library built with react-native-builder-bob, which is the usual tool for shipping both a CommonJS and an ES module build with TypeScript declarations.

{
  "name": "react-native-edge-to-edge",
  "version": "1.8.2",
  "license": "MIT",
  "description": "Effortlessly enable edge-to-edge display in React Native",
  "author": "Mathieu Acthernoene <[email protected]>",
}

The main entry is ./dist/commonjs/index.js, the module entry is ./dist/module/index.js, and types are shipped for both. The exports map adds the ./expo subpath for the config plugin, plus ./package.json and ./app.plugin.js. The scripts are minimal: a clean that removes dist, a format pass with prettier, a typecheck that runs tsc --noEmit, a build that runs bob build, and a prepack that formats, typechecks and builds before publishing. The published files list includes dist, src, app.plugin.js and android, with the android build, .cxx and .gradle directories excluded. The repository has an example/ directory with a full bare React Native app, including android/ and ios/ folders, an app.json, metro.config.js and babel.config.js, and there is a docs/ folder holding the logo. The example is the fastest way to see the intended setup if you are not using Expo.

Support policy, releases and licence

This library follows the React Native releases support policy. The README states that it supports the latest version and the two previous minor series. That is a deliberately narrow policy, and it matters for a library that has to track platform behaviour changes, because a version that is two minors behind React Native is already outside the supported window. The release history is regular. Version 1.8.2 came out on 2026-09-14, 1.8.1 and 1.8.0 both on 2026-02-23, and the last push to the repository was on 2026-09-14, the same day as the 1.8.2 tag. The repository is not archived. The package was also formerly known as react-native-bars, which is worth knowing if you are searching for prior discussions or a migration path from the old name. The licence is MIT, with the LICENSE file at the root of the repository and a licence badge in the README. The author is Mathieu Acthernoene, and the README states that the project has been built and is maintained thanks to the support from Expo, which is the reason the Expo plugin path exists and is well maintained. The repository also carries a CODEOWNERS file, a CONTRIBUTING.md, an .editorconfig and a .prettierignore, which are the markers of a project that expects outside contributions.

Where this library is the wrong answer

There are three situations where reaching for it costs you time. The first is React Native 0.86 and later. The built-in edgeToEdgeEnabled=true Gradle property already does the job, and the library's own README points you there. Installing a theme swapping package on top of a platform that has absorbed the behaviour adds a theme parent to track for no gain. The second is iOS, where nothing needs to happen. Edge-to-edge has been the iOS behaviour for a long time and the README lists iOS under consistency rather than under compatibility. The third is navigation bar appearance. This library handles the layout, but if you need to control the style of the navigation bar, the README pairs it with a different package, @zoontek/react-native-navigation-bar. Expecting one dependency to solve both leads to the wrong install. One more practical constraint applies to the Expo path. A config plugin change requires a new native build, so editing the app config is not enough, you have to rebuild the binary for the theme change to reach the device.

Editorial conclusion

Adopt react-native-edge-to-edge when you are on React Native 0.85 or earlier and need Android 15 edge-to-edge behaviour with Expo or bare React Native. Do not adopt it on React Native 0.86 or later, because the README directs you to the built-in edgeToEdgeEnabled=true Gradle property instead. Before integrating, confirm which parent theme your app currently uses and pick the matching Theme.EdgeToEdge variant, since a mismatched parent is the most likely cause of a build that compiles but lays out incorrectly.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. Releases
5. zoontek/react-native-edge-to-edge on GitHub