Allow hiding the Android navigation bar (#6033)

This PR introduces an options to control the NavigationBar's visibility on Android. ```js navigationBar: { visible: false } ``` Co-authored-by: Guy Carmeli <guyc@wix.com>
wix · Apr 13, 2020 · 7f6353b · 7f6353b
1 parent 10ef807
commit 7f6353b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationBarOptions.java b/lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationBarOptions.java
@@ -1,7 +1,10 @@
 package com.reactnativenavigation.parse;
 
+import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Colour;
+import com.reactnativenavigation.parse.params.NullBool;
 import com.reactnativenavigation.parse.params.NullColor;
+import com.reactnativenavigation.parse.parsers.BoolParser;
 import com.reactnativenavigation.parse.parsers.ColorParser;
 
 import org.json.JSONObject;
@@ -12,17 +15,21 @@ public static NavigationBarOptions parse(JSONObject json) {
         if (json == null) return result;
 
         result.backgroundColor = ColorParser.parse(json, "backgroundColor");
+        result.isVisible = BoolParser.parse(json, "visible");
 
         return result;
     }
 
     public Colour backgroundColor = new NullColor();
+    public Bool isVisible = new NullBool();
 
     public void mergeWith(NavigationBarOptions other) {
         if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;
+        if (other.isVisible.hasValue()) isVisible = other.isVisible;
     }
 
     public void mergeWithDefault(NavigationBarOptions defaultOptions) {
         if (!backgroundColor.hasValue()) backgroundColor = defaultOptions.backgroundColor;
+        if (!isVisible.hasValue()) isVisible = defaultOptions.isVisible;
     }
 }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/presentation/Presenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/presentation/Presenter.java
@@ -23,9 +23,7 @@
 
 import static android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
 
-@SuppressWarnings("FieldCanBeLocal")
 public class Presenter {
-
     private Activity activity;
     private Options defaultOptions;
 
@@ -194,13 +192,32 @@ private void mergeStatusBarVisible(View view, Bool visible, Bool drawBehind) {
     }
 
     private void applyNavigationBarOptions(NavigationBarOptions options) {
+        applyNavigationBarVisibility(options);
         setNavigationBarBackgroundColor(options);
     }
 
     private void mergeNavigationBarOptions(NavigationBarOptions options) {
+        mergeNavigationBarVisibility(options);
         setNavigationBarBackgroundColor(options);
     }
 
+    private void mergeNavigationBarVisibility(NavigationBarOptions options) {
+        if (options.isVisible.hasValue()) applyNavigationBarOptions(options);
+    }
+
+    private void applyNavigationBarVisibility(NavigationBarOptions options) {
+        View decorView = activity.getWindow().getDecorView();
+        int flags = decorView.getSystemUiVisibility();
+        boolean defaultVisibility = (flags & View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION) == 0;
+        int hideNavigationBarFlags = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
+        if (options.isVisible.get(defaultVisibility)) {
+            flags &= ~hideNavigationBarFlags;
+        } else {
+            flags |= hideNavigationBarFlags;
+        }
+        decorView.setSystemUiVisibility(flags);
+    }
+
     private void setNavigationBarBackgroundColor(NavigationBarOptions navigationBar) {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && navigationBar.backgroundColor.canApplyValue()) {
             int defaultColor = activity.getWindow().getNavigationBarColor();

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ChildController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ChildController.java
@@ -64,8 +64,7 @@ public void onViewBroughtToFront() {
     @Override
     public void applyOptions(Options options) {
         super.applyOptions(options);
-        Options resolvedOptions = resolveCurrentOptions();
-        presenter.applyOptions(this, resolvedOptions);
+        presenter.applyOptions(this, resolveCurrentOptions());
     }
 
     @Override
@@ -85,7 +84,7 @@ public void destroy() {
         childRegistry.onChildDestroyed(this);
     }
 
-    protected boolean isRoot() {
+    boolean isRoot() {
         return getParentController() == null &&
                 !(this instanceof Navigator) &&
                 getView().getParent() != null;

diff --git a/playground/src/screens/OptionsScreen.js b/playground/src/screens/OptionsScreen.js
@@ -1,5 +1,6 @@
 const React = require('react');
 const {Component} = require('react');
+import {Platform} from 'react-native';
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('../services/Navigation');
@@ -29,6 +30,10 @@ class Options extends Component {
     };
   }
 
+  state = {
+    isAndroidNavigationBarVisible: true
+  };
+
   render() {
     return (
       <Root componentId={this.props.componentId}>
@@ -41,6 +46,7 @@ class Options extends Component {
         <Button label='Show Yellow Box' testID={SHOW_YELLOW_BOX_BTN} onPress={() => console.warn('Yellow Box')} />
         <Button label='StatusBar' onPress={this.statusBarScreen} />
         <Button label='Buttons Screen' testID={GOTO_BUTTONS_SCREEN} onPress={this.pushButtonsScreen} />
+        <Button label='Toggle Navigation bar visibility' platform='android' onPress={this.toggleAndroidNavigationBar}/>
       </Root>
     );
   }
@@ -65,6 +71,15 @@ class Options extends Component {
     }
   });
 
+  toggleAndroidNavigationBar = () => {
+    this.setState({isAndroidNavigationBarVisible: !this.state.isAndroidNavigationBarVisible});
+    Navigation.mergeOptions(this, {
+      navigationBar: {
+        visible: !this.state.isAndroidNavigationBarVisible
+      }
+    })
+  };
+
   push = () => Navigation.push(this, {
     component: {
       name: Screens.Pushed,