Model reopens right after closing it and unable to close it back again

[rajtejani]

Description

Modal reopens right after closing it and doesn't allow me to close it. I'm importing Modal from react-native.

could it be possible due to the react-native-gesture-handler

Version

0.67.3

Output of npx react-native info

System:
OS: macOS 11.2
CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
Memory: 58.17 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.0/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Watchman: 2021.10.18.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 23, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7784292
Xcode: 12.5/12E262 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.3 => 0.67.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

I updated React Native version from 0.63.0 to 0.67.3 recently. And then I saw this issue happening to me. I also created one more React Native app with a 0.67.3 version and it was also happening to that app as well. I found one solution to wrap Component inside . That worked on 2nd app which I created for test purposes but not working in my current app.

Snack, code example, screenshot, or link to a repository

Untitled.mp4

[rajtejani]

Solved this problem by wrapping Modal inside <View></View> and conditionally rendering depending on the state variable which we pass on the show property on the modal.

Example:

<View>
  {
    show &&
      <Modal show={show}>
      ....
      </Modal>
  }
    </View>

[lucienbl]

Hello, I'm facing the same issue after upgrading from 0.65.1 to 0.69.1 and sadly @rajtejani 's fix doesn't work here. Even if I conditionally don't render the modal when it's not supposed to be visible it still comes back and somehow freezes.

Edit : tried with react-native-modal and there modal is simply freezing the app after closing.

Edit 2 : noticed this only happens on modals with transparent background.

[psnfrench]

I am facing this issue also on 0.68.2

1. rajtejani's fix doens't work for me
2. Only an issue when setting transparent={true}

[rajtejani]

I am facing this issue also on 0.68.2

1. rajtejani's fix doens't work for me
2. Only an issue when setting transparent={true}

@psnfrench I also had a problem in that version too and the fix which worked me for was just wrapping my Modal code with <View>...</View>.

The above fix which I suggested is not a full-proof solution. It doesn't work in situations where you have one common modal and you are trying to open and close using refs.

Something like this.

CommonModal.js

class CommonModal extends React.PureComponent {
  state = {
    show: false,
    },
  };

  
  openModal = () => {
    this.setState({
      show: true,
  };

  closeModal = () => {
    this.setState({show: false});
  };

  render() {
    const {show} = this.state;

    return (
      <Modal visible={show}>
          ........
      </Modal
    );
  }
}

App.js

const App = () => {

  const closeModal = () => {
      UTILS.ui.modal.closeModal();
  }
  
  const openModal = () => {
       UTILS.ui.modal.openModal();
  }
  
  console.disableYellowBox = true;
  return (
    <View style={[commonStyles.flex(1)]}>
      <SafeAreaProvider>
        <CommonModal ref={ref => (UTILS.ui.modal = ref)} />
        <Button title="Open" onPress={openModal}>
        <Button title="Close" onPress={closeModal}>
      </SafeAreaProvider>
    </View>
  );
};

[SerhiyZheliznjak]

2. Only an issue when setting transparent={true}

same for me

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.