How to use FACEBOOK SDK on react-native apps for users

Before we begin, this tutorial is only based on making sure you are able to work with the Facebook login button and not for production purpose. I will drop links required for more advance steps for production purpose.

We all know how hard it can be sometimes trying to fix a bug, or even reading through some documentations to get something done on react-native, especially if you are no big fan on JAVA. Anyway, this short tutorial is an eye opener.

I am currently working on an app which I would like users to register with their Facebook account and it should be able to do that without delay, I googled and searched out for some NPM repos, but some I found gave me trouble, I have to jump back to the Facebook official docs. The official docs are not that friendly, which can easily throw you up, especially if you are the impatient type of person or new to this.

I assume you already have a basic knowledge of react native, although I will still make sure I have on my blog.

This is the repo if you are interested in having a no trouble installation of react native installation: https://github.com/react-native-community/cli : But do make sure to read well, have patience.

Steps to follow

Start or install a new project yarn λ react-native init project-name

Click on this link after your project is ready, this link takes you one of the official docs of the Facebook SDK for react native https://developers.facebook.com/docs/facebook-login/android

Create a react native Facebook app https://developers.facebook.com/apps/ , if you don’t create any Facebook app, this tutorial will not work for you.

There are some cool steps to follow, but am going to put you through right away.

The Facebook SDK for Android enables people to sign into your app with Facebook Login. When people log into your app with Facebook, they can grant permissions to your app so you can retrieve information or perform actions on Facebook on their behalf.

In your project, open your_app > Gradle Scripts > build.gradle (Project)
, the relative path is rnnb\android\build.gradle and add this line of code inside the build script object

buildscript {
    repositories {
        google()
        jcenter()
        mavenCentral() 
    }
}

In your project, open your_app > Gradle Scripts > build.gradle (Module: app) the relative path is android\app\build.gradle
and add the implementation statement to the dependencies{} section to depend on the latest version of the Facebook Login SDK:

ps: This may change according to time of life:

implementation 'com.facebook.android:facebook-login:[5,6)'

dependencies {
implementation fileTree(dir: “libs”, include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation “com.facebook.react:react-native:+” // From node_modules
implementation ‘com.facebook.android:facebook-android-sdk:[5,6)’

o Edit Your Resources and Manifest
This are files located in the res folder You are to create strings for your Facebook app ID and for those needed to enable Chrome Custom Tabs. Also, add FacebookActivity to your Android manifest.

android\app\src\main\res

Open your /app/res/values/strings.xml file, you are to add your facebook_app_id to this file

	    <string name="facebook_app_id">198772988040056</string>
    	<string name="fb_login_protocol_scheme">fb198772988040056</string>

Open the /app/manifest/AndroidManifest.xml file

Add the following uses-permission element after the application element:

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

Add the following meta-data element, an activity for Facebook, and an activity and intent filter for Chrome Custom Tabs inside your application element:

<meta-data android:name="com.facebook.sdk.ApplicationId" 
        android:value="@string/facebook_app_id"/>
    
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>

Finally we are all set to use the login button, i have as well the final some steps to that :hugs: Thank you.

4 Likes