From 076b1cea3563cae30e11d63cc100ceaed9082692 Mon Sep 17 00:00:00 2001 From: Tadeu Valentt Date: Fri, 16 Mar 2018 16:35:37 -0700 Subject: [PATCH] Prevent show a hidden status bar when opening modals, fix #7474 Summary: Closes the old #7474, keeping the status bar hidden when displaying a modal or dialog, this is accomplished by verifying if the activity status bar is hidden or not. Added a test to [RNTester](https://github.com/facebook/react-native/tree/master/RNTester), so it can be tested from there: 1. Run [RNTester](https://github.com/facebook/react-native/tree/master/RNTester) project 2. Go to tests 3. Set `hidden: true` in the *StatusBar hidden* samples 4. Set `modal visible: true` and see the result Here are some gifs to help see the results: ![fail](https://user-images.githubusercontent.com/1649955/36345378-f443ad7e-1407-11e8-850d-d6317fb34da4.gif) ![success](https://user-images.githubusercontent.com/1649955/36345392-1c590b56-1408-11e8-9244-a2e828f579ab.gif) none [ GENERAL ] [ BUGFIX ] [StatusBar] - Prevent show a hidden status bar when opening modals Closes https://github.com/facebook/react-native/pull/18004 Differential Revision: D7307564 Pulled By: hramos fbshipit-source-id: 47e481ead78204865811ddf2ef3d27da77ad8b8f --- RNTester/js/StatusBarExample.js | 59 ++++++++++++++++++- .../react/views/modal/ReactModalHostView.java | 11 ++++ 2 files changed, 69 insertions(+), 1 deletion(-) diff --git a/RNTester/js/StatusBarExample.js b/RNTester/js/StatusBarExample.js index 0df43f42edb371..e5dae5c77c49c2 100644 --- a/RNTester/js/StatusBarExample.js +++ b/RNTester/js/StatusBarExample.js @@ -17,6 +17,7 @@ const { Text, TouchableHighlight, View, + Modal, } = ReactNative; exports.framework = 'React'; @@ -100,6 +101,7 @@ class StatusBarHiddenExample extends React.Component<{}, $FlowFixMeState> { + ); } @@ -380,6 +382,48 @@ class StatusBarStaticAndroidExample extends React.Component<{}> { } } + +class ModalExample extends React.Component<{}, $FlowFixMeState> { + state = { + modalVisible: false, + }; + + _onChangeModalVisible = () => { + this.setState({modalVisible: !this.state.modalVisible}); + }; + + render() { + return ( + + + + modal visible: {this.state.hidden ? 'true' : 'false'} + + + + + + This modal was presented! + + + Close + + + + + + + ); + } +} + const examples = [{ title: 'StatusBar hidden', render() { @@ -436,6 +480,16 @@ const examples = [{ exports.examples = examples; var styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + padding: 20, + backgroundColor: '#f5fcff' + }, + innerContainer: { + borderRadius: 10, + alignItems: 'center', + }, wrapper: { borderRadius: 5, marginBottom: 5, @@ -449,5 +503,8 @@ var styles = StyleSheet.create({ marginTop: 16, marginBottom: 8, fontWeight: 'bold', - } + }, + modalButton: { + marginTop: 10, + }, }); 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 1d64cb83f8f018..00eac510ab8f35 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 @@ -276,6 +276,17 @@ private View getContentView() { private void updateProperties() { Assertions.assertNotNull(mDialog, "mDialog must exist when we call updateProperties"); + Activity currentActivity = getCurrentActivity(); + if (currentActivity != null) { + int activityWindowFlags = currentActivity.getWindow().getAttributes().flags; + if ((activityWindowFlags + & WindowManager.LayoutParams.FLAG_FULLSCREEN) != 0) { + mDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); + } else { + mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); + } + } + if (mTransparent) { mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND); } else {