Controlled Modal Freezes UI

[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>
);

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

3. Click open modal and it will open
4. 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

[react-native-bot]

@facebook-github-bot no-template

[facebook-github-bot]

Hey @EmirGluhbegovic, thanks for posting this! It looks like your issue is missing some required information. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce your issue. I am going to close this, but please feel free to open a new issue with the additional information provided. Thanks!

_{How to Contribute • What to Expect from Maintainers}