Beginners Guide To Integrate Firebase In React Native

As a beginner we search for “what is firebase?” and we get the definition as “Firebase is Google’s mobile application development platform that helps you build, grow, and improve your app.”, but what does it actually mean? In short with firebase you can work without any backend server, as firebase offers you a Real-Time Database you can store your data in a firebase real time database. It stores the data in JSON(JavaScript Object Notation). Firebase is Baas (Back end as a service).

Firebase offers so many features to grow and improve your application. Features such as

To utilize this feature in your React Native Application you have to integrate Firebase in your app. So in this article lets see how to integrate Firebase in your React Native application.

Installation

First, navigate to your React Native application root directory in your terminal and run the following command

Using npm:

npm i --save @react-native-firebase/app

Using yarn:

yarn add @react-native-firebase/app

Firebase Setup

Go to Google Firebase website, sign in and Go to console which you can see in the top right corner. You will see the screen below. Now click on Create a project button.

Once you click on the create project button you will see a screen where you have to start with the name of your project as shown below. Enter your project name and click on the Continue button.

Second step is Google Analytics for your Firebase project. Enable Google Analytics for this project and then click on the Continue button to navigate to the third step.

What are the benefits of enabling Google Analytics for your Firebase project?

Google Analytics helps you monitor your application success. It is a free app performance measurement solution. With google analytics, you can analyze actions taken by the users in your application. Once you enable this google analytics you can monitor how your app users fulfill the actions and you can understand the behavior of the users. Understanding the behavior you can develop an application that is more functional for the users.

Third step is to Configure Google Analytics. Select the location and check the checkboxes. Now click on the Create Project button.

Your project is ready on the firebase console, click on the Continue button and you will see the dashboard as below

Setting Android app

To set up your android app clicks on the android icon. It will navigate to the Add Firebase to your Android app.

1. Enter your android package name for example (com.demo.firebase).  Your Android package name must match with your React Native app package name which you can get in …/android/app/src/main/AndroidManifest.xml file. You can use any app nickname of your choice and click on the Register button.

Note: If you are using firebase for CI/CD(Continuous Integration and Continuous Delivery) setup then you have to create three different firebase projects(development, staging, and production) for a single React Native application. In this case, you have to use a different package name for three different firebase projects of the same React Native app. For example com.appname.dev, com.appname.staging and com.appname.release.

How to get a SHA-1 certificate?

Though SHA-1 key is optional we will see how to get a SHA-1 key

  • Open Android Studio
  • Open your project
  • Click on Gradle (From Right Side Panel, you will see Gradle Bar)
  • Click on your project >>> Tasks >>> android >>> double click on signinReport
  • You will see SHA-1 key in Run Bar

2. Step two is Download config file. Click on Download google-services.json button and place the file in your android app folder (../android/app/google-services.json) and click on the next button.

Note: Please check the name of your google-services.json file sometimes if you download it more than one time it can be google-services (1).json. You have to rename it with google-services.json.

3. Now Add Firebase SDK

  • Go to …/android/build.gradle
buildscript {

   repositories {

       google() //Add this line

       jcenter()

   }

   dependencies {

       ...

       classpath("com.google.gms:google-services:4.3.4"

       //Add this line

       }

}

allprojects {

   repositories {

       ...

       google() //Add this line

       ...

   }

}
  • Go to …/android/app/build.gradle
apply plugin: "com.android.application"

// Add this line

apply plugin: "com.google.gms.google-services"

// Add this line

dependencies {

   implementation     platform('com.google.firebase:firebase-bom:26.1.1')

   // Add this line and change the version with the latest one

   implementation "com.google.firebase:firebase-analytics"

   //Add this line

}

Sync your project aftering adding this line in your project and click on the Next button.

  • Click on Continue to the console

With this, you have successfully added your android app in the firebase console. We can see we have set up an android app firebase-demo in our firebase console.

coma

Conclusion

In this article, we saw how to integrate the firebase in your React Native application and how to add an android app in your firebase console. With this, you are now able to use all the features provided by firebase in your android application. As we saw SHA-1 key is optional in the setup but it is required for Dynamic linking, Invites, and Phone Authentication.

Sayali

Tech Expert
Sayali is a React Native Developer with around 1 year of experience in developing mobile applications. She is familiar with writing blogs for the last 2 years. She is self-motivated, a fast learner, and result oriented. She loves to write blogs on technical issues faced by developers in day to day work and help them through her blogs.

The founder's survey report on "What Matters For Startup" is released - Get your copy and learn the trends of successful companies :)

Download Free eBook Now!

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

"Mindbowser was very helpful with explaining the development process and started quickly on the project."

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

"The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs."

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

"They're very tech-savvy, yet humble."

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

"Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier"

author
Katie Taylor
Founder, Child Life On Call
coma

“As a founder of a budding start up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity."

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give