RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks
React NativeReact Native Problem Overview
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.
React Native Solutions
Solution 1 - React Native
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
Solution 2 - React Native
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.
Solution 3 - React Native
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
add Before RCTRootView *rootView =
> // add this
> #if RCT_DEV
>[bridge moduleForClass:[RCTDevLoadingView class]];
> #endif //-------------------
> RCTRootView *rootView = .... (your default code)
Solution 4 - React Native
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;
}
Solution 5 - React Native
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)
Solution 6 - React Native
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
}