Home
Categories
Navigation & Menu
Control Android Nav Bar in React Native

Control Android Nav Bar in React Native

zoontek First listed on September 11, 2025
Live Demo Download Source Code

Description:

@zoontek/react-native-navigation-bar is a React Native component that gives you control over the appearance of the Android navigation bar. It acts as a counterpart to the built-in StatusBar component, allowing you to manage the bar at the bottom of the screen containing the back, home, and recents buttons.

With this component, you can create a more integrated and immersive user experience in your Android applications. It allows you to dynamically change the navigation bar’s style, such as the color of the buttons, or hide it completely. This can be useful for apps that benefit from a full-screen display, like media players, games, or image galleries.

Features

  • 📱 Style Control. You can set the navigation bar content to light-content (light icons for dark backgrounds) or dark-content (dark icons for light backgrounds).
  • 🙈 Visibility Toggling. You have the ability to show or hide the navigation bar programmatically.
  • 🔩 Imperative API. The library offers methods like setStyle and setHidden to change the navigation bar’s appearance without re-rendering a component.
  • 🛠️ Stack-Based Management. For complex scenarios, you can use pushStackEntry, popStackEntry, and replaceStackEntry to manage navigation bar styles in a stack.
  • 🎨 Contrast Enforcement. An option is available to enforce a semi-opaque background on the navigation bar for better contrast and visibility.

Use Cases

  • Immersive Media Viewing. Hide the navigation bar when a user is watching videos or viewing photos to provide an uninterrupted, full-screen experience.
  • Thematic Consistency. Match the navigation bar’s button colors to your app’s current theme (dark or light mode) for a cohesive design.
  • Gaming Applications. Conceal the navigation bar during gameplay to maximize screen space and prevent accidental button presses.
  • Custom In-App Browsers. Adjust the navigation bar style to match the web content being displayed, creating a more seamless browsing experience.

How to Use It

1. Add the library to your project using npm or yarn.

npm install @zoontek/react-native-navigation-bar

or

yarn add @zoontek/react-native-navigation-bar

2. This library requires React Native version 0.81+ or Expo SDK 54+. You must also enable edge-to-edge mode for your application. For standard React Native projects, open your gradle.properties file and set edgeToEdgeEnabled to true. This step is not necessary for Expo projects, as it is enabled by default.

edgeToEdgeEnabled=true

3. Import the NavigationBar component and include it in your app’s render tree. You can set the barStyle to either light-content or dark-content.

import React from 'react';
import { View, Text } from 'react-native';
import { NavigationBar } from '@zoontek/react-native-navigation-bar';
const App = () => (
  <View style={{ flex: 1, backgroundColor: '#000' }}>
    <NavigationBar barStyle="light-content" />
    <Text style={{ color: '#fff' }}>My App Content</Text>
  </View>
);
export default App;

4. By default, the navigation bar is transparent. If you need a contrasting, semi-opaque background for the button navigation bar, you can enable the enforceNavigationBarContrast option.

For React Native projects, modify your android/app/src/main/res/values/styles.xml file:

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- ... -->
    <item name="enforceNavigationBarContrast">true</item>
  </style>
</resources>

For Expo projects, add the library’s plugin to your app.json configuration:

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

After configuring, you will need to create a new build of your app.

5. You can also control the navigation bar from anywhere in your code using static methods.

To change the style:

import { NavigationBar } from '@zoontek/react-native-navigation-bar';
NavigationBar.setStyle('dark-content');

To hide or show the bar:

import { NavigationBar } from '@zoontek/react-native-navigation-bar';
// To hide the navigation bar
NavigationBar.setHidden(true);
// To show it again
NavigationBar.setHidden(false);

Related Resources

  • react-native-edge-to-edge. A library that helps enable edge-to-edge display in React Native apps, which is a prerequisite for this navigation bar component.
  • React Native StatusBar. The official component for controlling the app’s status bar, whose API design inspired this library.

FAQs

Q: Why does the navigation bar style flicker when my app starts?
A: The style is applied at runtime, which can cause a brief flash of the default style. You can prevent this by implementing a splash screen with a library like react-native-bootsplash to cover the initial load.

Q: Does this library work on iOS?
A: No, this component is designed specifically for Android and has no effect on other platforms or when gesture navigation is enabled.

Q: What should I do if the navigation bar style behaves unexpectedly on an emulator?
A: There is a known issue with the Android 15 emulator image that affects the navigation bar style when it’s fully transparent. This problem does not happen on physical devices.

Add Comment