In this tutorial, we are going to perform the React Native Firebase setup. Firebase provides extensive help in the development of mobile applications. It provides us with functionality like analytics, databases, messaging and crash reporting. Firebase is developed on Google infrastructure. So, it scales automatically, for even the largest apps. Moreover, Firebase will be a great inclusion in any app. It supports API, authentications as well as database management. Hence, it is easier to work with Firebase and create dynamic and powerful applications.
This tutorial follows the coding implementations and configurations from the Youtube video tutorial by Handlebar Labs for the React Native Firebase setup in Android. The video tutorial uses the old version of React Native and the required plugins. We are going to use the same coding implementation and configurations for the Firebase integration but in the latest version of React Native and required plugins.
In this tutorial, we are going to install the React Native Firebase package into our React Native application. Then, we are going to make firebase configurations in the firebase console as well as the react-native project. Here, we are going to use the latest version of React Native which is version 0.61. The idea is to install the boilerplate react native application first and then run it on the android emulator. Then, we are going to add the react-native-firebase package in our react-native project. Simply adding the firebase package to the project won’t help, we need to configure a new firebase app in the firebase console as well. Then, we need to sync the configuration between the app in the Firebase console to our react native app.
Note that, in this tutorial, we are integrating Firebase into the React Native project for the Android Platform.
So, let’s get started, folks!
Setting up a boilerplate React Native App
In this step, we are going to set a React Native boilerplate project first. For that, we are going to use the React Native CLI. Now, to set up a boilerplate project, we need to run following command in our desired directory command prompt:
react-native init <project-name> //here it is RNecommerce
This is will set up the starter React Native project for you.
Now, we need to run this starter React Native project on our android simulator. For that, we need to navigate to the project directory in our command prompt and then run the following command:
>>>react-native start //for the metro bundler server
Now in different command prompt window, we need to run:
Now, our started react native app will run on the android emulator.
Note that we may need to launch the emulator first before running the commands.
React Native Firebase package setup
Here, we are going to install the react-native-firebase package into our React Native project. For that, we need to run following command in our project directory command prompt:
>>>npm install react-native-firebase –save
After the successful installation of the package, we need to link it to our native app part. For that, we need to run the following command:
>>>react-native link react-native-firebase
This will link the react-native-firebase package to our react native project as well as to the native configurations.
Now, we have successfully installed the Firebase package into our app project. Now, we need to make configurations to the firebase console.
Configuring Firebase Console
Now, we are going to make configurations in the Firebase console. Firebase console enables us to create a new firebase app for integrating firebase configurations to our projects. Here, we can create our own app from the console. In this tutorial, we are going to create an app called
RNecommerce as shown in the screenshot below:
Now, we need to select the type of app in other to create a firebase app. Since we are going to integrate the firebase to the Android platform of the React Native app, we are going to choose the android app here. In order to choose the android app, we need to click on the button with the android icon as shown by an arrow diagram in the screenshot below:
After clicking on the button, we will get the console to enter the package name as well as some other fields. For the package name, we need to copy the package name from the AndroidManifest.xml file in our projects ‘./android/app/src/’ directory as shown in the screenshot below:
As we can see, the name of the package is ‘com.RNecommerce’. Now, we need to copy the package name and paste it into our console for the Android app as shown in the screenshot below:
As we can see, we have provided the package name in the Android package name field.
Now, we need to click on the ‘Register app’ button shown in the above screenshot. After you click on the ‘Register App’ button, we will get the config file that we need to set up in our React Native project.
Downloading Config file
In the config file interface, we will get a file to download called ‘google-services.json‘ as shown in the screenshot below:
Next, we need to download the ‘google-services.json’ file into our system by clicking on the ‘Download’ button that is shown in the above screenshot.
After downloading the ‘google-services.json’ file, we need to copy the ‘google-services.json’ file to ‘./android/app/’ directory of our React Native project as shown in the screenshot below:
Now, we have the ‘google-services.json’ file in our React Native project. With this, our configuration of the firebase console is complete.
Now, we move on to updating and configuring the firebase and google services plugins in our React Native project.
Updating Files and Configuring Firebase in React Native project
In this step, we are going to update some necessary android files which will help to configure the Firebase package properly into our React Native project.
build.gradle file in ./android directory
First, we need to update the
classpath in the
build.gradle file. For that, we need to open the
build.gradle file of our ‘./android/’ directory in our project. Then, we need to add a
classpath provided to the dependencies of
buildscript object. The required
classpath is provided in the code snippet below:
Now, we need to add this
classpath as shown in the following screenshot of the
build.gradle file in ./android/app directory
Now, we need to add some configurations to
build.gradle file of ‘./android/app’ directory as well. Here, we need to add a plugin to the end of the file first. Thus, the plugin configuration code to be added is provided in the code snippet below:
apply plugin: 'com.google.gms:google-services'
Therefore, the code provided in the above code snippet should be added to the end of
build.gradle file of ‘./android/app’ directory.
Now, in the same
build.gardle file, we need to add some dependencies related to android play service and firebase core. The code configuration to add in the dependencies object is provided in the code snippet below:
implementation "com.google.android.gms:play-services-base:16.1.0" implementation "com.google.firebase:firebase-core:16.0.9"
Hence, our dependencies object in the
build.gardle file of ‘./android/app’ directory will look as shown in the code snippet below:
google() function in the
build.gardle file of ./android directory
Here, we are going to check if the
google() function exists in both the
allprojectsobject of the
build.gardle file in ‘./android/ directory. If it exists, it should be in the place shown by the following screenshot of the
As we can see, the
google() function highlighted in the above screenshot exists in both the objects in the proper place. In case it does not exist, we need to place the
google() function in the
build.gardle as shown in the above screenshot.
Now, we need to test if our app runs successfully, with all of these Firebase configurations. For that, we are going to run our app in the Android emulator. If the project runs without any error, then we have successfully set up the React Native Firebase into our project otherwise the Firebase package is not set up correctly. Now, if we run the project in the emulator, we will get the following result:
Hence, we can see that our React Native project runs fine in the emulator with any error.
Note that in case any error occurs, it may be due to wrong versions being updated to different files. For that, we can check the documentation of React Native Firebase.
In this tutorial is we learned how to configure React Native Firebase setup into our React Native app for the Android platform. First, we learned how to set up the starter React Native app using React Native CLI. We also learned how to install the react-native-firebase package. Then, we got step by step guide for setting up the new android firebase app in the Firebase console. Then, we got detail insight into updating and configuring the React Native project files in order to integrate firebase properly.