Skip to content

Commit

Permalink
Prevent show a hidden status bar when opening modals, fix #7474
Browse files Browse the repository at this point in the history
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 076b1ce
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 1 deletion.
59 changes: 58 additions & 1 deletion RNTester/js/StatusBarExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const {
Text,
TouchableHighlight,
View,
Modal,
} = ReactNative;

exports.framework = 'React';
Expand Down Expand Up @@ -100,6 +101,7 @@ class StatusBarHiddenExample extends React.Component<{}, $FlowFixMeState> {
</Text>
</View>
</TouchableHighlight>
<ModalExample />
</View>
);
}
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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,
Expand All @@ -449,5 +503,8 @@ var styles = StyleSheet.create({
marginTop: 16,
marginBottom: 8,
fontWeight: 'bold',
}
},
modalButton: {
marginTop: 10,
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

3 comments on commit 076b1ce

@aecorredor
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this be merged?

@patrickkempff
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@aecorredor
Copy link

@aecorredor aecorredor commented on 076b1ce Jul 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.