React Native with Firebase Database

Jun 24 2020Written by Manektech Team

Google released a new and upgraded tool called Firebase. As a mobile developer once you are building large scale applications you would like back-end support also as a special developer who can work with server level stuff. Firebase provides all those functionality which are needed from the server side, additionally to Realtime Database, Storage and Hosting, it also provides Authentications, Analytics, Notifications, Crash Reporting and far more.

Firebase has proved to be a great boon to mobile application development. The backend support it provides is very handy in app development. It really enhances the overall app’s functionality.

 

 

Firebase Analytics

Firebase Analytics assists you to analyse how your user is using the appliance . it's totally free and provides up to 500 distinct events.Firebase Analytics assists you to know your app users need, What they need , how they're doing with the app, what are the items they're engaging most within the app.

Realtime Database

Firebase provides NoSQL realtime cloud database. Firebase Realtime Database stores data in JSON format and is synchronized with all the connected clients. When you integrate Realtime Database Android, iOS or JavaScript SDK, one realtime database instance is going to be shared with all the users. Every client will receive an update when there's any change in data.

Authentication

Using Firebase Authentication users are going to be authenticated via multiple ways, it is often email, Facebook, Twitter, Google or Github.

Firebase Authentication allows you to make new users and store user’s credentials to Firebase Database.

With the Firebase Authentication support now you are not going to integrate that heavy server configuration or APIs to affect login and signup process.

You can even send a confirmation email after registration and it also provides forgot password functionality just in case the user forgets their credentials.

Crash Reporting

Crash Reporting is an extremely important and helpful tool for any developer. With Firebase Crash Reporting you'll get the whole crash report in the firebase developer console. Report contains OS details with error detail and other factors.

Cloud Messaging

With Firebase Cloud Messaging(FCM) you'll be ready to engage with users in periodic time. Generate periodic notifications that remind users about your application.

You can even use Cloud Messaging to let your user know about promotional or seasonal offers available in your application. FCM allows you to transfer payload of up to 4KB to client applications.

FCM also allows you to send acknowledgement or chat messages back to your server over FCM’s reliable and battery-efficient connection channel.

Remote Config

You can use Remote Config to style your app supported user, version name, locality etc etc criteria. Remote config are often wont to show some promotional banners while your app runs or show some extra ordinary UI to some special users.

App Indexing

App Indexing allows you to re-engage together with your users. If google finds any searching term associated with your app and if the app is installed, the user will directly be redirected to the app by clicking on the link.

App Indexing helps your user to look at content in the most easy way via google.

Invites

Firebase Invites is the most effective thanks to increased users in your app. If your app has good content and user engagement, your user goes to share it with others also which is the best thanks to increased app users.


AdMob

After doing everything together with your application, we'd like to monetize our app to earn money. In any case this is often the sole thing that we were doing.

AdMob is Google's advertising platform which allows you to earn money through your app.

In the next part of this series we'll take a glance at some programming guidelines for Firebase features.

React Native is the fastest growing cross platform framework in the current market. But before digging into it, take a thought of how we will implement a real time database in android native and the way to make a project on firebase console. Here is my article thereon : Firebase Realtime Database In Android. to urge started with it we'd like to make a project on Firebase Console as an internet application.
Create a replacement project from the console, add your project name and choose region.

After creating a project it'll show you welcome screen
Select Add Firebase to your web app, and replicate that credentials, it'll be useful in future.
First step is going to be to put in a firebase in your project through npm.
npm install firebase --save
Now you'll use firebase together with your react native project anywhere by just creating its object, like
var firebase = require("firebase");
Or if you're using ES2015
import firebase from ‘firebase’;

Writing To Database

writeUserData(email,fname,lname){
  firebase.database().ref('Users/').set({
    email,
    fname,
    lname
  }).then((data)=>{
    //success callback
    console.log('data ' , data)
  }).catch((error)=>{
   //error callback
    console.log('error ' , error)
 })
}

Read From Database
readUserData() {
    firebase.database().ref('Users/').once('value', function (snapshot) {
         console.log(snapshot.val())
    });
}
It will read data once from the `Users` object and print it on the console. If we want to get data whenever there is any change in it, we can use on instead of once
readUserData() {
    firebase.database().ref('Users/').on('value', function (snapshot) {
         console.log(snapshot.val())
    });
}
This will print a log whenever there is any change in Users object, no matter how many times there is data change, it will be called all the time.
Update Database :-
To update the data of any of the objects, you need to create a reference of it and use update() with the data that you want to change.
updateSingleData(email){
     firebase.database().ref('Users/').update({
         email,
     });
}

This will update the email address to the newly passed address.
Delete From Database :-
By just calling remove() from the reference of the database will delete that record. You can even use null with set() or update() to delete that record from the database.
deleteData(){
    firebase.database().ref('Users/').remove();
}

That’s it for the basics of Firebase Realtime Database with React Native. Now you can have your application without taking help from server or web team. Keep sharing and share your application if you have created it using firebase with react native app development.

 

Contact us

Here to Help ambitious people TRANSFORM the Digital Solutions!