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

Question

I get this in logs:

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

This is leading to an issue where the rendered content in React leads to alignment issues.

(See attached screenshot 1) Screenshot with Issue

This occurs randomly as all screens do not show alignment issues.

(See attached Screenshot 2) Screenshot without issue

I have used styled-components for Layout:

return(
  this.props.lastComponent ?
  <CommentList marginLeft={this.props.marginLeft}>
    <CommentUserPicWrapper imageWidth={this.props.imageWidth}>
      {this.props.imageType === 'URL' ? <CommentUserPic source={{uri:this.props.uri}} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/> : <CommentUserPic source={require('../../img/defaultProfPic.png')} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/>}
      {
        this.state.loading ? null : <ActivityIndicator style={{position:'absolute'}}/>
      }
    </CommentUserPicWrapper>
    <CommentDetails borderStatus={true} marginLeft={this.props.marginLeft}>
      <CommentUserName>{this.props.userName} says</CommentUserName>
      <CommentUserContent>{this.props.UserContent}</CommentUserContent>
      <CommentUserDate><Text>{this.props.commentDate}</Text> at <Text>{this.props.commentTime}</Text>MST</CommentUserDate>
    </CommentDetails>
    <CommentReply onPress={this.replyClicked} borderStatus={true} underlayColor='transparent'>
      <CommentReplyText>Reply</CommentReplyText>
    </CommentReply>
  </CommentList>
  :
  <CommentList marginLeft={this.props.marginLeft}>
    <CommentUserPicWrapper imageWidth={this.props.imageWidth}>
      {this.props.imageType === 'URL' ? <CommentUserPic source={{uri:this.props.uri}} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/> : <CommentUserPic source={require('../../img/defaultProfPic.png')} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/>}
      {this.state.loading ? null : <ActivityIndicator style={{position:'absolute'}}/>}
    </CommentUserPicWrapper>
    <CommentDetails borderStatus={this.props.borderStatus} marginLeft={this.props.marginLeft}>
      <CommentUserName>{this.props.userName} says</CommentUserName>
      <CommentUserContent>{this.props.UserContent}</CommentUserContent>
      <CommentUserDate><Text>{this.props.commentDate}</Text> at <Text>{this.props.commentTime}</Text>MST</CommentUserDate>
    </CommentDetails>
    <CommentReply onPress={this.replyClicked} borderStatus={this.props.borderStatus} underlayColor='transparent'>
      <CommentReplyText>Reply</CommentReplyText>
    </CommentReply>
  </CommentList>
)

Thanks.

@DhavalJardosh Have shared the render method I have used in the Code — sajin nambiar, Aug 31 '17 at 19:05
Did you ever figure this one out? For me, setting `inlineRequire` to true fixes it but causes other errors — Ryker, Aug 11 '21 at 18:25

Florin Dobre · Answer 1 · 2021-10-05T13:13:54.453

I fixed it with updating AppDelegate.m as below:

   #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:@"<AddYourAppNameHere>"
                 initialProperties:nil];
   //...
   }

Source: grossingdev's answer Dec 10, 2017 from: https://github.com/facebook/react-native/issues/16376

Is this solving the cause of the warning is it masking it for development builds? — SamB, Feb 18 '20 at 00:22

score 14 · Answer 2 · answered Jan 29 '22 at 13:55

14

Add this line right after you import AppDelegate.h

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

And then in the implementation of AppDelegate right before RCTRootView add the below lines:

#if RCT_DEV
[bridge moduleForClass:[RCTDevLoadingView class]];
#endif

Rebuild the app now. The error should be gone.

For further reference, visit here.

answered Jan 29 '22 at 13:55

Dibyajyoti Mishra

456
5
13

worked for me using RN 0.62.2 – Stanislau Buzunko Dec 16 '22 at 03:19
doesn't work any longer after upgrading to 0.63.5 – Stanislau Buzunko Jul 15 '23 at 01:52

score 6 · Answer 3 · answered Nov 30 '21 at 19:48

some answers corrected but not clearly for somebody read. Because Delegate.h not easy for newbie

location: PRODUCT_NAME/product_name/AppDelegate.m
Edit that file carefully because if you wrong anything that will build fail or sometime when you reload your project will be build fail (so must be carefully): in first file after #import "AppDelegate.h"

#import "AppDelegate.h"

// Add this

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

add Before RCTRootView *rootView =

// add this

#if RCT_DEV
[bridge moduleForClass:[RCTDevLoadingView class]];

#endif //-------------------
RCTRootView *rootView = .... (your default code)

score 3 · Answer 4 · answered Mar 11 '21 at 15:25

When using React Native Navigation, modify your AppDelegate.m file like this:

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

// ...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];

// Add this
#if RCT_DEV
  [[ReactNativeNavigation getBridge] moduleForClass:[RCTDevLoadingView class]];
#endif
  
  return YES;
}

Can you add an explanation and/or source? – Christopher Regner Jul 01 '21 at 14:58 — Christopher Regner, Jul 01 '21 at 14:58

score 1 · Answer 5 · answered Jun 01 '20 at 17:05

Swift Solution

let bridge = RCTBridge(bundleURL: jsCodeLocation, moduleProvider: nil, launchOptions: nil)

#if RCT_DEV
bridge?.module(for: RCTDevLoadingView.self)
#endif
let rootView = RCTRootView(bridge: bridge!, moduleName: "AppMain", initialProperties: nil)

score 1 · Answer 6 · answered Jan 30 '21 at 23:09

    If you just connect your app to a Firebase instance. then update your AppDelegate.m with 
   (in Objective C)  - (BOOL)application:(UIApplication *)application customDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     if(![FIRApp defaultApp]){
        [FIRApp configure];}}
    } 
    instead of just adding [FIRApp configure];

(in Swift) func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
      [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    if FirebaseApp.app() == nil {
        FirebaseApp.configure()
    }
    return true
  }

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

6 Answers6

Linked