React-native: invariant violation: Native component for RCTFBLoginButton does not exist this error is located at: in RCTFBLoginButton

[VGamezz19]

Is this a bug report?

Yes I think this is a real BUG...

Have you read the Contributing Guidelines?

NO

Environment

OS:  macOS Sierra 10.13.3
Node:  ya8.9.4
Yarn:  1.3.2
npm:  5.6.0
Watchman:  4.9.0
Xcode:  9.2    
Packages: (wanted => installed)
react-native: 0.53.0
react:  16.2.0
Target Platform: iOS (10.3)

Steps to Reproduce

(Write your steps here:)

1. react-native install react-native-fbsdk and then react-native link react-native-fbsdk

2. Follow ALL STEPS from Quickstart IOS (⚠️ With-out the last STEP, becous the test of integration is with the react-native-fbsdk package)

3 . Then I put this code for testing my wonderful SDKLoginFacebook for React-Native.

import React from 'react';
import { StyleSheet, Alert, View } from 'react-native';

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
  AccessToken
} = FBSDK;

export default class Login extends React.Component {
    render() {
        return (
            <View>
              <LoginButton
                publishPermissions={["publish_actions"]}
                onLoginFinished={
                  (error, result) => {
                    if (error) {
                      alert("login has error: " + result.error);
                    } else if (result.isCancelled) {
                      alert("login is cancelled.");
                    } else {
                      AccessToken.getCurrentAccessToken().then(
                        (data) => {
                          alert(data.accessToken.toString())
                        }
                      )
                    }
                  }
                }
                onLogoutFinished={() => alert("logout.")}/>
            </View>
          );
    }
}

1. Ejecute react-native run-ios

2. then, EXPLOTE with this error --> invariant violation: Native component for RCTFBLoginButton does not exist this error is located at: in RCTFBLoginButton at FBLoginButton.js:112

NEED HELP!

[rumur]

I've faced the same issue today.

[terranball]

same here

[VGamezz19]

This is a madness 🤯... I have other project with v0.52 and works ! i'm really thing there is a problem between RN and compatibility from the package.

[arielalvarez88]

+1

[CarlosOrozc]

how do i solve this error?

[VGamezz19]

@CarlosOrozc we don't know bro, for that we are here jaja

[VGamezz19]

Hello there!
I don't know why, but, I was try it agains and now works!!! 🎉 The only different that I have done:

1. reinstalling react-native install react-native-fbsdk && react-native link react-native-fbsdk

2. follow the quicks steps from ios ⚠️ when tutorial tell you that modify your AppDelegate.m, please copy this ⬇️

AppDelegate.m

#import "AppDelegate.h"

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


@implementation AppDelegate

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  NSURL *jsCodeLocation;

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

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"PasaLoYa"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                        openURL:url
                                              sourceApplication:sourceApplication
                                                     annotation:annotation];
}
@end

1. Test your LoginButton from react-native-fbsdk 😄 🎉

[CarlosOrozc]

Apparently the problem was the sdk versions, I do not know why motive was taking several versions.

reinstall dependencies and solve the problem

[susegroj]

@VGamezz19 I still don't know what kind of black magic was that but I had the same issue, but following your steps, it's really working know, after a week of researching and testing.

Thanks man

[alittletf]

I had this issue too and I followed the steps to manually link the react-native-fbsdk lib in xcode and everything worked great. Just make sure to rebuild the app in xcode after making the changes. You can find the official documentation here https://facebook.github.io/react-native/docs/linking-libraries-ios.html

[jseyfert]

quit the Metro Bundler, and react-native run-ios again

[xe4me]

for me this fixed it

Open your application's Xcode project.
If you don't have a Frameworks group in your project, create one.
Open ~/Documents/FacebookSDK using Finder.
Drag the Bolts.framework, FBSDKCoreKit.framework, FBSDKLoginKit.framework, and FBSDKShareKit.framework files into the Frameworks group of Xcode's Project Navigator. When prompted, select "Copy items if needed" and continue.

[dafapramudya]

@VGamezz19 Hi VGamezz, how about android? i get an error too. Pls help me

[VGamezz19]

@dafapramudya but with the same version of React Native?

[RodrigoRMG]

any solution in android? I'm getting same error :/

[izotx]

Same crap. What a nightmare.

[tquiroga]

I have Invariant Violation: requireNativeComponent: "RCTFBLoginButton" was not found in the UIManager., I've tried a few 'solutions', not much result.

[diegommiranda]

Same problem in android =/

RN: 0.55.4
RNFSDK: ^0.7.0

[Ross-Landry]

@tquiroga did you find a real solution? I'm getting that same error

[hussainahmad]

Any Solution for Android facing the same issue I just learning the react native and run demo code face this issue.

"react": "16.5.0",
 "react-native": "0.57.0",`
"react-native-fbsdk": "^0.8.0",

[borgogelli]

+1

[nsdonev]

Did everything listed above, none of it actually works for me.
react-native": "0.56.0" react": "16.4.1" react-native-fbsdk": "^0.8.0"

[nsdonev]

The only way I managed to make it work is showcased here https://www.reddit.com/r/reactnative/comments/8f2txr/fb_sdk_invariant_violation_native_component_for/

[calvintts]

I am still facing the same error until now. I did everything above. None of them work. Please help

[hello-ring]

I have Invariant Violation: requireNativeComponent: "RCTFBLoginButton" was not found in the UIManager., I've tried a few 'solutions', not much result.

Me Too

[bnuby]

Unhandled JS Exception: Invariant Violation: Invariant Violation: requireNativeComponent: "RCTFBLoginButton" was not found in the UIManager.
me too

[trickeyd]

I'm it too.

Facebook code running Facebook code...

Surely someone on the RN team can get to the bottom of this!?

[rach-m]

Having the same issue!!

[heyman333]

I think react-native link is really unstable 😔
In my case, many problems solved by linking manually
I recommend to refer this explanation

https://github.com/lakshmantgld/react-native-fbsdk-example/blob/master/readmeFiles/fbsdkXcode.md

But, just Ignore react-native link react-native-fbsdk in the explanation above.
And add RCTFBSDK.xcodeproj to your project's Library and libRCTBSDK.a to project's Link Binary With Libraries

Everything is done perfectly

[mks11]

Same issue!

[manojsinghnegiwd]

I am facing the same issue any updates on this.

[meskz]

Same issue here.
Any solutions?
Any workarounds?

[jayjac]

Linking manually was the solution for me. Lately automatic linking has not worked too well on most libraries for some reason.
Did exactly what heyman33 said and it worked immediately afterwards.
It's only two steps and it's worth learning since it saves you a lot of time in many cases.

BTW: Then I had a crash as soon as I pressed the login button, and thanks to some other forum, I simply had to change "publishPermissions" to "readPermissions" in the LoginButton props.

[meskz]

Thanks jayjac. Will try it.

[rach-m]

I actually figured it out! I wrote a Medium article outlining the steps I needed to take - manual linking was the answer!

https://medium.com/@rachieb19/struggles-with-react-native-link-1f1738076472

[killboard]

The solution for me was to perform the configuration steps manually according https://developers.facebook.com/quickstarts/931417137057288/?platform=ios

Auto install with js script not works :'(

[eran-or]

Illusion, I have two simulators running. one of Xcode and one of react-native run-ios. in the Xcode simulator everything running, but in react-native run-ios simulator I get this error, so I closed both and reopen the react-native simulator and everything is works fine now, no errors.