@zoontek/react-native-navigation-bar

June 18, 2026 · View on GitHub

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

Credits

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

Installation

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

Important

This library requires React Native 0.86+ with edge-to-edge enabled. To turn it on, set edgeToEdgeEnabled to true in your project's gradle.properties file.

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.

React Native

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>

Expo

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

Dynamic configuration (app.config.js, app.config.ts)

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 },
    }),
  ],
});

Static configuration (app.json)

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

API

NavigationBar

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

Note

This component has no effect on other platforms or when gesture navigation is used.

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" />
    {/* … */}
  </>
);

NavigationBar.pushStackEntry

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

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

NavigationBar.popStackEntry

Remove an existing NavigationBar stack entry from the stack.

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

NavigationBar.replaceStackEntry

Replace an existing NavigationBar stack entry with new props.

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

NavigationBar.setBarStyle

Set the navigation bar style.

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

NavigationBar.setHidden

Show or hide the navigation bar.

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

Troubleshooting 🤔

The bar style behavior is erratic

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.