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.
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.
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. 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 (only for react-native <= 0.59.0):
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.
getWindow() command is only available on the Activity, and as far as I know there is no way to access the ReactActivity object through the ReactApplicationContext. I am fairly new to the Android world, so my knowledge of the Activity lifecycle is limited. What is the correct approach here? If ReactApplicationContext had a method like getReactApplicationActivity(), that would solve the issue. We actually need the ReactActivity in several of our modules in our app, so any help here would be appreciated.ReactActivity object, as it is needed to get access to the Application, Window, etc. (sorry for the double comment...stupid length restrictions :P)
I've created a package with navigation bar hide/show, color change and more.
react-native-system-navigation-bar
Install
yarn add react-native-system-navigation-bar
or
npm install react-native-system-navigation-bar
Links
https://www.npmjs.com/package/react-native-system-navigation-bar
https://github.com/kadiraydinli/react-native-system-navigation-bar
Use this: https://github.com/Anthonyzou/react-native-full-screen
usage:
import FullScreen from 'react-native-full-screen'
FullScreen.onFullScreen()
FullScreen.offFullScreen()
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
There is no built-in API to do this from JavaScript.
The good news is in React Native you can expose any native functionality to JavaScript, by writing a native module. See documentation.
This way you can provide a JS function like NavigationBarAndroid.hide() and make it call the API you linked to.
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.
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.
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!
