Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Android Navigation Bar in React Native

Tags:

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.

like image 990
Axeva Avatar asked Mar 16 '16 20:03

Axeva


People also ask

How do I hide the navigation bar in react native?

To hide the navigation navbar with React Native, we set the screenOptions. headerShown option to false .

How do I hide the top bar in react native?

The hidden property can be used to hide the status bar. In our example it is set to false. This is default value. The barStyle can have three values – dark-content, light-content and default.

How do I hide navigation bar?

Touch “Settings” -> “Display” -> “Navigation bar” -> “Buttons” -> “Button layout”. Choose the pattern in “Hide navigation bar” -> When the app opens, the navigation bar will be automatically hidden and you can swipe up from the bottom corner of the screen to show it.


1 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.

like image 149
Louis Zawadzki Avatar answered Sep 22 '22 08:09

Louis Zawadzki