Is this library still useful in React Native 0.81+?

[SimpleCreations]

I've noticed this commit in 0.81 changelog, by @zoontek, the author of the library, suggesting that edge-to-edge support on Android is now part of core.

But unfortunately neither the commit/PR description nor react-native-edge-to-edge docs explain whether this change in React Native makes this library obsolete or not.

[zoontek]

@SimpleCreations Hi. react-native-edge-to-edge will indeed be sunsetted as it's not needed for React Native 0.81+ when edgeToEdgeEnabled is set to true.

For the moment, the edgeToEdgeEnabled gradle property isn't enough to match this package features, as there's not way to update the navigation bar style in React Native alone (fully transparent, change the bar style, hide it).

In Expo 54, this task as been delegated to expo-navigation-bar. It's currently in beta and should be stable next week. On my side, I will publish a small package to expose SystemBars alone and write a quick migration guide (aka: just replace the imports). It should be ready next week 🙂

[fabiendem]

👀 had a similar question at facebook/react-native#52088 (comment)

So if I understand correctly:

Included in RN 0.81:

• The Android source code equivalent to:
  https://github.com/zoontek/react-native-edge-to-edge/blob/main/android/src/main/java/com/zoontek/rnedgetoedge/EdgeToEdgeModuleImpl.kt
• The JS part to interact with it
• The is-edge-to-edge logic: https://github.com/zoontek/react-native-edge-to-edge/tree/main/react-native-is-edge-to-edge/src

Not included in RN 0.81:

• The stylings from the res: https://github.com/zoontek/react-native-edge-to-edge/tree/main/android/src/main/res
• The SystemBars https://github.com/zoontek/react-native-edge-to-edge/blob/main/src/SystemBars.ts

I understand you will work on the docs 👍

[zoontek]

The Android source code equivalent to

The applyEdgeToEdge, setStatusBarStyle and setStatusBarHidden logic. Not the setNavigationBarStyle and setNavigationBarHidden ones, as there's no built-in NavigationBar component in React Native core.

The JS part to interact with it

StatusBar component has been updated, yes.

The is-edge-to-edge logic

It's not included in React Native core directly: the package has been bumped to detect either react-native-edge-to-edge or edgeToEdgeEnabled, to keep the transition seamless.

The stylings from the res

This is not needed with edgeToEdgeEnabled anymore.

The SystemBars

Yes. And this is the only thing that will need to be replaced. Probably with the same API, just in another package.

[fabiendem]

Ok thanks, more nuanced than what I thought 😄
We'll have to try and see 👍

Thanks for everything 🙏

[zoontek]

@fabiendem Here is is: https://github.com/zoontek/react-native-navigation-bar

With RN 0.81+ and edgeToEdgeEnabled=true, the built-in StatusBar is safe to use again, so there's no need to duplicate the feature in a SystemBars component.

• Don't forget to restore the AppTheme parent in styles.xml when removing react-native-edge-to-edge.
• If you want to add support for auto on both StatusBar and NavigationBar, use the built-in useColorScheme.

[fabiendem]

Merci!

[RafaelCENG]

Will this inconsistent status bar issue also be fixed? As you can see in the video, when I navigate to another screen for the first time, the status bar collides with the Expo Router header.

Screen.Recording.2025-09-15.at.11.04.43.AM.mov

[unendingblue]

@zoontek Could it be that Expo's edge-to-edge implementation only works for Android 15+ in the old arch? I'm having a weird behavior where my production builds with Expo's implementation are not edge-to-edge on Android lower than 15, while this library still correctly applies edge-to-edge. More specifically:

react-native-edge-to-edge
Development build: works
Production build: works

Expo's android.edgeToEdgeEnabled
Development build: works
Production build: doesn't work

I wonder if the dev menu in Expo is the reason why edge to edge is applied correctly. Would love to have your insights since I saw you were the one who did the RN implementation. 🙏

[unendingblue]

styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="android:statusBarColor">#89B5FA</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
  </style>
</resources>

app.config.js (trimmed down)

{
  newArchEnabled: false,
  userInterfaceStyle: 'dark',
  orientation: 'portrait',

  android: {
    adaptiveIcon: {
      backgroundColor: '...',
      foregroundImage: '...',
      monochromeImage: '...',
    },

    edgeToEdgeEnabled: true,
  },

  plugins: [
    [
      'expo-build-properties',
      {
        android: {
          enableBundleCompression: false,
          enableMinifyInReleaseBuilds: true,
          enableShrinkResourcesInReleaseBuilds: true,
        },
      },
    ],
    [
      'expo-splash-screen',
      {
        image: './assets/splash.png', //this is an empty .png
        backgroundColor: '#89B5FA',
      },
    ],
    'expo-audio',
    'expo-font',
    'expo-notifications',

    '@react-native-firebase/app',
    '@react-native-firebase/auth',
    '@react-native-google-signin/google-signin',

    [
      '@sentry/react-native/expo',
      { ... },
    ],
  ],
}

[zoontek]

Remove this:

<item name="android:statusBarColor">#89B5FA</item>

[unendingblue]

@zoontek Removing <item name="android:statusBarColor">#89B5FA</item> resulted in the statusbar being white - edge to edge is still not applied though.

[zoontek]

Then open an issue on the Expo repository (this doesn't happen with bare React Native)

[unendingblue]

Understood, thank you for checking it out!