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.

Rutger

I'm not that knowledgeable about pods but do you need to provide a path? pod 'FacebookPods', :path => 'path/to/lib/' From my memory, Facebook had me install the SDK in ~/Documents so it may be an issue with downloading/finding the lib – Unbonnet

Maybe, I believe the FBSDK*Kit pods are also specified in the react-native-fbsdk package, which would be fine. But the whole idea is to avoid downloading and installing the SDK outside of the project and manually dragging in the frameworks. Did you get it to work using CocoaPods? – Rutger

No, we just did the manual install. This question talks about installing the normal FBSDK with pods https://mcmap.net/q/611767/-how-to-install-facebook-sdk-for-ios-using-cocoapods Not sure how RN complicates it though – Unbonnet

react-native-fbsdk includes native sources, if you import those with cocoapods the react-native module won't have the proper header search path thus cannot find the appropriate modules and that is why you have an error. – Benton

It can be tricky if your native project is in swift since facebook doesn't give a damn and don't test anything with swift projects, so you can expect the documentation to be 90% non accurate when it comes to swift – Benton

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.

Demirep

I don't see any of those libFBSDKXXXXKit.a to be added, only one is added and that's libRTCFBSDK.a. Is that fine? I'm using FBSDK 5.3.0 – Turd

Answer 2

It's working for me with my Podfile set up this way (not sure Bolts framework pod is needed):

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

And I had to do react-native link to make sure that the libRCTFBSDK.a is in the xcode's Build TARGET => build phrases => "Link Binary with libraries" list. If not, you probably need to add the libRCTFBSDK.a in manually. I found that once I ran the react-native link and the libRCTFBSDK.a is in that list, xCode then compiled correctly.

Fault

I think react-native-link should be react-native link – Udometer

I'm having this issue and I can see that there's no libRCTFBSDK.a in the link binary with libraries step. When I try to add it, I'm unable to see it in the list either. How do I get this file? – Nonparous

Answer 3

If you use cocoapods, react native will use cocoapods to link link libraries. I created a new project then install and link all packages before run 'pod init' and 'pod install'. Maybe this error from cocoapods when link packages. All packages need 'react-native link' you installed after run 'pod install' it not working. I think we can deintegate cocoapod before run react native link.

Belvia