How to add FB SDK in react-native project
Tags: reactnative, javascript, programming, tutorial
Published: 2022-02-23 20:55:03

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](https://github.com/facebookarchive/react-native-fbsdk) 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.
{% github thebergamo/react-native-fbsdk-next%} 

###Installation
npm command
```javascript
npm install --save react-native-fbsdk-next
```
or yarn command
```javascript
yarn add react-native-fbsdk-next
```

###Linking
On the latest version of `react-native` it will link automatically for android.
for iOS, do this
```javascript
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
```javascript
implementation 'com.facebook.android:facebook-android-sdk:latest.release'
```
2) Now open the `/app/res/values/strings.xml` file and add these 2 lines
```javascript
<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.
```javascript
<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.
```javascript
<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
```javascript
<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.
```javascript
#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
```javascript
[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.
```javascript
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.

![facebook events](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qytubyox2qm4tyjagn43.png)

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

![facebook dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1l4sf3v3om8mzpj1laf.png)

Thank you for reading! Feel free to connect on [Twitter](https://twitter.com/Aneeqa_Khan25)