SIGABRT: Application tried to present modally a view controller <RCTModalHostViewController: 0x10412f400> that is already being presented by <UIViewController: 0x1032142e0>.

[Hmoulvad]

Description

We are experiencing this error recently within our application, it came after updating to latest version of React Native. Do you have any suggestions for me on how to debug this, I can't seem to reproduce this myself.

React Native Version

0.71.7

Output of npx react-native info

System:
OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 216.97 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.1 - /opt/homebrew/lib/ruby/gems/2.7.0/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9619390
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: 17.0.4 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.7 => 0.71.7
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Havn't found a way yet to reproduce it all I get to from the crash is:

SIGABRT: Application tried to present modally a view controller <RCTModalHostViewController: 0x10412f400> that is already being presented by <UIViewController: 0x1032142e0>.

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

"dependencies": {
    "@microsoft/applicationinsights-react-native": "^3.0.2",
    "@microsoft/applicationinsights-web": "^3.0.1",
    "@react-native-async-storage/async-storage": "^1.18.1",
    "@react-native-community/netinfo": "^9.3.9",
    "@react-native-cookies/cookies": "^6.2.1",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "appcenter": "4.4.5",
    "appcenter-analytics": "4.4.5",
    "appcenter-crashes": "4.4.5",
    "date-fns": "^2.30.0",
    "fbjs": "^3.0.4",
    "immer": "^10.0.1",
    "jwk-to-pem": "^2.0.5",
    "ky": "^0.33.3",
    "lottie-ios": "3.4.0",
    "lottie-react-native": "5.1.5",
    "moti": "0.25.3",
    "react": "18.2.0",
    "react-hook-form": "^7.43.9",
    "react-native": "0.71.7",
    "react-native-big-list": "^1.6.1",
    "react-native-biometrics": "^3.0.1",
    "react-native-blob-util": "^0.17.3",
    "react-native-bugsee": "^3.0.10",
    "react-native-collapsible": "^1.6.1",
    "react-native-device-info": "^10.6.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-geolocation-service": "5.3.1",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-idle-timer": "2.1.7",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-lottie-splash-screen": "^1.1.1",
    "react-native-maps": "^1.7.1",
    "react-native-modal": "^13.0.1",
    "react-native-pdf": "^6.6.2",
    "react-native-permissions": "^3.8.0",
    "react-native-reanimated": "^2.17.0",
    "react-native-render-html": "^6.3.4",
    "react-native-rsa-native": "^2.0.5",
    "react-native-safe-area-context": "^4.5.2",
    "react-native-scanbot-barcode-scanner-sdk": "3.5.1",
    "react-native-screens": "^3.20.0",
    "react-native-share": "^8.2.2",
    "react-native-svg": "^13.9.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-text-ticker": "^1.14.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.1",
    "react-native-webview": "^12.0.2",
    "styled-components": "^5.3.10",
    "styled-tools": "^1.7.2",
    "suncalc": "^1.9.0",
    "swr": "^2.1.5",
    "use-debounce": "^9.0.4",
    "use-immer": "^0.9.0",
    "zustand": "^4.3.7"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/plugin-transform-template-literals": "^7.18.9",
    "@babel/runtime": "^7.21.5",
    "@svgr/webpack": "^7.0.0",
    "@types/jwk-to-pem": "^2.0.1",
    "@types/react": "^18.2.0",
    "@types/styled-components-react-native": "^5.2.1",
    "@types/suncalc": "^1.9.0",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "babel-loader": "^9.1.2",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-styled-components": "2.1.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.39.0",
    "eslint-config-react-native-wcandillon": "^3.10.0",
    "eslint-plugin-prettier": "^4.2.1",
    "metro-react-native-babel-preset": "^0.76.3",
    "patch-package": "^7.0.0",
    "prettier": "2.8.8",
    "react-native-svg-transformer": "^1.0.0",
    "swagger-typescript-api": "^12.0.4",
    "typescript": "^5.0.4"
  }

[koloboid]

The crash happened when we tried to hide the modal window and navigate with react-navigation to another page simultaneously, which is almost always reproducible in my case, could you tag me if any additional info is needed?

as a weird workaround - setTimeout

