RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

[antoinerousseau]

I randomly get this warning at iOS app start (i.e. not always).

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

OS: macOS Sierra 10.12.6 Node: 6.10.2 Yarn: 1.0.2 npm: 5.4.2 Watchman: 4.7.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: 2.1 AI-143.2915827

Packages: (wanted => installed) react: ^16.0.0 => 16.0.0 react-native: ^0.49.3 => 0.49.3

Steps to Reproduce

1. Start the app

   Expected Behavior

No warning

Actual Behavior

Reproducible Demo

N/A

Some packages I use

https://github.com/antoinerousseau/react-native-custom-components https://github.com/rebeccahughes/react-native-device-info https://github.com/evollu/react-native-fcm https://github.com/gwmccull/react-native-polyfill https://github.com/getsentry/react-native-sentry

[safaiyeh]

@sospedra could you provide a repo of this happening with React Native template without any external dependencies?

For the cases where it happens with third party libraries, issues should be filed with those libraries

[a-eid]

same issue on 0.63.2 I'm not sure what is causing it, it happens randomly sometimes all interactions of the app is no longer working.

[LionelHoudelier]

Same warning comes only with react-native-macos on Metro (manual) reloads, not on code changes updating, and not with ios, android, or windows. NB : for me with RN 0.62.2

[exotexot]

Got the same warning with a Catalyst App.

[anandchakru]

I closed the simulator, killed metro, in XCode build and run Warning disappeared !

[erandak]

Closing the metro bundler and uninstalling the app from the simulator disappeared the warning. But not sure what's happening under the hood. warning appeared after adding thunk package.

[chrisozgo99]

I was able to workaround the warning by updating AppDelegate.m

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                            moduleProvider:nil
                                             launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Test"
                                            initialProperties:nil];
  ...
}

this workaround solved the warning. Thank you very much.

For anyone using this solution, if your xcode crashes and throws an error at initWithBundleURL: jsCodeLocation, substitute jsCodeLocation =

[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.js" fallbackResource:nil]

https://stackoverflow.com/questions/43193418/native-view-presenting-a-react-native-view

This solved the issue for me

[unixvb]

If you are getting one of these errors:
RCTBridge required dispatch_sync to load RCTDevLoadingView Use of undeclared identifier 'jsCodeLocation' Use of undeclared identifier 'RCTDevLoadingView'

Here's a full solution: Update the app-name/ios/AppName/AppDelegate.m file with following

1. 
   #import "AppDelegate.h"

// NEW CODE

// put this condition after AppDelegate.h import

if RCT_DEV

import <React/RCTDevLoadingView.h>

endif

// END

import <React/RCTBridge.h>

import <React/RCTBundleURLProvider.h>

import <React/RCTRootView.h>

...

2.

• (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { // NEW CODE

  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.js" fallbackResource:nil];

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];

  if RCT_DEV

  [bridge moduleForClass:[RCTDevLoadingView class]];

  endif

  // END

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"TempleWallet" initialProperties:nil]; ...

[Mullet075]

I had this issue when an image i put in a file with a certain ending(.jpg) when i changed it to (.jpeg) the problem went.

[aarononeal]

Onboarding to RN and was surprised to hit this long-term bug. Every new project has to fix this?

[anabeatrizzz]

@unixvb in which file I have to write this code, please?

[unixvb]

@unixvb in which file I have to write this code, please?

app-name/ios/AppName/AppDelegate.m

[biomancer]

If that would help someone I was using react-native 0.64.0 with flipper setup with versions like that in Podfile:

use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })

I had no luck applying the fix that is suggested above getting error "Use of undeclared identifier 'RCTDevLoadingView'" and what's worked for me is downgrading flipper, changing that line to:

use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')

[Marka-Ragnos]

The same problem I have

[tbanj]

For me I make use of react-native-firebase in my application but you can still make use of the instruction below is how inserted code reference from @unixvb thanks

step 1: I updated react-native-navigation node package run below commands npm uninstall react-native-navigation --force npm install react-native-navigation npx rnn-link

step 2: Edit AppDelegate.m file with below sample file as guide

// AppDelegate.m file

