React Native With Firebase — Part 1

Hello All…. I know you are doing something special and now you can add one more hot technology in your technology stack. So let's play with Firebase using React Native.

What is Firebase?

Basically, Firebase is a platform (Google’s Product) which allow building web and mobile applications without a server-side programming language.

Firebase provides a real-time database which allows you to store data as well as sync data among users in real-time. It also provides multiple authentication systems, various APIs, hosting system, cloud messaging, etc.

Firebase Initial Setup (Back end set up)

For creating project follow the below steps:-
1. Visit the Firebase Console.

2. Click the Add project box as shown below:

3. A dialog will appear as shown below

• Enter your new project name and modify the project id and region if necessary
• Accept terms and conditions
• Click Create Project when finished
• Your project will now be created — this can take a few seconds
• Once created click the Continue button

4. Once created you’ll be redirected to the project homepage as shown below

5. Click the “Add firebase to your web app” link on the home screen (HTML tag like button) and note the config object (as bellow), we will need this later for the front end setup.

And that’s it!!! Now you can use the library within your JavaScript code line any other node module.

Front end set up

Now we have the backend set up, so we will use the firebase library for that we have to set up the react native project.

1. Create React Native Project:- For creating react native project, open our terminal and create the directory where you want to save the project and enter the following command.

$ react-native init DemoProject

2. Install the Firebase using the following command:-

$ npm install --save firebase

3. Then, open the project in your favorite IDE.

4. Whenever using firebase, make sure you import the module

import * as firebase from “firebase”;

5. Now we want to initialize the firebase in our application. For that open app.js and copy the config object in “Add Firebase to your web app” screen (Step 5 in back end setup)

var config = {
apiKey: "XXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXXXXXX",
projectId: "fXXXXXXXXXXXXXXXXXXXXXf",
storageBucket: "XXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(config);

That’s it for now…😊 In Part-2 we make a simple app for User registration, user log-in and log-out.

Thank you 😊 and Happy Coding 😍