[Symous]

same issue and can not be sloved by setTimeout. any progress? @koloboid @Hmoulvad

[Hmoulvad]

I havn't been able to make any progress yet @Symous

[Symous]

@Hmoulvad I found this may happen when we open a Modal component inner Text component in iOS, but I can't find the reason.

[Hmoulvad]

@Symous can you shared some of that code, then I might be able to look through my own stuff too :-)

[bradjones1]

I'm running into the same type of issue as:

The crash happened when we tried to hide the modal window and navigate with react-navigation to another page simultaneously, which is almost always reproducible in my case, could you tag me if any additional info is needed?

The tough part for me is, on some screens hiding the modal beforehand (its visibility is toggled by state) consistently works prior to navigating, and in other cases not.

In the cases where this works, I am doing something like:

setIsProcessing(true);
props.route.params.save(selectedRef.current.map(value => value.value))
  .then(() => {
    setIsProcessing(false);
    props.navigation.goBack()
  });

where the state setting toggling the visibility of the modal open and closed is prior to an async callback.

In the cases where it doesn't work, the state had been set in a previous useEffect hook, and I am hiding and navigating in a separate useEffect. I had a hunch that perhaps React needed an extra "tick" between closing and navigating to give it time to clear the modal, and so I put the code that navigates inside a setTimeout() call with no timeout value.

I'm getting better with React every day but I'm still not entirely sure where the race condition is. But if you must hide a modal prior to navigating away it seems like putting the navigation call in an immediately-resolved setTimeout() might be an option.

In that sense I don't think this is a React bug so much as a race condition related to RN's processing of state updates and the native components created from them. I guess there could be a bug there, but anyway, this is my experience and perhaps an elaboration on the setTimeout() (with no timeout) workaround.

[ChasePwn14]

This is happening on RN 0.70.12 as well.

[zbranevichfinstek]

same issue

[acarkaan]

same in here

[PraneethGunas]

+1

[7dp]

hi @luccaroli , would you mind to share your approach of solving this issue using useIsFocused hook?

[luccaroli]

actually I can only solve it with settimeout @7dp :/

[PraneethGunas]

The problem in my case was that a modal from "react-native-modal" was being rendered on top of another rendered modal (from a different lib). Once I replaced the "react-native-modal" with the one from another UI lib it worked just fine.

[salman-ar-sar]

The problem in my case was that a modal from "react-native-modal" was being rendered on top of another rendered modal (from a different lib). Once I replaced the "react-native-modal" with the one from another UI lib it worked just fine.

I'm getting this error when using the Modal component provided by React Native.

[emilcieslar]

The crash happened when we tried to hide the modal window and navigate with react-navigation to another page simultaneously, which is almost always reproducible in my case, could you tag me if any additional info is needed?

as a weird workaround - setTimeout

setTimeout might work in a situation where you navigate explicitly, however, if the react-navigation navigates under the hood implicitly based on various actions (for example, one screen gets removed based on certain conditions and thus react-navigation navigates to another one implicitly), there's no way for me to use the setTimeout workaround. I'm facing the exact same issue with navigating while showing a modal and I still haven't found any workaround. I must hide the modal way before the navigation starts, which makes the UI less pretty.

[Hmoulvad]

For me the issue appeared when I tried to navigate to another screen, while the Modal I have is present. So what I did to fix this was moving the code navigating to a screen, to the OnModalHide function, so it happens after the Modal is closed. Hope it helps you guys.

[salman-ar-sar]

For me the issue appeared when I tried to navigate to another screen, while the Modal I have is present. So what I did to fix this was moving the code navigating to a screen, to the OnModalHide function, so it happens after the Modal is closed. Hope it helps you guys.

But is that an accepted behaviour? This should be a bug right?

[rvasseur31]

In my case, it was because I set isVisible to false in the finally block of the try/catch and in the try block, I navigated to another screen with react navigation

[ashadnasim52]

I had face this issue multiple times need to set timeout and it never came in the emulator

[ramyareye]

something like this can help

const first = () => {
    setShowModal(false);

    setTimeout(() => {
      then();
    }, 1000);
  };

[gkasireddy202]

I facing this issue on react-native:0.73.7