Using the Facebook SDK with React-Native

This weekend I wrangled with the Facebook SDK for React-Native and will tell you my story.

Why

So, you want to use the cool Facebook Login feature in your app to minimize the data entry your users have to do on a signup, while maximizing the data you extract from your users at registration. (I don't judge!)

Also, you want to do all this within a React-Native application, because you know nothing about Objective-C or Swift.

What

For this, Facebook created two SDKs.

First The Facebook SDK for iOS and second The Facebook SDK for React-Native.

The last one is basically a wrapper for the first one (and the Android one, which I didn't use)

How

The fact that the RN SDK just wraps the iOS SDK means, that only the RN SDK is aware of, well, React-Native.

This implies, that you can install the RN SDK simply by running yarn add react-native-fbsdk and then react-native link react-native-fbsdk, but it doesn't do nothing for you then.

The iOS SDK is installed like an iOS SDK is installed, I guess? I never installed one before...

Facebook gives you a nice step by step tutorial for this. This is pretty complete, besides two problems.

-- EDIT --

I extracted the files into ios/Frameworks via Finder.

Then I opened xCode and dragged them into the Frameworks folder of xCode and DEselected copy items if needed

-- EDIT --

First, it wants you to not select copy items if needed, which didn't work for me.

Second, it requires you to extract the files to ~/Documents/FacebookSDK, which seemed a bit strange to me. Why not in the project directory, like the node_modules? Also, why in the Documents directory specifically? Seemed suspicious to me right from the start...

Working through the step-by-step guide got the iOS SDK working, even tho I copied the SDK into my project directory instead of the Documents. I got my app events and all was good, but the moment I linked the RN SDK things blew up.

Suddenly I couldn't build anymore, because my FBSDKCoreKit.h couldn't be found.

When I unlinked the RN SDK, everything worked again.

So what was going on...?

node_modules/react-native-fbsdk/ios/RCTFBSDK.xcodeproj/project.pbxproj:366

FRAMEWORK_SEARCH_PATHS = (
  "~/Documents/FacebookSDK",
  "$(PROJECT_DIR)/../../../ios/Frameworks",
);

BAM!

Turns out, when I linked the RN SDK, it would override some settings I made for the iOS SDK in xCode.

Somewhere deep inside the react-native-fbsdk npm module was a file, that had two hardcoded paths.

So, seems that someone wanted the step-by-step guide to work and added the path from it, but luckily they also added a path relative to the project.

So, I removed the iOS SDK from xCode again, copied the frameworks from the archive into the ios/Frameworks directory of my React-Native project and added them again.

Conclusion

Seems like a simple task you could accomplish in a few hours, if it wasn't for the fact that I searched for 3 days till I found the hardcoded paths, haha.

Anyway, what was learned?

If things break, go step by step, look if something breaks after one step.

Also, read more source code of the libraries you use, this is often much more helpful than Stackoverflow