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.