npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-edge-to-edge

v1.1.1

Published

Effortlessly enable edge-to-edge display in React Native

Downloads

11,260

Readme

react-native-edge-to-edge

Effortlessly enable edge-to-edge display in React Native, allowing your Android app content to flow seamlessly beneath the system bars.

mit licence npm version npm downloads

Credits

This project has been built and is maintained thanks to the support from Expo.

Support

This library follows the React Native releases support policy. It is supporting the latest version, and the two previous minor series.

Motivations

Android 15

Recently, Google introduced a significant change: apps targeting SDK 35 will have edge-to-edge display enforced by default 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.

Currently, new React Native projects target SDK 34.

Immersive mode

Immersive mode allows you to hide the status and navigation bars, making it ideal for full-screen experiences. Currently, the built-in StatusBar component uses FLAG_FULLSCREEN, a flag that has been deprecated since Android 11.

Consistency

iOS 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.

Installation

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

Expo

Add the library plugin in your app.json config file and create a new build:

{
  "expo": {
+   "plugins": ["react-native-edge-to-edge"]
  }
}

📌 The available plugins options are:

type Options = {
  android?: {
    // use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.DayNight.NoActionBar`
    parentTheme?: "Material2" | "Material3"; // optional, default is `undefined` (`Theme.EdgeToEdge`)
  };
};

[!NOTE] This library is not yet supported in the Expo Go sandbox app.

Bare React Native

Edit your android/app/src/main/res/values/styles.xml file to inherit from one of the provided themes:

<resources>
  <!-- inherit from Theme.EdgeToEdge / Theme.EdgeToEdge.Material2 / Theme.EdgeToEdge.Material3 -->
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+ <style name="AppTheme" parent="Theme.EdgeToEdge">
    <!-- … -->
  </style>
</resources>

Considerations

Third-party libraries

Many libraries expose options that you can set to account for the transparency of status and navigation bars. For example, the useHideAnimation hook in react-native-bootsplash has statusBarTranslucent and navigationBarTranslucent options, the useAnimatedKeyboard in react-native-reanimated has an isStatusBarTranslucentAndroid option, etc.

[!IMPORTANT]
Until third-party libraries officially add support for react-native-edge-to-edge to set these options automatically, you may need to adjust these options to prevent interference with the library.

For library authors, we provide a lightweight package called react-native-is-edge-to-edge (note the -is-!), which checks whether react-native-edge-to-edge is installed, making it easy to update your library accordingly:

import {
  controlEdgeToEdgeValues,
  isEdgeToEdge,
} from "react-native-is-edge-to-edge";

const EDGE_TO_EDGE = isEdgeToEdge();

function MyAwesomeLibraryComponent({
  statusBarTranslucent,
  navigationBarTranslucent,
}) {
  if (__DEV__) {
    // warn the user once about unnecessary defined values
    controlEdgeToEdgeValues({
      statusBarTranslucent,
      navigationBarTranslucent,
    });
  }

  return (
    <MyAwesomeLibraryNativeComponent
      statusBarTranslucent={EDGE_TO_EDGE || statusBarTranslucent}
      navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
      // …
    />
  );
}

If you want to check for the library's presence on the native side to bypass certain parts of your code, consider using this small utility:

object EdgeToEdgeUtil {
  val ENABLED: Boolean
    get() = try {
      // we cannot detect edge-to-edge, but we can detect react-native-edge-to-edge install
      Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
      true
    } catch (exception: ClassNotFoundException) {
      false
    }
}

Keyboard management

Enabling edge-to-edge display disrupts basic Android keyboard management (android:windowSoftInputMode="adjustResize"), requiring an alternative solution. While KeyboardAvoidingView is a viable option, we recommend using react-native-keyboard-controller for its enhanced capabilities.

Safe area management

Effective 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, a well-known and trusted library.

Modal component quirks

Status bar management has never worked effectively with the built-in Modal component (as it creates a Dialog with a Window instance distinct from MainActivity). A statusBarTranslucent prop was introduced, but it is insufficient because there is no equivalent for the navigation bar. Instead, we recommend using the react-navigation modals, which do not suffer from this issue, as they utilize react-native-screens and Fragment behind the scenes.

API

<SystemBars />

A component for managing your app's system bars. This replace StatusBar, expo-status-bar and expo-navigation-bar (that uses a lot of now deprecated APIs).

import { SystemBars } from "react-native-edge-to-edge";

type SystemBarsProps = {
  // Sets the color of the status bar content (navigation bar adjusts itself automatically)
  // "auto" is based on current color scheme (light -> dark content, dark -> light content)
  style?: "auto" | "light" | "dark";
  // Hide system bars (the navigation bar cannot be hidden on iOS)
  hidden?: boolean | { statusBar?: boolean; navigationBar?: boolean };
};

const App = () => (
  <>
    <SystemBars style="light" />
    {/* … */}
  </>
);

SystemBars.pushStackEntry

const entry: SystemBarsEntry = SystemBars.pushStackEntry(
  props /*: SystemBarsProps */,
);

SystemBars.popStackEntry

SystemBars.popStackEntry(entry /*: SystemBarsEntry */);

SystemBars.replaceStackEntry

const entry: SystemBarsEntry = SystemBars.replaceStackEntry(
  entry /*: SystemBarsEntry */,
  props /*: SystemBarsProps */,
);