Make android modal to appear underneath translucent StatusBar (#26706)

Summary:
As described in #26559 , the modal is not appearing underneath translucent StatusBar so you can see previous view underneath the StatusBar instead. As a solution you can now provide prop to set the modal to have translucent StatusBar and therefore the content will appear underneath. I tried to reuse layout flags that are possibly set if you use StatusBar component but sadly values in them do not reflect the props set by StatusBar component.

## Changelog

[Android] [added] - Added statusBarTranslucent prop to Modal component, to indicate if StatusBar should appear translucent.
Pull Request resolved: #26706

Test Plan:
### With StatusBar translucent

![image](https://user-images.githubusercontent.com/3984319/66131336-8bfdf200-e5f3-11e9-940e-c6bb3f67ea6f.png)

``` <Modal statusBarTranslucent>```
### Without

![image](https://user-images.githubusercontent.com/3984319/66131403-a768fd00-e5f3-11e9-9814-ff7592b4ceac.png)

``` <Modal>```

Differential Revision: D17872874

Pulled By: mdvacca

fbshipit-source-id: 8c4b48a75cddf86c4429b62d0c63313e7a2dd1b8

Libraries/Modal/Modal.js

@@ -68,10 +68,20 @@ export type Props = $ReadOnly<{|
    */
   transparent?: ?boolean,
 
+  /**
+   * The `statusBarTranslucent` prop determines whether your modal should go under
+   * the system statusbar.
+   *
+   * See https://facebook.github.io/react-native/docs/modal.html#transparent
+   */
+  statusBarTranslucent?: ?boolean,
+
   /**
    * The `hardwareAccelerated` prop controls whether to force hardware
    * acceleration for the underlying window.
    *
+   * This prop works inly on Android.
+   *
    * See https://facebook.github.io/react-native/docs/modal.html#hardwareaccelerated
    */
   hardwareAccelerated?: ?boolean,
@@ -234,6 +244,7 @@ class Modal extends React.Component<Props> {
         hardwareAccelerated={this.props.hardwareAccelerated}
         onRequestClose={this.props.onRequestClose}
         onShow={this.props.onShow}
+        statusBarTranslucent={this.props.statusBarTranslucent}
         identifier={this._identifier}
         style={styles.modal}
         onStartShouldSetResponder={this._shouldSetResponder}

Libraries/Modal/RCTModalHostViewNativeComponent.js

@@ -52,6 +52,14 @@ type NativeProps = $ReadOnly<{|
    */
   transparent?: WithDefault<boolean, false>,
 
+  /**
+   * The `statusBarTranslucent` prop determines whether your modal should go under
+   * the system statusbar.
+   *
+   * See https://facebook.github.io/react-native/docs/modal.html#statusBarTranslucent
+   */
+  statusBarTranslucent?: WithDefault<boolean, false>,
+
   /**
    * The `hardwareAccelerated` prop controls whether to force hardware
    * acceleration for the underlying window.

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/ModalHostViewManagerDelegate.java

@@ -32,6 +32,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "transparent":
         mViewManager.setTransparent(view, value == null ? false : (boolean) value);
         break;
+      case "statusBarTranslucent":
+        mViewManager.setStatusBarTranslucent(view, value == null ? false : (boolean) value);
+        break;
       case "hardwareAccelerated":
         mViewManager.setHardwareAccelerated(view, value == null ? false : (boolean) value);
         break;

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/ModalHostViewManagerInterface.java

@@ -17,6 +17,7 @@ public interface ModalHostViewManagerInterface<T extends View> {
   void setAnimationType(T view, @Nullable String value);
   void setPresentationStyle(T view, @Nullable String value);
   void setTransparent(T view, boolean value);
+  void setStatusBarTranslucent(T view, boolean value);
   void setHardwareAccelerated(T view, boolean value);
   void setAnimated(T view, boolean value);
   void setSupportedOrientations(T view, @Nullable ReadableArray value);

ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java

@@ -78,6 +78,13 @@ public void setTransparent(ReactModalHostView view, boolean transparent) {
     view.setTransparent(transparent);
   }
 
+  @Override
+  @ReactProp(name = "statusBarTranslucent")
+  public void setStatusBarTranslucent(ReactModalHostView view, boolean statusBarTranslucent) {
+    view.setStatusBarTranslucent(statusBarTranslucent);
+  }
+
+
   @Override
   @ReactProp(name = "hardwareAccelerated")
   public void setHardwareAccelerated(ReactModalHostView view, boolean hardwareAccelerated) {

ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java

@@ -66,6 +66,7 @@ public interface OnRequestCloseListener {
   private DialogRootViewGroup mHostView;
   private @Nullable Dialog mDialog;
   private boolean mTransparent;
+  private boolean mStatusBarTranslucent;
   private String mAnimationType;
   private boolean mHardwareAccelerated;
   // Set this flag to true if changing a particular property on the view requires a new Dialog to
@@ -167,6 +168,11 @@ protected void setTransparent(boolean transparent) {
     mTransparent = transparent;
   }
 
+  protected void setStatusBarTranslucent(boolean statusBarTranslucent) {
+    mStatusBarTranslucent = statusBarTranslucent;
+    mPropertyRequiresNewDialog = true;
+  }
+
   protected void setAnimationType(String animationType) {
     mAnimationType = animationType;
     mPropertyRequiresNewDialog = true;
@@ -306,7 +312,11 @@ public void updateState(StateWrapper stateWrapper, int width, int height) {
   private View getContentView() {
     FrameLayout frameLayout = new FrameLayout(getContext());
     frameLayout.addView(mHostView);
-    frameLayout.setFitsSystemWindows(true);
+    if (mStatusBarTranslucent) {
+      frameLayout.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
+    } else {
+      frameLayout.setFitsSystemWindows(true);
+    }
     return frameLayout;
   }