React native - Application tried to present modally a view controller

Question

I got this error when i try to build ios.

Thread 1: "Application tried to present modally a view controller <UIViewController: 0x7f9e930adc80> that is already being presented by <UIViewController: 0x7f9e9330d480>."

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];
#if defined(FB_SONARKIT_ENABLED) && __has_include(<FlipperKit/FlipperClient.h>)
  InitializeFlipper(application);
#endif
  
  self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]];
  self.launchOptions = launchOptions;
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  #ifdef DEBUG
    [self initializeReactNativeApp];
  #else
    EXUpdatesAppController *controller = [EXUpdatesAppController sharedInstance];
    controller.delegate = self;
    [controller startAndShowLaunchScreen:self.window];
  #endif

  [super application:application didFinishLaunchingWithOptions:launchOptions];

  return YES;
}

Answer 1

You can checkout my answer here

adding stuff here for ease,

We were using react-native-loading-spinner-overlay (we will call it Spinner) to show the progress bar, which internally uses Modal when we were transitioning from one screen to another we were not hiding the Spinner that lead to this issue.

Just hiding the Spinner & giving some delay before navigation it worked.

So in general if our code is trying to show one modal over other then we get into such issues, in react-native it is quite hard to find as we will have to see the lib code to understand if that is using modal.

Answer 2

Check also if the facebook/react-native issue 37198 applies in your case.

이인 (Rengod95) just added (Aug. 2024):

I had faced same issue until know on 24/08/19 RN 0.74.4, with React-Native-Element-Dropdown, React-native-google-mobile-ads

I think this is a problem with rendering life cycle between React and IOS

If you try to render a nested View Controller (On Ios) this issue occur.

In my case the error code looks like this :

Attempt to present <RCTRedBoxController: 0x13a57ede0> on <UIViewController: 0x11d609580> (from <UIViewController: 0x11d609580>) which is already presenting <RCTModalHostViewController: 0x12ebbe380>.

so the simple solution this problem is control rendering order. JS Native API like setTImeout or queueMicroTask after close modal or something like it.

// ex)

onChange={item => {
                  store.setFromCurrencyMeta(item);
                  fromDropdownRef.current?.close();

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

Note that, on the setTimeout workaround, Emil Cieslar was commenting in Q3 2023:

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.