Build React Native Fitness App #9 : [Android] Firebase Facebook Login
Tags: reactnative, react
Published: 2020-02-05 16:05:14




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:

```javascript
<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:

```javascript
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:

```xml
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:

```xml
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:

```xml
<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:

```xml
<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.

![](https://cdn-images-1.medium.com/max/2738/0*tPXjf10y0wBpHs4B.png)

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

![](https://cdn-images-1.medium.com/max/2044/0*P3QfHIC5_hWPhXlk.png)

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

![](https://cdn-images-1.medium.com/max/1574/0*CSkPnzWP6IRcTS3D.png)

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

![](https://cdn-images-1.medium.com/max/576/0*01sV9rJkkJeFZwLy.png)

#### Try Login

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

![](https://cdn-images-1.medium.com/max/836/0*BnbTVTv4CaW5yVhf.gif)

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](http://instamobile.io/) from instamobile

your can view the [previous chapter here](https://kriss.io/category/react-native-fitness/)

---

_Originally published at [Kriss](https://kriss.io/build-react-native-fitness-app-9-android-firebase-facebook-login/)._