FBSDK: Cannot read property loginwithreadpermissions of undefined

Question

I'm setting up a React Native project using the FBSDK for login purpose.

Here's what I've done so far:

1. I ran npm install react-native-fbsdk --save
2. I ran react-native link
3. I followed each step mentioned there: https://developers.facebook.com/docs/facebook-login/ios/
4. I double checked using this video: https://www.youtube.com/watch?v=rAXVKapP5cM

However, I still get this red screen error:

Cannot read property logInWithReadPermissions of undefined at FBLoginManager.js, line 77 (https://github.com/facebook/react-native-fbsdk/blob/master/js/FBLoginManager.js)

Here's my AppDelegate.m content:

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

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

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

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

  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];


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

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


- (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

Here's my linked frameworks and binaries:

EDIT: on my project:

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

Plus:

_onFBButtonPress () {
    LoginManager.logInWithReadPermissions(['public_profile']).then(
      function(result) {
        if (result.isCancelled) {
          alert('Login cancelled');
        } else {
          alert('Login success with permissions: '
            +result.grantedPermissions.toString());
        }
      },
      function(error) {
        alert('Login fail with error: ' + error);
      }
    );
  }

And:

<Button onPress={() => this._onFBButtonPress()} buttonStyle={'buttonFb'} labelStyle={'buttonFbText'} label={I18n.t('Login.btnConnectFB')}></Button>

What do I miss?

Answer 1

I just resolved the same error. For some reason "react-native link react-native-fbsdk" had finished for Android but not ios.

rnpm-install info Android module react-native-fbsdk is already linked rnpm-install info Linking react-native-fbsdk ios dependency rnpm-install info iOS module react-native-fbsdk has been successfully linked

Try rerunning and make sure you are linking with libRCTFBSDK.a

Answer 2

Following @Greg Cockroft's answer, I've noticed that I was not being able to include "libRCTFBSDK.a" on my project's "Link Binary With Libraries" because I was not including the "RCTFBSDK" library project.

So if you are on same situation do the following missing steps:

1. Add (or drag using Finder) "/node_modules/react-native-fbsdk/ios/RCTFBSDK.xcodeproj" under your Xcode project "Libraries" group.
2. Build "RCTFBSDK.xcodeproj" or your entire project.
3. Add "libRCTFBSDK.a" on your project settings, under "Link Binary With Libraries".
4. Compile/run your app. Now if you have the right JS login code, you should be able to login via Facebook's screen.

Answer 3

solved by adding to metro.config.js. And make sure you have installed metro-config

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
    resolver: {
        blacklistRE: blacklist([
            /node_modules\/.*\/node_modules\/react-native\/.*/,
        ])
    },
};

Answer 4

Once you did this:

npm install react-native-fbsdk --save
react-native link

Download latest FacebookSDK to your ~/Documents folder.

Unzip it to ~/Documents/FacebookSDK/

Then rebuild in XCode.

Works for me.

Answer 5

Use the function LoginManager.logInWithPermissions(['public_profile', 'email']);