React-native: Controlled Modal UI Freezes

[EmirGluhbegovic]

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

[mtkopone]

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!

[mtkopone]

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.

[mikaello]

In RN 0.50 the onDismiss-prop was added to Modal for iOS. This could have been the reason it is working in RN 0.50. See also related issue #10471

[AlgoTrader]

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

[j-mendez]

Problem still occurs with react-native .51 here with android

[maitham]

Is there a way to add onDismiss for android ?

[pranav-pandey]

I have a redux-form inside the modal and the same issue with UI freeze. React Native 0.49.3
Upgrading the rn version is an issue for me, any workarounds possible?

[wmonecke]

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.

[wmonecke]

Still an issue for me. Any updates?

[j-mendez]

disabling pointer-events in certain views seems to fix it for me.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[dentemm]

It has not been fixed, still present in RN0.55

[fdobre]

I have the same issue using RN0.55.4

[ithustle]

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.

[cupid3600]

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 ?

[epshtielsl]

I am having the same issue on Android only using RN 0.56

[LRNZ09]

Same @maitham1 question: is there a way to support onDismiss callback on Android?

[skleest]

same behavior as well!

[ZeroCool00]

Any solution yet?

[dev-twoweb]

In my case the problem was a component that was being used within the modal (react-native-simple-radio-button), taking it out the problem stopped.

[jakecronin]

I was facing this issue on Android only. Fixed using @wmonecke's comment by removing calls of
LayoutAnimation.easeInEaseOut();
In my case, I changed

  componentWillMount() {
      LayoutAnimation.easeInEaseOut();
  }

to

  componentWillMount() {
    if (Platform.OS === 'ios') {
      LayoutAnimation.easeInEaseOut();
    }
  }

Note, I am using:
"react": "16.8.3",
"react-native": "0.59.5",

[NathanNovak]

I know we have found that console.log in the constructor of the component that modal is wrapping causes freezing in release mode.

[bramski]

Experiencing this bug on RN 0.59.10.
I don't have any calls to: LayoutAnimation.easeInEaseOut();
How would I fix this?

[berksafran]

I have the same issue on Android. I dont have any problems on IOS.

I have a Profile Screen in my App as you can see below. When click to 'İsim Değiştir' button, Bottom Modal is opened. All is well. But, I cant press to 'Şifre Değiştir' button. UI is freezing.

RN: 0.59.0
React-Native-Modal: 0.59.0

[webzexperts]

Is there any update, I am still facing this issue for only Android devices. Any kind of help is appreciated.

[samipshah100]

i am also facing this issue on android

[hideplan]

I have this issue too, but to my surprise, under some conditions it works, but mostly it doesn't. It was tied to some PanGestures, animations of custom Drawer. When I opened drawer before opening Modal, I could close it like normal. However I couldn't figure out what was causing that modal was working and why.

If anyone is interested in workaroud till this is fixed, I am using custom Modal with help of react-native-paper.

I wrapper my App with Provider and then just made simple custom modal component with Provider on top and any content inside. It works like RN Modal, but also with LayoutAnimation.

UPDATE: On RN 0.60+ this is probably fixed as after update I don't have this problem anymore. Before I had RN 0.59

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[vbashiri]

I've got this issue on both ios and android.
using react-native-modal-dropdown.
the dropdown modal works fine till animation run. The modal doesn't close on android, and on ios, it will freeze on open.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.