edge-to-edge-system-bars.md

expo-status-bar / expo-navigation-bar and edge-to-edge

Using expo-status-bar or expo-navigation-bar in apps with edge-to-edge layout enabled may cause unexpected behavior, as they currently use deprecated APIs. This could result in the feature not working entirely.

Instead, use the SystemBars component from react-native-edge-to-edge:

package.json

{
  "dependencies": {
-   "expo-navigation-bar": "<version>",
-   "expo-status-bar": "<version>",
+   "react-native-edge-to-edge": "<version>"
  }
}

in your app

import { useEffect } from "react";
- import * as NavigationBar from "expo-navigation-bar";
- import { StatusBar } from "expo-status-bar";
+ import { SystemBars } from "react-native-edge-to-edge";

export default function App() {
- useEffect(() => {
-   NavigationBar.setButtonStyleAsync("dark");
- }, []);

  return (
    <>
-     <StatusBar style="light" />
+     <SystemBars style={{ statusBar: "light", navigationBar: "dark" }} />
    </>
  );
}