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.

Answer 1

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

Answer 2

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.

Answer 3

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

1. location: PRODUCT_NAME/product_name/AppDelegate.m
2. 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)

Answer 4

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;
}