Adding Facebook SDK to a React Native App for iOS
Tags: facebooksdk, reactnative, ios
Published: 2021-03-20 19:37:05

---
title: Adding Facebook SDK to a React Native App for iOS
published: true
description:
tags: Facebooksdk, Reactnative, iOS
//cover_image: https://direct_url_to_image.jpg
---

Facebook announced that they ended support for Facebook SDK for React Native in this [article](https://developers.facebook.com/blog/post/2021/01/19/introducing-facebook-platform-sdk-version-9/). They claim that community is good enough to maintain this SDK. This version of [README](https://github.com/facebook/react-native-fbsdk/blob/b791efe311a47fd070d1348434c41e30db953ec2/README.md) 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](https://github.com/facebook/react-native/releases)

**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](https://developers.facebook.com/docs/ios/getting-started/?sdk=cocoapods) 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](https://developers.facebook.com/docs/ios/getting-started/?sdk=cocoapods):
* 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](https://github.com/facebook/react-native-fbsdk/issues/770#issuecomment-653032031) and it suggest to take a look at the [example](https://github.com/facebook/react-native-fbsdk/blob/master/example/ios/RNFBSDKExample/AppDelegate.m)

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](https://github.com/facebook/react-native-fbsdk/issues/794#issuecomment-695217977).

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.