Permalink
Browse files

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 #7157

Differential Revision: D3264497

Pulled By: dmmiller

fb-gh-sync-id: 61346d99414d331d3420f44a4c5f6341b0973be6
fbshipit-source-id: 61346d99414d331d3420f44a4c5f6341b0973be6
  • Loading branch information...
jemise111 authored and Facebook Github Bot 5 committed May 9, 2016
1 parent abca466 commit 191d278fda965d6a9a4cbc756003ff8b1ce0f53a
View
@@ -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;
@@ -108,7 +108,7 @@
new ReactDropdownPickerManager(),
new ReactHorizontalScrollViewManager(),
new ReactImageManager(),
new ReactModalHostManager(),
new ReactModalHostManager(reactContext),
new ReactProgressBarViewManager(),
new ReactRawTextManager(),
new ReactScrollViewManager(),
@@ -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 @@
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 void onShow(DialogInterface dialog) {
.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);
@@ -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 {

0 comments on commit 191d278

Please sign in to comment.