Hi fellow coders!
Recently we needed to show our react native app ads on different platforms like Facebook or Instagram so for that you must have FB SDK installed and configured in your app.

React Native FBSDK (Not Supported)

I came to know that Facebook dropped the support from the official wrapper library and created Facebook SDKs for Android and iOS instead. But if you are only a JS dev you won't understand the swift code mentioned in their iOS SDK and you'll get confused like me.

React Native FBSDK Next

Also, they gave us the way towards the alternative library react-native-fbsdk-next. So today I want to share how I installed and configured FB SDKs through this library.

Installation

npm command

npm install --save react-native-fbsdk-next

or yarn command

yarn add react-native-fbsdk-next

Linking

On the latest version of react-native it will link automatically for android.
for iOS, do this

cd ios/ && pod install

Configuration

First lets go through the android steps.

- Android

1) Open the build.gradle (Module: app) file and add this line in the dependencies section

implementation 'com.facebook.android:facebook-android-sdk:latest.release'

2) Now open the /app/res/values/strings.xml file and add these 2 lines

<string name="facebook_app_id">1234</string>
<string name="facebook_client_token">56789</string>

Replace 1234 with your Facebook app id and 56789 with client token value from the Facebook developer dashboard.
3) After that open the /app/manifests/AndroidManifest.xml file and add meta-data to the application element.

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
    ...
</application>

4) And don't forget to add the uses-permission element in the AndroidManifest.xml file after the application element.

<uses-permission android:name="android.permission.INTERNET"/>

5) Save all files and build your project and you are done. 🎉
Let's move on to the iOS section now.

- iOS

1) Open your info.plist file and add these lines in <dict>...</dict> tag

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fbAPP-ID</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

Now here replace fbAPP-ID and APP-ID with your Facebook id available in the Facebook developer app dashboard. Put your client token in place of CLIENT-TOKEN available in Advanced Settings and the last replace APP-NAME with your app name.
2) Now open your AppDelegate.m file and paste this code there.

#import <FBSDKCoreKit/FBSDKCoreKit.h> // <- Add This Import
#import <React/RCTLinkingManager.h> // <- Add This Import

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  if ([[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options]) {
    return YES;
  }

  if ([RCTLinkingManager application:app openURL:url options:options]) {
    return YES;
  }

  return NO;
}

3) Initialise FB SDK in the same file. Go to the didFinishLaunchingWithOptions function and paste this line before return YES; statement

[FBSDKApplicationDelegate.sharedInstance initializeSDK];

4) Now in the last as I wanted our app for Advertising and for iOS 14 devices facebook asked to enable the Advertising tracking flag. So to solve this issue I added this line in my App.js file.

import {Settings} from 'react-native-fbsdk-next';
...
  useEffect(() => {
    Settings.setAdvertiserTrackingEnabled(true);
  }, []);

5) After that build your app and you are done. 🎉

Result

You'll start seeing events in the Events Manager of your Facebook app.

And also you'll see the activity of the last installs on your Facebook developer dashboard

Thank you for reading! Feel free to connect on Twitter