Using the Facebook SDK with React-Native
Tags: facebook, javascript, reactnative
Published: 2017-06-04 13:32:08

---
title: Using the Facebook SDK with React-Native
published: true
description: How to get Facebook SDK running on a React-Native App
tags: facebook, javascript, 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_](https://developers.facebook.com/docs/ios) and second [_The Facebook SDK for React-Native_](https://github.com/facebook/react-native-fbsdk).

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](https://developers.facebook.com/docs/ios/getting-started#settings) 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