Permalink
Browse files

Prevent show a hidden status bar when opening modals, fix #7474

Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

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 <StatusBar> 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

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[ GENERAL  ]   [ BUGFIX      ]   [ [StatusBar] - Prevent show a hidden status bar when opening modals
 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[ GENERAL  ]   [ BUGFIX      ]   [StatusBar] - Prevent show a hidden status bar when opening modals
Closes #18004

Differential Revision: D7307564

Pulled By: hramos

fbshipit-source-id: 47e481ead78204865811ddf2ef3d27da77ad8b8f
  • Loading branch information...
t4deu authored and facebook-github-bot committed Mar 16, 2018
1 parent dbd4759 commit 076b1cea3563cae30e11d63cc100ceaed9082692
@@ -17,6 +17,7 @@ const {
Text,
TouchableHighlight,
View,
Modal,
} = ReactNative;
exports.framework = 'React';
@@ -100,6 +101,7 @@ class StatusBarHiddenExample extends React.Component<{}, $FlowFixMeState> {
</Text>
</View>
</TouchableHighlight>
<ModalExample />
</View>
);
}
@@ -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 (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={this._onChangeModalVisible}>
<View style={styles.button}>
<Text>modal visible: {this.state.hidden ? 'true' : 'false'}</Text>
</View>
</TouchableHighlight>
<Modal
visible={this.state.modalVisible}
transparent={true}
onRequestClose={this._onChangeModalVisible}>
<View style={[styles.container]}>
<View style={[styles.innerContainer]}>
<Text>This modal was presented!</Text>
<TouchableHighlight
onPress={this._onChangeModalVisible}
style={styles.modalButton}>
<View style={styles.button}>
<Text>Close</Text>
</View>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
}
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,
},
});
@@ -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 {

3 comments on commit 076b1ce

@aecorredor

This comment has been minimized.

aecorredor replied Jul 27, 2018

Will this be merged?

@patrickkempff

This comment has been minimized.

Collaborator

patrickkempff replied Jul 27, 2018

@aecorredor I am not sure what you mean, but this commit has been merged in master and shipped as part of 0.56.

@aecorredor

This comment has been minimized.

aecorredor replied Jul 27, 2018

@patrickkempff thanks for the quick answer. Sorry about that, got here from the Pending PR link on the issue and didn't realize this was a commit to master already.

Please sign in to comment.