react-native: Controlled Modal UI Freezes
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? When I test it on my local emulator which is the latest iPhone I get the issue. When I test it on the android on snack.expo I get the issue. When I run the iOS device on snack.expo the issue isn’t there.
Thank you and Regards, Emir
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 20
- Comments: 31 (1 by maintainers)
Commits related to this issue
- Fix LayoutAnimation.easeInEaseOut bug More info here https://github.com/facebook/react-native/issues/16895 — committed to gazedash/react-native-draggable-flatlist by gazedash 5 years ago
- React sync for revisions 85d05b3...4eeee35 Summary: This sync includes the following changes: - **[4eeee358e](https://github.com/facebook/react/commit/4eeee358e )**: [SuspenseList] Store lastEffect b... — committed to facebook/react-native by gaearon 5 years ago
I have the same issue using RN0.55.4
I’m also experiencing the same issue:
react: 16.6.0 react-native: 0.57.4 Android: 6
I can reproduce this issue with a physical Android device.
Updated from
0.47.0
to0.48.3
and now my Modals are not behaving properly. They might hide and then suddenly reappear. Then you’d have to restart the app since they become unresponsive.This is happening with my modals, which are all controlled within the local state object of the component (No redux, nor Parent-child prop). Will update RN to see if I can solve the issue.
Indeed, removing
did it for me.
I am sometimes facing on this issue with freezing app. I have tried to find the reason for long time but never found. Who can help for this ?
It has not been fixed, still present in RN0.55
Still an issue for me. Any updates?
After upgrading to RN 0.50.3, we couldn’t reproduce this anymore.
Also, in the previous RN versions, we deduced that the freeze only happened if our redux-controlled state changed while the Modal was being shown.
Is there any update, I am still facing this issue for only Android devices. Any kind of help is appreciated.
Experiencing this bug on RN 0.59.10. I don’t have any calls to: LayoutAnimation.easeInEaseOut(); How would I fix this?
Is there a way to add onDismiss for android ?
I have UI freezes on Android. It seems, in my case, the issue is not stable and a result of some race condition. I have modals open and close during navigation transitions
We are also experiencing the same issue:
react: 16.0.0-alpha.12 react-native: 0.48.2 iOS: 11
We can reproduce this issue with a physical iOS device. Connecting xcode to a debug build produces this warning at the same time as the UI freezes: