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

[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.