onModalHide is never called if the Modal is unmounted while still visible

[tienifr]

Environment

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 717.27 MB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.14.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
    Android SDK:
      API Levels: 27, 28, 29, 30, 31, 32, 33, 34
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.1, 34.0.0
      System Images: android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-33 | Google APIs ARM 64 v8a, android-34 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9514443
    Xcode: 15.3/15E204a - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.9 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.73.6 => 0.73.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

Android, iOS and Web

Versions

• Android: 14
• iOS: 17.0
• react-native-modal: 13.0.1
• react-native: 0.73.6
• react: 18.2.0

Description

When the Modal is hidden because isVisible changes from true to false, the onModalHide will be called.

But when the Modal is hidden because it's unmounted (isVisible is still true), the onModalHide is never called. This leads to problems because we often use onModalHide to perform some clean-up, or show a different UX when the modal is hidden.

Reproducible Demo

Here's the repository that contains the minimal reproducible example: https://github.com/tienifr/react-native-modal-bug-reproducible-example.

This is a new React Native project, bootstrapped using @react-native-community/cli. react-native-modal was added and some minor code was added to showcase the error (via this commit). The steps to run it are in the README.

After running it, we can see:

1. After 1 second, the Modal with text I am the modal content! will show (due to this code)
2. After 3 seconds, the Modal with text I am the modal content! will disappear (due to this code)
3. The onModalHide, which should log this, is never called.

Video showing the logs in onModalHide never happened
https://github.com/react-native-modal/react-native-modal/assets/113963320/25b87f23-7872-4619-a28a-926106a4f377

[tienifr]

I'm happy to contribute a fix if the maintainers agree that this is a valid bug.

[Gilgaustus]

I'm happy to contribute a fix if the maintainers agree that this is a valid bug.

The maintainers havent done anything in a couple of years. What is your fix?