Integrating Firebase with React Native

In a straightforward approach, we’ll learn how to integrate Firebase in React Native which works for Android.

What is Firebase?

Firebase is a platform developed by Google for creating mobile and web applications, it’s a Backend-as-a-Service (Baas). It provides developers with a variety of tools and services to help them develop quality apps, grows their user base, and earn profit. It is built on Google’s infrastructure.

Structure of content:

1. Create a Firebase Project.
2. Create an SHA Key.
3. Install dependencies for Firebase.

Step 1: Create a New Firebase Project

To create Firebase projects, create an account on Firebase Console, then select the Go to console option for the next steps:

Firebase

1. Add a Firebase Project: The first time, Firebase will show a Create a Project option to set up a project. If there is already an existing project in the current account, select the Add Project option to create a new project:

2. Add Name: A project name can be anything but should be at least four characters long and should contain numbers, letters, spaces, and -!'" special characters only. Provide a name and click continue:

Project names can be duplicates, but always use a unique name to avoid possible configuration issues.

3. Create Project: As of now, select the default account for analytics. Select the Create project button:

It might take a couple of minutes to create a project.

Add Native Projects in Firebase Project

Firebase supports mobile and web apps, so the platform-specific apps need to be added under the Firebase project and the native (Android and iOS) project files need to be configured:

Setting Up an Android Firebase Project

Select the Android app option in the Firebase project console and follow the steps to create and configure an Android project:

Then you will navigate to another screen where we need to create Add Firebase to your Android App. For that we need to Package Name.

We can get the Package Name in “android/app/src/main/AndroidManifest.xml"

android/app/src/main/AndroidManifest.xml

1. Add Package: A package name is required to create an Android project. It’s a unique identifier of an Android app. The package name is used to identify an app on the Play Store and device, so it must be a unique value.

Add the package name in the Android package name field and provide a nickname to register the Android app.

2. Add Configuration File: Download the google-services.json file, then copy and paste the file in android/app folder.

3. Configure Google Services: Firebase configurations require google-services plugins to build the project, so add the google-services dependency in the android/build.gradle file:

Add the google-services dependency in the project file — “android/build.gradle" and paste it. Look Like this…

android/build.gradle

There is no need to add any other Firebase SDK dependency for Android. If you’ve opted for Google Analytics, it should also be added as an NPM module dependency, not as a gradle dependency.

Then Add the google-services plugin in the “android/app/build.gradle"

android/app/build.gradle

4. Verify App: Run the Android project to confirm the successful integration with Firebase:

Yay! Step: 1 completed and your app will be Added Successfully . Then Continue to console and here we go next Step.

Step 2: Create an SHA Key

1. Thereafter we need to get a command for creating an SHA Key :

keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

2. Then this command you need to paste in Command Prompt. You need to give the Alias Name: androiddebugkey and Press Enter thereafter, the key will automatically generate. Look like this…

3. Whenever it is done you need to copy this SHA key and paste it into your Firebase project. Follow some steps:

• Go to your Firebase Project Dashboard.
• Click on the Setting icon on the left-hand side.
• Click on Project Setting.
• Then scroll down to see SDK setup and configuration.
• Click Add fingerprint then paste it SHA1 Key.
• Last, Click on the Save Button.

4. Next you need to Set up the sign-in method. You have to see it on the left-hand side option Authentication. Click on Authentication and Go to Sign-in methods. Here you have to see some Sign-in providers after that you need to click on Google. Look like this…

5. You need to enable Google Authentication. Then you need to give your Email ID and Click on Save Button. Look like this…

6. Then again, Download the google-services.json file, then copy and paste the file and replace it in android/app folder.

Step 3: Install dependencies for Firebase.

Installation:

Installing React Native Firebase requires a few steps; installing the NPM module, adding the Firebase config files & rebuilding your application.

1. Library Installing

The @react-native-firebase/app the module must be installed before using any other Firebase service.

# Using npm
npm install --save @react-native-firebase/app
# Using Yarn
yarn add @react-native-firebase/app

2. Android Setup

To allow the Android app to connect to your Firebase project securely, a configuration file must be downloaded and added to your project.

First, add the google-services plugin as a dependency inside of your /android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.13'
    // Add me --- /\
  }
}

Lastly, execute the plugin by adding the following to your /android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

That’s it Firebase is integrated now you can use any of its services. For that, you have to install their dependencies and packages first before you can use any of its services.

Congrats! 🙌 🎉 you have successfully implemented Firebase for your react native project. For further information please contact me — abhishekgarg2377@gmail.com