From 4b2a90fd84864c1af562c3db14761175cfae2b5a Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Thu, 21 Apr 2016 18:25:03 -0400 Subject: [PATCH 1/9] add translucentStatusBar prop to Modal for android --- Examples/UIExplorer/ModalExample.js | 11 +++++++++ Libraries/Modal/Modal.js | 23 ++++++++++++++++++- .../views/modal/ReactModalHostManager.java | 5 ++++ .../react/views/modal/ReactModalHostView.java | 11 +++++++++ 4 files changed, 49 insertions(+), 1 deletion(-) diff --git a/Examples/UIExplorer/ModalExample.js b/Examples/UIExplorer/ModalExample.js index 5d495206ea41fb..bee9fd79bee5de 100644 --- a/Examples/UIExplorer/ModalExample.js +++ b/Examples/UIExplorer/ModalExample.js @@ -69,6 +69,7 @@ var ModalExample = React.createClass({ animated: true, modalVisible: false, transparent: false, + translucentStatusBar: false, }; }, @@ -84,6 +85,10 @@ var ModalExample = React.createClass({ this.setState({transparent: !this.state.transparent}); }, + _toggleTranslucentStatusBar() { + this.setState({translucentStatusBar: !this.state.translucentStatusBar}); + }, + render() { var modalBackgroundStyle = { backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff', @@ -97,6 +102,7 @@ var ModalExample = React.createClass({ {this._setModalVisible(false)}} > @@ -122,6 +128,11 @@ var ModalExample = React.createClass({ + + Translucent StatusBar + + + diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 1451caf861a45d..994b9de3253a69 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -55,16 +55,21 @@ class Modal extends React.Component { backgroundColor: this.props.transparent ? 'transparent' : 'white', }; + const containerTopValue = { + top: this.props.translucentStatusBar ? 24 : 0, + }; + return ( - + {this.props.children} @@ -77,6 +82,22 @@ class Modal extends React.Component { } } +Modal.propTypes = { + animated: PropTypes.bool, + transparent: PropTypes.bool, + /** + * @platform android + */ + translucentStatusBar: PropTypes.bool, + visible: PropTypes.bool, + onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func, + onShow: PropTypes.func, +}; + +Modal.defaultProps = { + visible: true, +}; + const styles = StyleSheet.create({ modal: { position: 'absolute', 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 e37da05b7b4b11..eec551050ff209 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 @@ -65,6 +65,11 @@ public void setTransparent(ReactModalHostView view, boolean transparent) { view.setTransparent(transparent); } + @ReactProp(name = "translucentStatusBar") + public void setTranslucentStatusBar(ReactModalHostView view, boolean translucentStatusBar) { + view.setTranslucentStatusBar(translucentStatusBar); + } + @Override protected void addEventEmitters( ThemedReactContext reactContext, 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 ac52e282d2d35d..0ebbe787c93f24 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 @@ -55,6 +55,7 @@ public interface OnRequestCloseListener { private @Nullable Dialog mDialog; private boolean mTransparent; private boolean mAnimated; + private boolean mTranslucentStatusBar; // Set this flag to true if changing a particular property on the view requires a new Dialog to // be created. For instance, animation does since it affects Dialog creation through the theme // but transparency does not since we can access the window to update the property. @@ -128,6 +129,10 @@ protected void setAnimated(boolean animated) { mPropertyRequiresNewDialog = true; } + protected void setTranslucentStatusBar(boolean translucentStatusBar) { + mTranslucentStatusBar = translucentStatusBar; + } + @VisibleForTesting public @Nullable Dialog getDialog() { return mDialog; @@ -203,6 +208,11 @@ private void updateProperties() { WindowManager.LayoutParams.FLAG_DIM_BEHIND, WindowManager.LayoutParams.FLAG_DIM_BEHIND); } + if (mTranslucentStatusBar) { + mDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); + } else { + mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); + } } /** @@ -251,3 +261,4 @@ private EventDispatcher getEventDispatcher() { } } } + From e4dfc8ad7354c4119cc8953b2a918c3112d59573 Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Fri, 22 Apr 2016 10:17:18 -0400 Subject: [PATCH 2/9] taps to spaces --- Libraries/Modal/Modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 994b9de3253a69..e98ddc1f8921a0 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -56,7 +56,7 @@ class Modal extends React.Component { }; const containerTopValue = { - top: this.props.translucentStatusBar ? 24 : 0, + top: this.props.translucentStatusBar ? 24 : 0, }; return ( From e607b2dcfd99a4d108f51632a55cd3572fe4a885 Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Thu, 21 Apr 2016 19:41:26 -0400 Subject: [PATCH 3/9] small cleanup --- Libraries/Modal/Modal.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index e98ddc1f8921a0..46867e4513d51b 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -20,6 +20,8 @@ const View = require('View'); const requireNativeComponent = require('requireNativeComponent'); const RCTModalHostView = requireNativeComponent('RCTModalHostView', null); +const STATUS_BAR_HEIGHT = 24; + /** * A Modal component covers the native view (e.g. UIViewController, Activity) * that contains the React Native root. @@ -56,7 +58,7 @@ class Modal extends React.Component { }; const containerTopValue = { - top: this.props.translucentStatusBar ? 24 : 0, + top: this.props.translucentStatusBar ? STATUS_BAR_HEIGHT : 0, }; return ( From ae660971431f186de737f6af50d2827e3c1845ff Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Fri, 22 Apr 2016 15:19:11 -0400 Subject: [PATCH 4/9] use StatusBar current height instead of fixed --- Libraries/Modal/Modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 46867e4513d51b..e02c0f14908e86 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -20,7 +20,7 @@ const View = require('View'); const requireNativeComponent = require('requireNativeComponent'); const RCTModalHostView = requireNativeComponent('RCTModalHostView', null); -const STATUS_BAR_HEIGHT = 24; +const STATUS_BAR_HEIGHT = StatusBar.currentHeight; /** * A Modal component covers the native view (e.g. UIViewController, Activity) From dbe56b15614fdf4ce606f6474e62e95541c3194a Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Fri, 22 Apr 2016 16:36:51 -0400 Subject: [PATCH 5/9] require statusbar --- Libraries/Modal/Modal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index e02c0f14908e86..99123607669f04 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -14,6 +14,7 @@ const Platform = require('Platform'); const PropTypes = require('ReactPropTypes'); const React = require('React'); +const StatusBar = require('StatusBar'); const StyleSheet = require('StyleSheet'); const View = require('View'); From 01939a39787a1fb573fddebefcbe6211d93e668f Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Thu, 28 Apr 2016 18:40:36 -0400 Subject: [PATCH 6/9] dont change top value for older api versions --- Libraries/Modal/Modal.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 99123607669f04..5440b6289a27e7 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -58,8 +58,13 @@ class Modal extends React.Component { backgroundColor: this.props.transparent ? 'transparent' : 'white', }; + let topValue = 0; + if (this.props.translucentStatusBar && !(Platform.OS === 'android' && Platform.Version < 19)) { + topValue = STATUS_BAR_HEIGHT; + } + const containerTopValue = { - top: this.props.translucentStatusBar ? STATUS_BAR_HEIGHT : 0, + top: topValue }; return ( From 92adea5d073d101f40c9dcfe042dafb99286a46a Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Sun, 1 May 2016 11:37:17 -0400 Subject: [PATCH 7/9] remove translucentStatusBar prop, make it default behavior --- Examples/UIExplorer/ModalExample.js | 13 +------------ Libraries/Modal/Modal.js | 7 +------ .../react/views/modal/ReactModalHostManager.java | 5 ----- .../react/views/modal/ReactModalHostView.java | 12 ++---------- 4 files changed, 4 insertions(+), 33 deletions(-) diff --git a/Examples/UIExplorer/ModalExample.js b/Examples/UIExplorer/ModalExample.js index bee9fd79bee5de..8c749926e1acb0 100644 --- a/Examples/UIExplorer/ModalExample.js +++ b/Examples/UIExplorer/ModalExample.js @@ -68,8 +68,7 @@ var ModalExample = React.createClass({ return { animated: true, modalVisible: false, - transparent: false, - translucentStatusBar: false, + transparent: false }; }, @@ -85,10 +84,6 @@ var ModalExample = React.createClass({ this.setState({transparent: !this.state.transparent}); }, - _toggleTranslucentStatusBar() { - this.setState({translucentStatusBar: !this.state.translucentStatusBar}); - }, - render() { var modalBackgroundStyle = { backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff', @@ -102,7 +97,6 @@ var ModalExample = React.createClass({ {this._setModalVisible(false)}} > @@ -128,11 +122,6 @@ var ModalExample = React.createClass({ - - Translucent StatusBar - - - diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 5440b6289a27e7..d1aa543c605890 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -59,7 +59,7 @@ class Modal extends React.Component { }; let topValue = 0; - if (this.props.translucentStatusBar && !(Platform.OS === 'android' && Platform.Version < 19)) { + if (Platform.OS === 'android' && Platform.Version >= 19) { topValue = STATUS_BAR_HEIGHT; } @@ -71,7 +71,6 @@ class Modal extends React.Component { Date: Sun, 1 May 2016 15:34:17 -0400 Subject: [PATCH 8/9] new line at end of modal file --- Libraries/Modal/Modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 1ced348d66d121..ea52b59234dd94 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -126,4 +126,4 @@ const styles = StyleSheet.create({ } }); -module.exports = Modal; \ No newline at end of file +module.exports = Modal; From 2903c7e37bdba1e84d1e72b7cfd6bcc01a390651 Mon Sep 17 00:00:00 2001 From: Jesse Sessler Date: Thu, 5 May 2016 09:46:18 -0400 Subject: [PATCH 9/9] remove non static proptypes and defaultprops --- Examples/UIExplorer/ModalExample.js | 2 +- Libraries/Modal/Modal.js | 26 +++----------------------- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/Examples/UIExplorer/ModalExample.js b/Examples/UIExplorer/ModalExample.js index fb302c881f9b51..1717fb0e098192 100644 --- a/Examples/UIExplorer/ModalExample.js +++ b/Examples/UIExplorer/ModalExample.js @@ -68,7 +68,7 @@ var ModalExample = React.createClass({ return { animationType: 'none', modalVisible: false, - transparent: false + transparent: false, }; }, diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index ea52b59234dd94..fc2b4e8cee4fc7 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -59,19 +59,11 @@ class Modal extends React.Component { return null; } - const containerBackgroundColor = { + const containerStyles = { backgroundColor: this.props.transparent ? 'transparent' : 'white', - }; - - let topValue = 0; - if (Platform.OS === 'android' && Platform.Version >= 19) { - topValue = STATUS_BAR_HEIGHT; + top: Platform.OS === 'android' && Platform.Version >= 19 ? STATUS_BAR_HEIGHT : 0, } - const containerTopValue = { - top: topValue - }; - let animationType = this.props.animationType; if (!animationType) { // manually setting default prop here to keep support for the deprecated 'animated' prop @@ -90,7 +82,7 @@ class Modal extends React.Component { style={styles.modal} onStartShouldSetResponder={this._shouldSetResponder} > - + {this.props.children} @@ -103,18 +95,6 @@ class Modal extends React.Component { } } -Modal.propTypes = { - animated: PropTypes.bool, - transparent: PropTypes.bool, - visible: PropTypes.bool, - onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func, - onShow: PropTypes.func, -}; - -Modal.defaultProps = { - visible: true, -}; - const styles = StyleSheet.create({ modal: { position: 'absolute',