How to Integrate Firebase Real-Time Database in React Native?

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

This document will help you show the integration with the Firebase and demonstrate how you can insert and retrieve data using Firebase.

But before going further let’s see some of the positive aspects of Firebase for an external database.

Why use Firebase:

• Faster compared to REST API’s
• Real-time callback
• Easy to integration
• Offline access to cached data
• Manage by Google so better security

So you get an idea of why Firebase is ruling these days and why you should choose this ‘support system’. Now we turn towards the installation process.

Installation:

Create a project using below command

$ react-nativeinit “ProjectName”

Now install Firebase into Your project

$ npm i -S firebase

So now firebase is installed into your project.

I believe you have already created an android project in Firebase console. If not then please add Project in Firebase using this Link. If you are absolute beginner then you can check out this Link to understand how to create a project in Firebase console.

Implementation:

After creating a project you need to add firebase config into your app. There will be a three option in console Android, iOS and Web app, You have to select web app.

On click of the third option, below screen will see below the screen and you need to copy this config and paste into your component Will Mount () method.

Now select the database from slider under the develop section.

After selecting a database, you must check that you have selected a real-time database, not cloud firebase. And in the rules tab, you must have to select read and write as true so that it allows you to read and write database without any authentication.

Now you are ready to use firebase inside your app and play with it.

Usage:

• INSERT

In this demo, I am storing User into a list so in Firebase I have a list of Users and can get all the users.

Below screenshot explain insert user object into firebase. You can change the list object name from ‘users’ to whatever you want to add and customize the object according to your record.

• RECEIVE

This block of code returns the list of objects if you have inserted any. And you can play like you can check if a user is in a list and create login and signup using these blocks of code.

Your inserted records will display like below

We hope that we have covered all the basics regarding Firebase Real-time Database in React Native. For more information, we are here to help you at www.metizsoft.com.

We develop cross-platform apps using React Native Technology and provide budget-friendly tech solutions to our clients.

Read More:

Top 5 Reason to choose React Native Framework

React Native Document Scanner (iPhone Only)

Imagepicker React Native