React Native StatusBar long-lost twin: A component to control your Android app's navigation bar.

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

$ npm i -S @zoontek/react-native-navigation-bar
# --- or ---
$ yarn add @zoontek/react-native-navigation-bar

edgeToEdgeEnabled=true # 👈 set this to true

Compared to react-native-edge-to-edge, this library adopts React Native StatusBar API and its defaults: the navigation bar is transparent. To enforce a contrasting (semi-opaque) button navigation bar, set the enforceNavigationBarContrast option to true.

Add both enforceNavigationBarContrast attributes to your android/app/src/main/res/values/styles.xml file:

<!-- add xmlns:tools on the resources tag if it isn't already there -->
<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- … -->
    <!-- keep both in sync: false for a transparent navigation bar, true for a contrasting one -->
    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">false</item>
    <item name="enforceNavigationBarContrast">false</item>
  </style>
</resources>

Add the library plugin to your app configuration file and create a new build 👷:

import type { ConfigContext, ExpoConfig } from "expo/config";
import navigationBar from "@zoontek/react-native-navigation-bar/expo"; // use `require` in app.config.js

export default ({ config }: ConfigContext): ExpoConfig => ({
  plugins: [
    navigationBar({
      android: { enforceNavigationBarContrast: true },
    }),
  ],
});

{
  "expo": {
    "plugins": [
      [
        "@zoontek/react-native-navigation-bar",
        { "android": { "enforceNavigationBarContrast": true } }
      ]
    ]
  }
}

A React component to control the Android button navigation bar (with back / home / recents buttons).

import { NavigationBar } from "@zoontek/react-native-navigation-bar";

type NavigationBarStyle = "default" | "light-content" | "dark-content";

type NavigationBarProps = {
  barStyle?: NavigationBarStyle; // set the color of the navigation bar content
  hidden?: boolean; // hide the navigation bar
};

const App = () => (
  <>
    <NavigationBar barStyle="light-content" />
    {/* … */}
  </>
);

Push a NavigationBar entry onto the stack. The return value should be passed to popStackEntry when complete.

const entry: NavigationBarProps = NavigationBar.pushStackEntry(
  props /*: NavigationBarProps */,
);

Remove an existing NavigationBar stack entry from the stack.

NavigationBar.popStackEntry(entry /*: NavigationBarProps */);

Replace an existing NavigationBar stack entry with new props.

const entry: NavigationBarProps = NavigationBar.replaceStackEntry(
  entry /*: NavigationBarProps */,
  props /*: NavigationBarProps */,
);

Set the navigation bar style.

NavigationBar.setBarStyle(style /*: NavigationBarStyle */);

Show or hide the navigation bar.

NavigationBar.setHidden(style /*: boolean */);

There's currently an open issue with the Android emulator images regarding the navigation bar style when it is fully transparent. This issue does not occur on physical devices.