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.