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 facebook#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 List<ViewManager> createViewManagers(ReactApplicationContext reactContext
       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 Map<String, Object> getExportedCustomDirectEventTypeConstants() {
       .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 boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
   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 {