Hide Android Navigation Bar in React Native

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.

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();

Building off of Martin Konicek's answer:

I went ahead and wrote the Package and Module you need here: https://gist.github.com/dhrrgn/16a8dfa7581a682627c6

You need to add it in your MainActivity.java file in the getPackages method, and send the package the ReactActivity object like this: new NavigationBarAndroidPackage(this)

Note: The code is untested, but it should work for you (you need to change the package on the first line). I just used the example code provided in the link you sent as an example. Modify to your needs.