Getting react-native-fbsdk to work with CocoaPods

Question

I've been trying to get react-native-fbsdk to work with CocoaPods, since I much prefer fetching the Facebook SDK as part of the pod install process, but I haven't had much luck. I'm aware that I can react-native link the npm library and manually download and add the necessary frameworks, but this seems rather silly when I have a perfectly good package manager at my disposal.

Judging by the documentation it should be fairly straight forward - just add the necessary pods to the Podfile, right? But no matter what I try the native FBSDK modules never seem to be included. I've tried a whole host of different Podfiles, some with use_framework! and pod 'Bolts', some with just pod 'FBSDKCoreKit'. This is the one I'm currently on:

target 'FacebookPods' do
  pod 'FBSDKCoreKit'
  pod 'FBSDKShareKit'
  pod 'FBSDKLoginKit'

  target 'FacebookPodsTests' do
    inherit! :search_paths
  end
end

But when I run my test app and try to do anything with the react-native-fbsdk module I get errors complaining about various native modules being undefined. Here's my index.ios.js file, trying to access the LoginManager:

import React, {Component} from "react"
import {AppRegistry, Text} from "react-native"
import {LoginManager} from "react-native-fbsdk"

export default class FacebookPods extends Component {
  componentWillMount() {
    LoginManager.logInWithReadPermissions(["email"])
      .then(() => console.log("Success!"))
      .catch((err) => console.log("Failure!", err))
  }

  render() {
    return <Text>Hello World</Text>
  }
}

AppRegistry.registerComponent("FacebookPods", () => FacebookPods)

But this throws the error undefined is not an object (evaluating 'LoginManager.logInWithReadPermissions' in FBLoginManager.js. Further inspection of NativeModules shows that no native FBSDK modules are included at all. I also get the following warnings at launch:

2017-07-13 19:50:19.006 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBLikeView" does not exist
2017-07-13 19:50:19.007 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBLoginButton" does not exist
2017-07-13 19:50:19.008 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBSendButton" does not exist
2017-07-13 19:50:19.009 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBShareButton" does not exist

So yea, I'm at a complete loss. In my mind, simply adding the pods ought to be enough to include the frameworks. I've scoured the interwebs for any additional steps that I might've missed, but there isn't much, save for a few issues on the react-native-fbsdk project that have since then been removed.

Answer 1

I encountered this issue and managed to get react-native-fbsdk working with the Facebook SDK installed by adding the following to my pod file:

pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'

and importing the following in AppDelegate.m:

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKShareKit/FBSDKShareKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>

Note that these imports are different from the suggestion in the react-native-fbsdk readme. That's because FBSDKCorekit.framework, FBSDKShareKit.framework and FBSDKLoginKit.framework are not available.

You also need to link libFBSDKShareKit.a, libFBSDKCoreKit.a and libFBSDKLoginKit.a from the General tab in Xcode. These are the only three Core/Login/Share things available to link. They refer to the pods, and looking in the pods directory you see there are no .framework files, just .h files, so those are the ones we import into AppDelegate.m. That (I think) gives react-native-fbsdk all the files in the the SDK components that it needs.