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.

[ChaseLavsa]

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 :/