How to link React Native Facebook SDK using CocoaPods?

As a software engineer in a growing startup, one of my tasks was to setup a new React Native project using the latest version of React Native and to link the latest FBSDK version in the iOS and Android.

I tried following the FBSDK documentation but it didn’t seem to lead to a working result on iOS.

After a stressful week working on that task I ended up copying libraries and binding others, but nothing worked. Until I decided to close the FBSDK documentation, and try to figure it out myself.

If you’re still reading, then you’re probably struggling with the same thing.

Let’s do this !

We will assume that you created AwesomeProject using this command:

react-native init AwesomeProject

1- if you don’t have pods installed in your Mac, run this command:

$ brew install cocoapods

2- Check out how to integrate CocoaPods with your React Native app here, to avoid issues related to React Native and have a clear and working environment.

3- Run the app from the Awesome.xcworkspace project, to make sure everything is fine. The .xcworkspace project is located in the ios directory in your project. You can open it using this command

open ios/AwesomeProject.xcworkspace

4- Add this line to your Podfile

pod 'react-native-fbsdk', :path => '../node_modules/react-native-fbsdk'

5- Run this in your ios directory:

pod install

6- open AppDelegate.m from xcode. Check the image to find it easily

and add these 3 lines to the import section

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
#import <FBSDKShareKit/FBSDKShareKit.h>

Then add this line to the beginning of the didFinishLaunchingWithOptions function:

[[FBSDKApplicationDelegate sharedInstance] application:application
 didFinishLaunchingWithOptions:launchOptions];

If you do not have a didFinishLaunchingWithOptions in your AppDelegate.m then add the following :

- (BOOL)application:(UIApplication *)application
 didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 [[FBSDKApplicationDelegate sharedInstance] application:application
 didFinishLaunchingWithOptions:launchOptions];
 return YES;
}

and add this function

- (BOOL)application:(UIApplication *)application
 openURL:(NSURL *)url
 options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
 openURL:url
 sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
 annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
 ];
 // Add any custom logic here.
 return handled;
}

If you want to use FB App events then add this too

- (void)applicationDidBecomeActive:(UIApplication *)application {
 [FBSDKAppEvents activateApp];
}

7- FINALLY, go to the info.plist and add your facebook app keys, like this:

<key>CFBundleURLTypes</key>
<array>
 <dict>
 <key>CFBundleURLSchemes</key>
 <array>
 <string>fb{your-app-id}</string>
 </array>
 </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
 <string>fbapi</string>
 <string>fb-messenger-api</string>
 <string>fbauth2</string>
 <string>fbshareextension</string>
</array>

You can find your keys by accessing this link: https://developers.facebook.com/apps

And that’s it you are DONE ! 🎉

And you are ready to start using your app with react-native-fbsdk 😃

Not only that, you are ready to give the app to anyone and be sure that it will work on their setup! 😃

Thanks for reading, hope that helps !