Hide Android Navigation Bar in React Native

user_271976 0
Viewed 30887

How can I hide the Android Navigation Bar in React Native?

I'm referring to the bar at the bottom of the screen that has the software back button and home button, not the component at the top of the page that comes with the Navigator Component.

Android Navigation Bar

This page on android.com explains how to do it for native developers. Can someone explain how to accomplish this via React Native apps? Thanks.

navigationbar react-native android
9 Answers

If you're looking to achieve this permanently you'll have to hide the Navbar when the app is created and when it comes back into focus.

To do so, add this in your MainActivity.java:

...
import android.os.Bundle;
import android.view.View;

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideNavigationBar();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }

    private void hideNavigationBar() {
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
    }
}

You may want to make it "immersive" so that the user can still access the navigation bar by pulling from the bottom of the screen. To do so, add the View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag:

...
import android.os.Bundle;
import android.view.View;

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideNavigationBar();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }

    private void hideNavigationBar() {
        getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);

    }
}

You can find more options on the android documentation.

user_57090150

To hide the Android Navigation bar you can do that using react-native-navigation-bar-color it allows you to show or hide the navigation bar. You can see more in the documentation [here][1]. Note that it will not work on Expo as it requires you to link native code.

Installation is fairly straight forward:

npm install react-native-navigation-bar-color --save

Then you need to link the package: 

react-native link react-native-navigation-bar-color

Once you have done that you can use it in the following way:

import {
  HideNavigationBar,
  ShowNavigationBar,
} from 'react-native-navigation-bar-color';

Then when you want to show the navigation bar you just use 

ShowNavigationBar();

And to hide it you can use:

HideNavigationBar();
user_55081750
user_109925170

Im in Android 9 and i did test the 

import {HideNavigationBar} from 'react-native-navigation-bar-color';

but when Make Alt tabbing to another app, and returns then the nav bar appears again.

The best solution for me until moment is as said

Louis Zawadzki

Copying that on my mainactivity.java works fine, and always hide after changes.

user_117006600

I was stuck at the exact same point today. I found a medium article that got the job done. This question seems to be quite old however, some new readers might find this helpful.

https://medium.com/@mykl.ashton/how-to-hide-the-android-pie-navigation-bar-in-react-native-895e34c9e41

In this article, the writer has written native java methods to control the navigation bar and then used react native bridge to access the methods from react side.

It's a long article but has worked fantastically for me! hope this helps!

user_93049760

for expo builds:

  expo install expo-navigation-bar

prevents content from jumping up with the navbar

  NavigationBar.setPositionAsync("absolute");

hides the navbar

  NavigationBar.setVisibilityAsync("hidden");

transparent background

  NavigationBar.setBackgroundColorAsync("#ffffff00");

user can still swipe to show buttons

  NavigationBar.setBehaviorAsync("inset-swipe");

I tried to wrap my screen in <TouchableWithoutFeedback > to be able to use onPress prop with NavigationBar.setVisibilityAsync("hidden"), but even without onPress the bottom navbar shows only for a brief second on swipe

user_55281600
Related