How to setup Firebase on React Native Android

How to setup Firebase on React Native Android

If you want to integrate the Firebase tool to your React Native application, then this tutorial is for you. Firebase is a powerful platform that makes it easier for us to set up the backend functionality. Firebase is one of the most used tools in web and mobile application development. It has powerful features like Firestore, real-time database, authentication, hosting, etc.

With firebase, we can build our apps fast without having to manage structure. They have made it so simple that you may have some trust issues on if this tool is scalable and dynamic. In fact, the platform is substantially powerful and production scalable. Authentication and hosting are just a few clicks and commands away.

To integrate Firebase features (i.e., Firestore, authentication, etc.) into the React Native app, one must first learn how to set up firebase and integrate it into the app.

In this tutorial, we are going to learn how to set up Firebase on React Native for the Android platform. The idea is to start by setting up the firebase project in the firebase console. Then, we will set up the firebase in the React Native app using the react-native-firebase package.

Let’s get started!

Requirements

The first and only requirement is the React Native project. To learn how to set up the boilerplate React Native project, you can check out my previous shot.

How to set up a Firebase project

First, we need to set up the Firebase project in the Firebase console. In case you have not created an account in Firebase, you can create one by visiting the Firebase website. The sign-up is simple, you can sign up/in by using your Google account. Then, we need to go to the firebase console and create a new project as directed below:

After creating the project, we will get the project interface shown below:

Next, we need to hit the Android icon just below the ‘get started’ text in the project interface. A register interface will open up in which we need to register our app as shown in the screenshot below. But, in order to register, we need to know our Android package name.

So, where can we find it…?

Well, we can get it from the MainActivity.java file as shown below:

You can check the directory structure to go to the MainActivity.java file on the right side of the screenshot.

Next, we need to copy the package name and paste it to the register interface and hit register. As a result, we will get the google-services.json file as shown in the screenshot below:

We need this file to authenticate our app with Firebase services.

Now, we need to download the google-services.json file and keep it in the ./android/app/ directory as shown below:

Our Firebase project setup is complete. Now, we can concentrate our work on the react-native project.

How to set up Firebase in React Native project

In order to integrate firebase into our React Native project, we first need to install the core module of React Native Firebase. For that, we need to run the following command in our project directory terminal:

*# Using npm*
npm install --save @react-native-firebase/app

*# Using Yarn*
yarn add @react-native-firebase/app

Setup process

Next, we need to open the /android/build.gradle file and add the following code to the dependencies:

buildscript {
  dependencies {
    *// ... other dependencies*
    classpath 'com.google.gms:google-services:4.3.3'
    
  }
}

Then, we need to add the following code to our /android/app/build.gradle file:

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

Lastly, we need to run the react-native run-android command in order to run our app in an emulator or device. The app will run perfectly and we will get the info in the firebase console:

As the info states, we have successfully integrated Firebase to our React Native application.

Conclusion

Firebase is a tool that provides us with all the backend storage and authentication options out of the box. Learning it will prove highly beneficial if you are looking to develop a full-fledged application.

For the next step, you can try to add other firebase modules like auth, database, or push notifications.