Refreshing when multiple Modals open will keep the first one open after refresh #16037
Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 8.3.0
Yarn: 1.0.2
npm: 2.15.12
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ^0.48.1 => 0.48.2
Target Platform: iOS (10.3)
Steps to Reproduce
See demo app below.
Initial background color is blue, first modal is red, second modal black.
- Press "Launch Modal" to launch the first
redmodal. - Press "Launch Modal" again to launch second
blackmodal. - Now press ⌘R to refresh.
Expected Behavior
I would expect all modals to close and not to reopen after refreshing the app.
Actual Behavior
You'll notice that immediately after refreshing the app the second black modal becomes active again (while the first red modal does not) and the entire screen is unresponsive. The only way out of this state is to recompile the app completely.
I haven't confirmed whether this also happens on Android.
Reproducible Demo
import React from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App () {
return <ComponentThatLaunchesModal color1="blue" color2="red" color3="black" />;
}
class ComponentThatLaunchesModal extends React.Component {
state = {
showModal: false,
};
render () {
return (
<View style={[styles.container, { backgroundColor: this.props.color1 }]}>
<TouchableOpacity onPress={() => this.setState({ showModal: true })}>
<Text style={styles.label}>Launch Modal</Text>
</TouchableOpacity>
<Modal animationType="slide" visible={this.state.showModal}>
<ComponentThatLaunchesModal color1={this.props.color2} color2={this.props.color3} />
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
label: {
color: 'white',
},
});