From 191d278fda965d6a9a4cbc756003ff8b1ce0f53a Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Mon, 9 May 2016 07:07:39 -0700 Subject: [PATCH] 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 | 8 ++++--- .../react/shell/MainReactPackage.java | 2 +- .../views/modal/ReactModalHostManager.java | 22 +++++++++++++++++++ .../react/views/modal/ReactModalHostView.java | 2 ++ 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 8dea025284a..87b76fe14a5 100644 --- a/Libraries/Modal/Modal.js +++ b/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} > - + {this.props.children} @@ -102,4 +104,4 @@ const styles = StyleSheet.create({ } }); -module.exports = Modal; \ No newline at end of file +module.exports = Modal; diff --git a/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java b/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java index 2687402c660..d389d0f1020 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java +++ b/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(), diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java index c8091251e30..4af221dd496 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java +++ b/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 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 .build(); } + @Override + public @Nullable Map 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.of( + "StatusBarHeight", height + ); + } + @Override protected void onAfterUpdateTransaction(ReactModalHostView view) { super.onAfterUpdateTransaction(view); diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java b/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java index 3414429f0a2..24b33892a36 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java +++ b/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 {