Adding Facebook SDK to a React Native App for iOS

Derya Özgün Yalçın — Sat, 20 Mar 2021 19:37:05 +0000

Facebook announced that they ended support for Facebook SDK for React Native in this article. They claim that community is good enough to maintain this SDK. This version of README file of the repo says otherwise.

Recently I have been experimenting with the SDK to use Login function for a game that I am creating using React Native. Yes, I admit that this is a weird combination but time will show if it's worth it.

So, let's try to install Facebook SDK to the latest version of React Native. As of March 2021, this means: 0.64.0

First Step, the classic yarn add. The only step that is really up to date

yarn add react-native-fbsdk

(add -E if you want the exact/latest version).

Second Step, Link (Which is not relevant for latest version)
For iOS, we need to install the pods. The example command given is valid but, not recommended. React Native now recommends using npx.

npx pod-install

Third Step, Configuration. The documentation starts with a link to a Facebook Documentation and asks you to do the 3. and 4. steps. This is only valid if you have already got a Facebook App configured. And giving Step numbers for this documentation is not a clever solution because that documentation has two Step 2's.

For a Facebook App to be configured follow "Register and Configure Your App with Facebook" step of Facebook Documentation:

Create a Developer Account
Register your App

Now you can configure your Info.plist as described in "Configure Your Project" section.

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb[APP_ID]</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>[APP_ID]</string>
<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fbauth</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

Manage QueriesSchemes array as per your needs.

Now, you need to connect the App Delegate. For this, /ios/PROJECT/AppDelegate.m needs to be changed. Two changes are needed, didFinishLaunchingWithOptions and openUrl. But they made the explanation so vague that it is impossible to understand. In github issues section I found the best comment and it suggest to take a look at the example

In the file these are done:

Add #import <FBSDKCoreKit/FBSDKCoreKit.h>
Comment out or remove FlipperKit related code (this should be optional, not an expert move)
Add [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; line to didFinishLaunchingWithOptions
Add openURL to the end of file

Now it seems like you are done, but, your builds will fail. You will see the troubleshoot part and notice that you need to add a File.swift in your project folder. You will create the file but it will not work and you will need to search github issues again. You will come across this comment.

So, the file should be created using Xcode. And when it ask if you if you want to "Create Bridging Header". Click on "yes/accept/please" button immediately.

Now build and enjoy the Facebook SDK.

Hi, I'm Derya Ozgun Yalcin

Derya Özgün Yalçın — Thu, 25 May 2017 13:14:16 +0000

You can find me on GitHub as dozgunyal

Forem: Derya Özgün Yalçın

Adding Facebook SDK to a React Native App for iOS

Hi, I'm Derya Ozgun Yalcin