Firebase Realtime Database With React Native

As we all know firebase is everywhere now a days. It has all the functionality which is enough to develop simple and small application without having server.

Before moving to this article, you can check Getting Started With Firebase to get an overall idea of what functionality firebase provides.

Today we are going to discuss how we can use firebase realtime database with React Native. Yes, React Native is fastest growing cross platform framework in current market. But before digging into it, take an idea of how we can implement real time database in android native and how to create project on firebase console. Here is my article on it : Firebase Realtime Database In Android. To get started with it we need to create project on Firebase Console as a web application.

Create a new project from console, add your project name and select region.

Firebase Realtime Database With React Native

After creating a project it will show you welcome screen

Firebase Realtime Database With React Native

Select Add Firebase to your web app, and copy that credentials, it will be useful in future.

Firebase Realtime Database With React Native

So let’s move to React Native now, here i am assuming you have basic knowledge of React Native and have eveything installed related to React Native. If not, check Getting Started With React Native.

First step will be to install firebase in your project through npm.

npm install firebase --save

Now you can use firebase with your react native project anywhere by just creating its object, like

var firebase = require("firebase");

Or if you are using ES2015

import firebase from ‘firebase’;

Note : You might get Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})… error while running the project, as of now there is some issue with firebase library, so just move to firebase version 5.0.3 for now.

Next step will be to initialize firebase object by giving database and project reference. Put the following code inside your app.js or index.js or whichever is the starting point of your application.

var config = {
    databaseURL: "<database-url>",
    projectId: "<project-id>",
};
firebase.initializeApp(config);

After writing this code, there is a possibility of getting error Firebase app named ‘[DEFAULT]’ already exists (app/duplicate-app). It will look something like below :

Firebase Realtime Database With React Native

To resolve this, just check how many instances are running of app with use of firebase.apps

if (!firebase.apps.length) {
    firebase.initializeApp(config);
}

That’s it, we are done with all the setup things, now we can use firebase realtime database in our application. So first we will see simple read write samples to get started with it.

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)
    })
}

This is how it will look when you set a value to user object

Firebase Realtime Database With React Native

To push data in any of the object and create array with unique keys

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

And after writing multiple data, it will look

Firebase Realtime Database With React Native

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 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 matters how many time there is data change, it will be called all the time.

Update Database

To update the data of any of the object, you need to create 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 email address to the newly passed address.

Delete From Database

By just calling remove() from the reference of 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.

Happy Coding :)