React-native: Refreshing when multiple Modals open will keep the first one open after refresh

[aforty]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.3.0
Yarn: 1.0.2
npm: 2.15.12
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ^0.48.1 => 0.48.2

Target Platform: iOS (10.3)

Steps to Reproduce

See demo app below.

Initial background color is blue, first modal is red, second modal black.

1. Press "Launch Modal" to launch the first red modal.
2. Press "Launch Modal" again to launch second black modal.
3. Now press ⌘R to refresh.

Expected Behavior

I would expect all modals to close and not to reopen after refreshing the app.

Actual Behavior

You'll notice that immediately after refreshing the app the second black modal becomes active again (while the first red modal does not) and the entire screen is unresponsive. The only way out of this state is to recompile the app completely.

I haven't confirmed whether this also happens on Android.

Reproducible Demo

import React from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App () {
  return <ComponentThatLaunchesModal color1="blue" color2="red" color3="black" />;
}

class ComponentThatLaunchesModal extends React.Component {
  state = {
    showModal: false,
  };

  render () {
    return (
      <View style={[styles.container, { backgroundColor: this.props.color1 }]}>
        <TouchableOpacity onPress={() => this.setState({ showModal: true })}>
          <Text style={styles.label}>Launch Modal</Text>
        </TouchableOpacity>

        <Modal animationType="slide" visible={this.state.showModal}>
          <ComponentThatLaunchesModal color1={this.props.color2} color2={this.props.color3} />
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  label: {
    color: 'white',
  },
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[aforty]

This is still an issue with 0.53.3 and would appreciate it being looked into by someone.

[RyanMitchellWilson]

We just updated to react-native .49 and this started happening in a couple places throughout the app. I can confirm that the condition to show the modal is set to false and the modal that remains on the screen is completely unresponsive. Same as above that we need to recompile our app to fix this.

Ours is slightly different in the way that we have a modal open, then we flip the condition to show the modal to false. The modal then starts to fade out and disappear then instantly comes back and is then unresponsive and takes up the whole screen so we cannot interact with anything underneath the modal. The modal then stays on the screen until we rebuild the app, refreshing seems to have no effect.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[aforty]

Activity. This is still very much a bug.

[cihadturhan]

RN v0.54.4, this exists.
At least, please reveal a function like hide() so that we can close it manually inside componentWillUnmount

[CharlieOrlando]

Also running into this issue.

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

[cihadturhan]

I think this issue is resolved.

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

[aforty]

Not stale, still an issue with 0.57.2.

[m-vdb]

yep, experiencing it in 2019...

[OlivierFreyssinet]

Still the case on React Native 0.58.3

[Elmarino]

I'm experiencing it too

[tauanbinato]

same problem here.. modals keep poping up when i save something in the project