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.
React Native FBSDK Next
This project aims to keep continuity of the React Native FBSDK from Facebook. As Facebook dropped support from it. As a community for this is our effort in order to keep upgrading and improving support for this module.
React Native FBSDK is a wrapper around the iOS Facebook SDK and Android Facebook SDK, allowing for Facebook integration in React Native apps. Access to native components, from login to sharing, is provided entirely through documented JavaScript modules so you don't have to call a single native function directly.
Functionality is provided through one single npm package so you can use it for both platforms without downloading any extra packages. Follow this guide to use react-native-fbsdk in your React Native app. You can also visit https://developers.facebook.com/docs/react-native for tutorials and reference documentation.
Installation
React Native Compatibility
To use this library you need to ensure you…
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
Top comments (17)
I also want to add that if you got the error. "use of undeclared identifier 'FBSDKApplicationDelegate" you might want to visit this github issue
github.com/facebookarchive/react-n...
You only just need to declare
this import..
import
above the...
ifdef FB_SONARKIT_ENABLED in AppDelegate.m file
Now you are able to archive easily..🤩🤩🤩
Hi great article, I am new with native so just wanted to understand can we directly add the dependencies in build.gradle file as you mentioned in your article?
Yes
Hey @aneeqakhan, thanks for writing this beautiful article,
just wanted to ask there are some steps which include swift code, I am not seeing these steps in your article, can you please add those steps too, very confused in how to add these swift code lines in react native, you can check those steps in Getting started Guide.
Thanks
Yes, just like mentioned in your screenshot that step 3 and 4 have swift code in official docs of FB SDK, so thats why fbsdk-next guide provided that code in Objective-C under the Note text.
I followed the instructions and was getting error:
No visible @interface for 'FBSDKApplicationDelegate' declares the selector 'initializeSDK'
I had react-native-fbsdk-next previously installed, so I had to delete its reference from package.json and package-lock.json and rerun:
npm install --save react-native-fbsdk-next
pod install
to get the latest versions, where initializeSDK is supported
Another caveat, I was sending custom events, so I couldn't see them on default events manager view, had to switch to "all events" to see them.
Hello.
Did you face any UI problems in the SDK?
For instace, during the integration process, buttons like Next, Continue, and Cancel disappear.
This issue is in the latest version of SDK.
When I delete the FB app then I enter credentials in the webview and there the buttons won't hide but when it opens FB app to login, then this issue come.
Did you solve this problem?
No. Didn't find any solution.
Replace
#import <FBSDKCoreKit/FBSDKCoreKit.h>to
#import <FBSDKCoreKit/FBSDKCoreKit-Swift.h>Does this package work with Expo?
I guess no, there is no installation guide provided for expo
yes it does!?
github.com/thebergamo/react-native...
yes!
github.com/thebergamo/react-native...
Hi @aneeqakhan thanks for this awesome blog.
I want to add multiple fb-pixel accounts for tracking. How to do this?