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.
To hide the navigation navbar with React Native, we set the screenOptions. headerShown option to false .
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With