Skip to content

Controlled Modal UI Freezes #16895

@EmirGluhbegovic

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugIssue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions