Please provide the following:
- SDK Version: 43.0.0 and 44.0.0
- Platforms(Android/iOS/web/all): android
- Add the appropriate “Tag” based on what Expo library you have a question on.
Hi,
I am having an issue with Modal and StatusBar since I have upgraded to expo SDK 43.0.0 and further
Long story short (see MRE below) : I was able to show a Modal popup and hide android status bar in expo SDK 42 and since SDK 43 the status bar is displayed each time the popup is visible
I known there is (was ?) a known bug between react-native status bar and modal but since it was working in expo SDK 42.0.0 I suppose the bug may be elsewhere and that it can be solved somehow.
Thanks is advance for any help.
MRE:
1- expo init statusbar_modal
2- cd statusbar_modal
3- expo upgrade 42.0.0
4- create App.js
import React from 'react';
import {
Modal,
Text,
StyleSheet,
View,
Button,
TouchableWithoutFeedback,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false,
};
}
showModal = () => {
this.setState({ show: true });
};
hideModal = () => {
this.setState({ show: false });
};
render() {
return (
<View style={styles.appContainer}>
<StatusBar hidden={true} animated={false} style='' />
<View>
<Button onPress={this.showModal} title='Show Modal' />
</View>
<Modal
animationType='fade'
transparent={true}
visible={this.state.show}
onRequestClose={this.hideModal}
statusBarTranslucent={true}>
<View style={styles.backdrop}>
<TouchableWithoutFeedback onPress={this.hideModal}>
<View /* Popup container */ style={[styles.popupContainer]}>
<Text>This is a modal popup, touch me to close</Text>
</View>
</TouchableWithoutFeedback>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
appContainer: {
...StyleSheet.absoluteFillObject,
justifyContent: 'space-evenly',
alignItems: 'center',
},
backdrop: {
alignItems: 'center',
justifyContent: 'space-evenly',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
},
popupContainer: {
backgroundColor: 'white',
width: 328,
height: 328,
borderRadius: 16,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
},
});
5- expo start
status bar is hidden
6- expo update 43.0.0
7- expo start -c
status bar is visible