[Android] Support for transparent statusbar with current screen rendered behind it (#2274)

* add support to tell screen to place its self underneath the statusbar for android.

* added property to documentation.

android/app/src/main/java/com/reactnativenavigation/controllers/Modal.java

@@ -120,6 +120,7 @@ class Modal extends Dialog implements DialogInterface.OnDismissListener, ScreenS
         setAnimation(screenParams);
         setStatusBarStyle(screenParams.styleParams);
         setNavigationBarStyle(screenParams.styleParams);
+        setDrawUnderStatusBar(screenParams.styleParams);
     }
 
     private void setStatusBarStyle(StyleParams styleParams) {
@@ -128,6 +129,12 @@ class Modal extends Dialog implements DialogInterface.OnDismissListener, ScreenS
         StatusBar.setTextColorScheme(window.getDecorView(), styleParams.statusBarTextColorScheme);
     }
 
+    private void setDrawUnderStatusBar(StyleParams styleParams) {
+        Window window = getWindow();
+        if (window == null) return;
+        StatusBar.displayOverScreen(window.getDecorView(), styleParams.drawUnderStatusBar);
+    }
+
     private void setNavigationBarStyle(StyleParams styleParams) {
         NavigationBar.setColor(getWindow(), styleParams.navigationBarColor);
     }

android/app/src/main/java/com/reactnativenavigation/params/StyleParams.java

@@ -89,6 +89,7 @@ public class StyleParams {
     public StatusBarTextColorScheme statusBarTextColorScheme;
     public Color statusBarColor;
     public boolean statusBarHidden;
+    public boolean drawUnderStatusBar;
     public Color contextualMenuStatusBarColor;
     public Color contextualMenuButtonsColor;
     public Color contextualMenuBackgroundColor;

android/app/src/main/java/com/reactnativenavigation/params/parsers/StyleParamsParser.java

@@ -32,6 +32,7 @@ public class StyleParamsParser {
         result.statusBarColor = getColor("statusBarColor", getDefaultStatusBarColor());
         result.statusBarHidden = getBoolean("statusBarHidden", getDefaultStatusHidden());
         result.statusBarTextColorScheme = StatusBarTextColorScheme.fromString(params.getString("statusBarTextColorScheme"), getDefaultStatusBarTextColorScheme());
+        result.drawUnderStatusBar = params.getBoolean("drawUnderStatusBar", getDefaultDrawUnderStatusBar());
         result.contextualMenuStatusBarColor = getColor("contextualMenuStatusBarColor", getDefaultContextualMenuStatusBarColor());
         result.contextualMenuButtonsColor = getColor("contextualMenuButtonsColor", getDefaultContextualMenuButtonsColor());
         result.contextualMenuBackgroundColor = getColor("contextualMenuBackgroundColor", getDefaultContextualMenuBackgroundColor());
@@ -281,6 +282,10 @@ public class StyleParamsParser {
         return AppStyle.appStyle != null && AppStyle.appStyle.statusBarHidden;
     }
 
+    private boolean getDefaultDrawUnderStatusBar() {
+        return AppStyle.appStyle != null && AppStyle.appStyle.drawUnderStatusBar;
+    }
+
     private StyleParams.Font getDefaultBottomTabsFontFamily() {
         return AppStyle.appStyle == null ? new StyleParams.Font() : AppStyle.appStyle.bottomTabFontFamily;
     }

android/app/src/main/java/com/reactnativenavigation/screens/Screen.java

@@ -62,6 +62,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         createViews();
         EventBus.instance.register(this);
         sharedElements = new SharedElements();
+        setDrawUnderStatusBar(styleParams.drawUnderStatusBar);
     }
 
     public void registerSharedElement(SharedElementTransition toView, String key) {
@@ -106,6 +107,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         setStatusBarHidden(styleParams.statusBarHidden);
         setStatusBarTextColorScheme(styleParams.statusBarTextColorScheme);
         setNavigationBarColor(styleParams.navigationBarColor);
+        setDrawUnderStatusBar(styleParams.drawUnderStatusBar);
         topBar.setStyle(styleParams);
         if (styleParams.screenBackgroundColor.hasColor()) {
             setBackgroundColor(styleParams.screenBackgroundColor.getColor());
@@ -174,6 +176,10 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         StatusBar.setHidden(((NavigationActivity) activity).getScreenWindow(), statusBarHidden);
     }
 
+    private void setDrawUnderStatusBar(boolean drawUnderStatusBar) {
+        StatusBar.displayOverScreen(this, drawUnderStatusBar);
+    }
+
     private void setStatusBarTextColorScheme(StatusBarTextColorScheme textColorScheme) {
         StatusBar.setTextColorScheme(this, textColorScheme);
     }

android/app/src/main/java/com/reactnativenavigation/utils/StatusBar.java

@@ -30,6 +30,23 @@ public class StatusBar {
         }
     }
 
+    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
+    public static void displayOverScreen(View view, boolean shouldDisplay) {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) return;
+
+        if(shouldDisplay) {
+            int flags = view.getSystemUiVisibility();
+            flags |= View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
+            flags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
+            view.setSystemUiVisibility(flags);
+        } else {
+            int flags = view.getSystemUiVisibility();
+            flags &= ~View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
+            flags &= ~View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
+            view.setSystemUiVisibility(flags);
+        }
+    }
+
     @TargetApi(Build.VERSION_CODES.M)
     public static void setTextColorScheme(View view, StatusBarTextColorScheme textColorScheme) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) return;

docs/styling-the-navigator.md

@@ -101,6 +101,7 @@ this.props.navigator.setStyle({
   navBarButtonFontFamily: 'sans-serif-thin', // Change the font family of textual buttons
   topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above
   statusBarColor: '#000000', // change the color of the status bar.
+  drawUnderStatusBar: false, // default: false, will draw the screen underneath the statusbar. Useful togheter with statusBarColor: transparent
   collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.
   collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image.
   collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color.

src/deprecated/platformSpecificDeprecated.android.js

@@ -149,6 +149,7 @@ function convertStyleParams(originalStyleObject) {
     statusBarColor: processColor(originalStyleObject.statusBarColor),
     statusBarHidden: originalStyleObject.statusBarHidden,
     statusBarTextColorScheme: originalStyleObject.statusBarTextColorScheme,
+    drawUnderStatusBar: originalStyleObject.drawUnderStatusBar || false,
     topBarReactView: originalStyleObject.navBarCustomView,
     topBarReactViewAlignment: originalStyleObject.navBarComponentAlignment,
     topBarReactViewInitialProps: originalStyleObject.navBarCustomViewInitialProps,