Setting up the Facebook SDK plugin

Since we’ve integrated the Firebase plugin using the official documentation. To integrate the Facebook login, the docs recommend that developers usethe react-native-fbsdk package. So let’s get started by installing the plugin as follows:

Using yarn:

yarn add react-native-fbsdk

Or, using NPM (Node Package Manager):

npm install react-native-fbsdk

After installing the Facebook SDK package, we must link the SDK to configure the iOS and Android projects. We can do that by using the following piece of code in our project console:

react-native link react-native-fbsdk

Now, go to MainApplication.java and MainActivity.java under app/src/main/java/com/<project name>/ to complete the setup.

In MainApplication.java , we need to add an instance variable of type CallbackManager and its getter. You can use the code snippet below to do that:

import com.facebook.CallbackManager;

import com.facebook.FacebookSdk;

import com.facebook.reactnative.androidsdk.FBSDKPackage;

import com.facebook.appevents.AppEventsLogger;

... public class MainApplication extends Application implements ReactApplication { private static CallbackManager mCallbackManager = CallbackManager.Factory.create(); protected static CallbackManager getCallbackManager() {

return mCallbackManager;

}

//...

The example of the above code used in the app project is shown below:

Now, we’ll need to register the SDK package using the getPackages() method. Follow the code snippet below to do that:

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

} @Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new FBSDKPackage(mCallbackManager)

);

}

};

The integration of the above code in the app project is shown by the screenshot below:

Now, in the MainActivity.java file, we need to override the method onActivityResult() :

import android.content.Intent; public class MainActivity extends ReactActivity { @Override

public void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);

}

//...

And again, the above code in our project environment:

After this is done, test the result in the IDE Android mobile emulator by running our app. The result can be seen in the screenshot below:

The above screenshot shows the occurrence of the error. This error is due to not establishing the APP_ID . You can find the solution of this error here.

Now, open the android/app/src/main/AndroidManifest.xml file and look for the <application> tag to confirm that this meta-data tag exists:

<meta-data android:name="com.facebook.sdk.ApplicationId"

android:value="@string/facebook_app_id"/>

Then, we open the android/app/src/main/res/values/strings.xml file and confirm that there’s a facebook_app_id string tag with our app id as the value:

<string name="facebook_app_id">YOUR_APP_ID_HERE</string>

Finally, we run react-native run-android again to get the following result in our IDE android emulator:

Finally, our configuration of react-native-fbsdk is completed.