`#import

import "AppDelegate.h"

// New Code start // put this condition after AppDelegate.h import to solve RCTBridge required dispatch_sync to load lead to deadlock

if RCT_DEV

import <React/RCTDevLoadingView.h>

endif

// New Code end

import <ReactNativeNavigation/ReactNativeNavigation.h>

import <React/RCTBundleURLProvider.h>

if DEBUG

import <FlipperKit/FlipperClient.h>

import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>

import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>

import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>

import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>

import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication application) { FlipperClient client = [FlipperClient sharedClient]; SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client addPlugin:[FlipperKitReactPlugin new]]; [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; [client start]; }

endif

@implementation AppDelegate

// New Code start

if RCT_DEV

import <React/RCTDevLoadingView.h>

endif

// New Code end

• (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions {

  if ([FIRApp defaultApp] == nil) { [FIRApp configure]; }

  if DEBUG

  InitializeFlipper(application);

  endif

  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];

// New Code start NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.js" fallbackResource:nil];

RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];

if RCT_DEV

[bridge moduleForClass:[RCTDevLoadingView class]];

endif

// New Code end

return YES; }

• (NSURL )sourceURLForBridge:(RCTBridge )bridge {

  if DEBUG

  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  else

  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  endif

  }

• (NSArray<id> )extraModulesForBridge:(RCTBridge )bridge { return [ReactNativeNavigation extraModulesForBridge:bridge]; }

@end `

step 4: your Podfile insert below script use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })

step 3: pod install --project-directory=ios

step 4: npx react-native run-ios

[tbanj]

For me I make use of react-native-firebase in my application but you can still make use of the instruction below is how inserted code reference from @unixvb thanks

step 1: I updated react-native-navigation node package run below commands npm uninstall react-native-navigation --force npm install react-native-navigation npx rnn-link

step 2: Edit AppDelegate.m file with below sample file as guide

// AppDelegate.m file

`#import

import "AppDelegate.h"

// New Code start // put this condition after AppDelegate.h import to solve RCTBridge required dispatch_sync to load lead to deadlock

if RCT_DEV

import <React/RCTDevLoadingView.h>

endif

// New Code end

import <ReactNativeNavigation/ReactNativeNavigation.h>

import <React/RCTBundleURLProvider.h>

if DEBUG

import <FlipperKit/FlipperClient.h>

import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>

import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>

import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>

import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>

import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication application) { FlipperClient client = [FlipperClient sharedClient]; SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client addPlugin:[FlipperKitReactPlugin new]]; [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; [client start]; }

endif

@implementation AppDelegate

// New Code start

if RCT_DEV

import <React/RCTDevLoadingView.h>

endif

// New Code end

• (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions {

  if ([FIRApp defaultApp] == nil) { [FIRApp configure]; }

  if DEBUG

  InitializeFlipper(application);

  endif

  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];

// New Code start NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.js" fallbackResource:nil];

RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];

if RCT_DEV

[bridge moduleForClass:[RCTDevLoadingView class]];

endif

// New Code end

return YES; }

• (NSURL )sourceURLForBridge:(RCTBridge )bridge {

  if DEBUG

  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  else

  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  endif

  }

• (NSArray<id> )extraModulesForBridge:(RCTBridge )bridge { return [ReactNativeNavigation extraModulesForBridge:bridge]; }

@end `

step 4: your Podfile insert below script use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })

step 3: pod install --project-directory=ios

step 4: npx react-native run-ios

[sergeymild]

The same problem I have

[leotm]

@aarononeal only the beginning of a long journey my friend

[ivantacca]

Add this in your /ios/YourAppName/AppDelegate.m, right after #import "AppDelegate.h"

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

[safaiyeh]

If you are getting one of these errors: RCTBridge required dispatch_sync to load RCTDevLoadingView Use of undeclared identifier 'jsCodeLocation' Use of undeclared identifier 'RCTDevLoadingView'

Here's a full solution: Update the app-name/ios/AppName/AppDelegate.m file with following

#import "AppDelegate.h"

// NEW CODE

// put this condition after AppDelegate.h import
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

// END

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // NEW CODE

  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.js" fallbackResource:nil];

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                              moduleProvider:nil
                                               launchOptions:launchOptions];
  #if RCT_DEV
   [bridge moduleForClass:[RCTDevLoadingView class]];
  #endif

  // END

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"TempleWallet"
                                            initialProperties:nil];
  ...

