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

  1. 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>
);
  1. 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>
  1. Click open modal and it will open
  2. 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

Most upvoted comments

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 to 0.48.3and 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.

"react": "16.0.0-alpha.12",
"react-native": "0.48.3",

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

componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
}

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:

Warning: Attempt to dismiss from view controller <UIViewController: 0x10171b6e0> while a presentation or dismiss is in progress!