How to Install React Native Firebase?
React Native Firebase is a group of modules that enables Features of Firebase SDK for the React native app.
Join the DZone community and get the full member experience.Join For Free
This Firebase for react-native allows you to change the SDKs of a device. That is not available with the web version of Firebase. React Native Firebase has additional features that are not found on the web Firebase. Those features are remote configuration and performance monitoring. That is why Firebase for the web is generally avoided in native react js development because of its limited features.
React Native Firebase has the support of the Typescript, and it is maintained with proper documentation.
Before installing the Firebase native extension, you will have to create a React Native project with Firebase's integration. That means you have to make a firebase project. After this, you can install Firebase with the use of npm commands.
Run any one of them in the root folder of the React Native project.
For linking Firebase to the React project, you will need to download the credentials and configuration files.
Open the Firebase console and add the description of the project by creating a new project from there. The local project package name and the Android package name must be similar to each other to work properly. The local project's package name is in the manifest tag of the /android/app/src/main/AndroidManifest.xml file.
If you want to use dynamic links or invites that you need to add the debug certproject's ificate in the pr, you should execute the command cd android && ./gradlew signingReport
Then you can duplicate the SHA1 that is in the debug key field. For getting Google services, you will need to download the google-services JSON file and copy the content in the services file in your React project.
Adding Android Credentials
Initially you will need to add the Google services in the build folder as a dependency for this you can run the following commands;
With this, you can install the credentials in the build folder. This was made enable because the google-services plugin was added with the above method.
Features of React Native Firebase
React projects can be integrated with analytics of firebase. It helps to monitor the interaction of the user while using the React app. It records the events and the user's properties. In the event, the interaction of the user with the interface is noted. While in User properties, you get the performance of the UI elements' performance otc.
In Firebase Analytics, you can create 500+ events to monitor specific actions of your users. This gives an extended capability to track the analytics. Also, it is very similar to the gtag.js from google analytics. Hence if you are familiar with google analytics, you can use it easily.
You can take reference from the below mentioned sample code to create a custom event of your own.
React Native Firebase provides a feature to authenticate the users before using the app. This authentication utilizes back end services and SDKs to provide robust security services. It verifies authentic users with the help of password logins, phone numbers, etc. It also has features for adding eIt also global login platforms like Google, Facebook, Twitter, and apple.
To use this feature, make sure that you have the react-native firebase app module installed n your device.
It offers a surprising feature of knowing the state of the user. You can get to know that the user is signed in or out from the app. For this, you will need to create a module named onAuthStateChanged.
This module will link to the user state and give you the live state of the user. This data will be initialized when the user has signed in. For this, it is necessary to initialize the module at the start. You can get the state of the user with the following code:
Performance monitoring gives you the ability to examine the performance of the react app. You can check the insights and characteristics of specific features of the native application. It simplifies your interface and provides intelligent ideas for improving the performance of the app.
From the Firebase console, you can access the data for the native app and get to know about the issues that are degrading the performance of the app. You also get the data of the HTTP requests by using the Performance monitoring feature.
This feature of Firebase can trace the events and modules that are created by you. That means you can monitor the custom aspects like the events regarding network calls, app code, etc. with this.
The installation requires that you should have the react-native firebase module installed in your project. After this, you can execute the following codes:
The react native Firebase plugin is equipped with a number of features like cloud storage, instant messaging, real-time database, etc. All these features can improve the functionality of the native app. And each of the features is available for IOS as well. The naïve firebase framework offers much greater features than the original Firebase for Web. Every module in this library is tested to the very limit to get a flawless result.
Opinions expressed by DZone contributors are their own.