Feel free to open a PR for this!

[KrisLau]

If you are getting one of these errors: RCTBridge required dispatch_sync to load RCTDevLoadingView Use of undeclared identifier 'jsCodeLocation' Use of undeclared identifier 'RCTDevLoadingView'

Here's a full solution: Update the app-name/ios/AppName/AppDelegate.m file with following

#import "AppDelegate.h"

// NEW CODE

// put this condition after AppDelegate.h import
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

// END

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // NEW CODE

  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.js" fallbackResource:nil];

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                              moduleProvider:nil
                                               launchOptions:launchOptions];
  #if RCT_DEV
   [bridge moduleForClass:[RCTDevLoadingView class]];
  #endif

  // END

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"TempleWallet"
                                            initialProperties:nil];
  ...

Doing this seems to mess up expo unimodules for me. My error is coming from https://github.com/Andr3wHur5t/react-native-keyboard-spacer so I might just uninstall that

[haibert]

Guys i'm getting this in Expo v43. My app works in development with my custom dev client but crashes in production. Does anyone know what the solution is for expo users? id greatly appreciate any guidance. #14766

[mwegener-com]

same problem in expo dev client. @haibert do you have any solution?

[haibert]

@mwegener-com according to some people it is fixable modifying the App.Delegate.m. Mentioned by @safaiyeh for example. To modify this you can use the withAppDelegate from @expo/config-plugins to make the modifications. it'll look something like this.

// in your project root directory create filed named withIosAppDelegate.js 
const { withAppDelegate } = require('@expo/config-plugins')

const modAppDelegate = (content) => {
// modify content of AppDelegate.m here and return it, its basic string manipulation.
// you can also console.log things here to see your code is doing
    return content
}

module.exports = (config) => {
    return withAppDelegate(config, async (config) => {
// the line below will feed the content of the AppDelegate.m to your function made above ^ "modAppDelegate", from there you will conduct needed manipulations and return it.
        config.modResults.contents = modAppDelegate(config.modResults.contents)
        return config
    })
}

// in your app.js
{
    "expo": {
     ...
        "plugins": [
            "./withIosAppDelegate.js"
        ]
    }
}

then make sure you make a commit and run expo prebuild -p ios --clean this will apply your changes to the AppDelegate.m and if you are console logging things you will see your changes made if the changes are made correctly go ahead and build your new build and you are set.

trying to learn how to create a plugin by reading the expo docs is very confusing but I was taught by someone who knew how to use them and I hope this helps. Basically you are passed the content of the native file you need to manipulate as a string, and you must use regex or any means to do string manipulation and add or remove the lines of code you want, then simply return the string. docs

btw I have been able to avoid any problems by first launching the dev client on the simulator or my phone and THEN pressing i on my console to run the project, this way the dev client doesn't crash.. if this works for you you wont even need to do any of the step above..

[mwegener-com]

@haibert It wouldn't be my first config plugin, but have you already finished it and might share your solution?

[haibert]

@mwegener-com I have not created a config plug in because even though the warning comes I rarely get any crashes because of it. If you do create it I would appreciate the share

[vbylen]

I'm getting the same error

[fritzfr]

I have no idea what the meaning of the warning is, but this makes it go away:

https://amanhimself.dev/blog/rctbridge-required-dispatch-sync-to-load-warning/

[liquidvisual]

None of this works in 2022, on a fresh install of React Native 0.67.3

[billnbell]

0.67.3 this does not help. What does it mean?

[W-Lawless]

Hello,

Using "react-native": "0.64.3" I am seeing this issue after installing a native module (Agora Livestreaming SDK) and running expo run:ios Mac Monterey & Xcode 13.3

I added two string values to Info.plist for the enable mic/camera permission text.

Besides that I have no other modules in project, and only imported expo libraries such as blurview for basic layout features.

I am seeing this issue now on loading the app through Metro now that I am in a bare workflow

[l2aelba]

I'm from 2030 and this still does not fix. 😏

[Nziranziza]

I am experiencing the same issue as well

[YaoHuiJi]

... a new created 0.70.1 project has this issue too, it's funny, cause my 4 years old project doesn't have this issue.

I wonder is it safe to ignore this warning?

[github-actions[bot]]

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[bot]]

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