Modal Status Bar Translucent

Summary:
Currently the Modal component on Android is rendered below the Status Bar, which changes it's color to grey, and in the UIExplorer example the backdrop is just formatted to look the same color. In some scenarios users may want to preserve the color of their status bar and make it look as though the modal is appearing on top. This PR allows for that.

This GIF shows current behavior and new behavior with the translucentStatusBar prop set to true.

![](http://g.recordit.co/BSX5g9obRC.gif)

I've updated the UIExplorer app to demonstrate and the docs as shown below

![image](https://cloud.githubusercontent.com/assets/4265163/14742854/500e1292-086c-11e6-9275-71808b0cbed7.png)

Thanks!
Closes https://github.com/facebook/react-native/pull/7157

Differential Revision: D3264497

Pulled By: dmmiller

fb-gh-sync-id: 61346d99414d331d3420f44a4c5f6341b0973be6
fbshipit-source-id: 61346d99414d331d3420f44a4c5f6341b0973be6

Libraries/Modal/Modal.js

@@ -15,6 +15,7 @@ const Platform = require('Platform');
 const PropTypes = require('ReactPropTypes');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
+const UIManager = require('UIManager');
 const View = require('View');
 const deprecatedPropType = require('deprecatedPropType');
 
@@ -56,8 +57,9 @@ class Modal extends React.Component {
       return null;
     }
 
-    const containerBackgroundColor = {
+    const containerStyles = {
       backgroundColor: this.props.transparent ? 'transparent' : 'white',
+      top: Platform.OS === 'android' && Platform.Version >= 19 ? UIManager.RCTModalHostView.Constants.StatusBarHeight : 0,
     };
 
     let animationType = this.props.animationType;
@@ -78,7 +80,7 @@ class Modal extends React.Component {
         style={styles.modal}
         onStartShouldSetResponder={this._shouldSetResponder}
         >
-        <View style={[styles.container, containerBackgroundColor]}>
+        <View style={[styles.container, containerStyles]}>
           {this.props.children}
         </View>
       </RCTModalHostView>
@@ -102,4 +104,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = Modal;
+module.exports = Modal;

ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java

@@ -108,7 +108,7 @@ public class MainReactPackage implements ReactPackage {
       new ReactDropdownPickerManager(),
       new ReactHorizontalScrollViewManager(),
       new ReactImageManager(),
-      new ReactModalHostManager(),
+      new ReactModalHostManager(reactContext),
       new ReactProgressBarViewManager(),
       new ReactRawTextManager(),
       new ReactScrollViewManager(),

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

@@ -9,13 +9,17 @@
 
 package com.facebook.react.views.modal;
 
+import javax.annotation.Nullable;
+
 import java.util.Map;
 
 import android.content.DialogInterface;
 
+import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.common.SystemClock;
 import com.facebook.react.uimanager.LayoutShadowNode;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.ViewGroupManager;
@@ -29,6 +33,12 @@ public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView>
 
   private static final String REACT_CLASS = "RCTModalHostView";
 
+  private final ReactApplicationContext mContext;
+
+  public ReactModalHostManager(ReactApplicationContext context) {
+    mContext = context;
+  }
+
   @Override
   public String getName() {
     return REACT_CLASS;
@@ -95,6 +105,18 @@ public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView>
       .build();
   }
 
+  @Override
+  public @Nullable Map<String, Object> getExportedViewConstants() {
+    final int heightResId = mContext.getResources().getIdentifier("status_bar_height", "dimen", "android");
+    final float height = heightResId > 0 ?
+      PixelUtil.toDIPFromPixel(mContext.getResources().getDimensionPixelSize(heightResId)) :
+      0;
+
+    return MapBuilder.<String, Object>of(
+      "StatusBarHeight", height
+    );
+  }
+
   @Override
   protected void onAfterUpdateTransaction(ReactModalHostView view) {
     super.onAfterUpdateTransaction(view);

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

@@ -223,6 +223,8 @@ public class ReactModalHostView extends ViewGroup implements LifecycleEventListe
   private void updateProperties() {
     Assertions.assertNotNull(mDialog, "mDialog must exist when we call updateProperties");
 
+    mDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+
     if (mTransparent) {
       mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
     } else {