React Native Bootcamp : Firebase

Getting Started

Firebase implementation on React Native is identical to ReactJS, except for storage and Authentication. So we’ll be covering those two in the later parts of this bootcamp. for now we’ll work on Database read.
Install firebase the same way you did for your React Bootcamp:

npm install --save firebase

Now,

Go to Firebase Console
Create a new project (Won’t go into details)

get the config details that look like this…

var config = {
  apiKey: "YadaYadaYada",
  authDomain: "hakuna-matata.firebaseapp.com",
  databaseURL: "https://hakuna-matata.firebaseio.com",
  projectId: "hakuna-matata",
  storageBucket: "hakuna-matata.appspot.com",
  messagingSenderId: "4567782345"
};
firebase.initializeApp(config);

Paste the following line inside index.android.js, just after import statements.

import * as firebase from 'firebase';

and you are done intergrating firebase in your app.

Dummy Data to firebase DB

Now to see if our implementation is working, let’s swap the dummy data in MainScreen with data from firebase. but wait we must first have some data in firebase to get data from firebase🤔 .
Let’s add some data

Download travel.json and unzip it anywhere on you pc.
Go to Firebase console
- open you project
- go to Database tab
- click on Three vertical dots Icon and select “Import JSON”
- Select the file you just downloaded
- Click on “Import”
Now you should have some initial data in your Firebase Database.

Data from Firebase

In MainScreen.js import Firebase with following command,
import * as firebase from 'firebase';
add following lines inside constructor
this.momentsRef = firebase.database().ref();

add following methods

componentWillUnmount(){
  this.momentsRef.off();
}
componentDidMount() {
    try{
      this.momentsRef.on('value', (snap) => {
        this.setState({
          moments : Object.keys(snap.val()).map((orderItemKey,index) => {return snap.val()[orderItemKey]})
        });
        console.log("apples_after 2"+JSON.stringify(this.state.items) + "\n");
      });
    }catch(e){
      console.log(e);
    }
}

componentDidMount() is invoked just after the constructor and before the render method, and componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. So the above code will try to get the data from the database on component mount and will set state moments to the data.

initialize state moment in constructor to dummy_data

  constructor(props){ 
      super(props);
      this.state = {
          moments : dummy_data
      };
      this.renderListItems = this.renderListItems.bind(this);
      this.momentsRef = firebase.database().ref();
    }

change source of map from dummy_data to this.state.moments in render method. the moments state is initialized to dummy_data and set to firebase data after we get it in componentDidMount().

With this you have successfully loaded data from firebase and displayed it in our App. Marching ahead to Part VI…