Build React Native Fitness App #9 : [Android] Firebase Facebook Login

in this chapter, we continue from the previous part that we did on iOS now we want to do on Android too. let brief first before we deep-dive first we link fbsdk package to android then set facebook app id to string.xml then we

Setting Facebook APP ID

Here, we need to grab Facebook App ID. then add following code to strings.xml file in ./android/app/src/main/res/values/

of our react native project:

<resources>
  <string name="app_name">
    fitness_master
  </string>
  <string name="facebook_app_id">
    65985309808
  </string>
</resources>

Setup Android config

Here, we are going to add the configurations to the required build.gradle files in ‘./android/’ directory and ‘./android/app/’ directory.

First, we are going to add mavenCentral() function to our build.gradle file in ‘./android’ directory. Here, we need to add the mavenCentral() function to repositories object of buildscript as shown in the screenshot below:

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
    }
    repositories {
        mavenCentral()
        google()
        jcenter()
    }

After this, we need to add the code from the following code snippet to the build.gradle file of ‘./android/app/ directory:

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

Here, we need to add the configuration of facebook android SDK to dependencies of build.gradle file as shown in the code below:

dependencies {
    implementation project(':react-native-fbsdk')
    implementation 'com.facebook.android:facebook-android-sdk:[5,6)'
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation project(':react-native-firebase')
    implementation "com.google.android.gms:play-services-base:16.1.0"
    implementation "com.google.firebase:firebase-core:16.0.9"
    implementation "com.google.firebase:firebase-auth:17.0.0"
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

Now, we need to go to the AndroidManifest.xml file in** ‘./android/app/src/main’** directory and add the metadata code which is provided in the code snippet below:

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

be careful this meta-data element should be placed inside the application element in the AndroidManifest.xml file as shown in the code below:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.fitness_master">

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


    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <meta charset="utf-8"><meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/></meta charset="utf-8">

Now, our configuration to native android files in our react native project is complete. Next, we need to configure and add a Facebook login to our Facebook app.

Config Facebook App

Here, we are going to add the Facebook login feature to our Facebook app. For that, we need to go to our Facebook app that we created earlier and navigate to its dashboard. Then, we will see the Facebook login option at the bottom.

Then, we need to click on ‘Save’ and then ‘Continue’ to the fourth step.

In the next step, we will need to add the key hash for the android app. For that, we need to generate the key hash using the keystore.debug file in our ‘./android/app’ file. Here, we need to navigate to ‘./android/app’ of our project in our command prompt and run the following command:

keytool -exportcert -alias androiddebugkey -keystore android/app/debug.keystore  | openssl sha1 -binary | openssl base64

then add key hash to Facebook Console

our work here in adding Facebook login to the Facebook app is done.

We have also configured the integration of App ID and necessary configurations from Facebook app to our android files in react native project.

Add Firebase App

lasting comeback to Firebase console than add new Android App a

and download google-services.json and move to android/app directory

Try Login

let close packager terminal then run react-native run-android again

we already authorized from the previous chapter that makes me login automatically

Conclusion

this chapter we learn how to config Facebook login on Android and Facebook developer dashboard is pretty simple next chapter we will continue on Google Login

Wrapup

This tutorial is eight chapter of series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestion the ultimate goal is to create food and health recommendation using Machine learning we start with creating app that user wants to use and connect to google health and apple heath for gathering everything to create dataset that uses for train model later I start with ultimate goal. Still, we will start to create a react native app and set up screen navigation with React navigation. inspired by React native template from instamobile

your can view the previous chapter here

Originally published at Kriss.