Controlled Modal Freezes UI #16894
Description
Is this a bug report?
Yes
Environment
Environment:
OS: macOS High Sierra 10.13.1
Node: 8.8.1
Yarn: 1.3.2
npm: 5.4.2
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4408382
Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: https://github.com/expo/react-native/archive/sdk-22.0.2.tar.gz => 0.49.3
Target Platform: iOS (10.3)
Steps to Reproduce
- Create a controlled modal such as:
const Modal = ({ showModal, closeModal }) => (
<Modal
animationType="slide"
transparent={false}
visible={showModal}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<View style={{marginTop: 22}}>
<Text>Hello World!</Text>
<TouchableHighlight onPress={() => closeModal() }>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</Modal>
);
- Trigger the modal from a parent component, such as:
<View>
<Modal
showModal={this.state.showModal}
closeModal={() => this.setState({ showModal: false })}
/>
<ScrollView>
{elements.map(element => {
return (
<Card key={element.id}>
<Badge onPress={() => this.setState({ showModal: true })>
<Text>Show</Text>
</Badge>
</Card>
);
})}
</ScrollView>
</View>
- Click open modal and it will open
- Click Hide Modal it will close and then reopen and the UI becomes unresponsive
Expected Behavior
I would expect the modal would open and then close again and wait till I click show modal again.
Actual Behavior
Modal opens up and when I press close, it closes and reopens and the UI becomes unresponsive.
Reproducible Demo
https://snack.expo.io/ByuRT9lxM
What I found out so far
The issue originates from:
componentWillUpdate() {
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
LayoutAnimation.easeInEaseOut();
}
When I remove it all works as expected, so I guess there is some animation conflict?
Thank you and Regards,
Emir