React Native Firebase – Firebase Integration in React Native

Firebase is a well-known Backend-as-a-Service (Baas). It offers top-notch mobile application development experience to web developers. Firebase is Google’s mobile app development platform that empowers you to create, enhance, and boost your app’s growth.

Firebase is a great platform that helps developers to build user-centric products without taking the burden of managing the servers.

You don’t require to create APIs, manage databases, and server. Firebase is an all in one platform that makes you work less and put you in a comfortable zone.

• Test Lab
• Crashlytics
• Authentication
• Cloud Firestore
• Cloud Functions
• Realtime update
• Easy A/B testing
• Push notifications
• Analytics monitoring
• Easy Server management
• Single-page app hosting
• Real-time communication
• Hosting and cloud storage

Prerequisite

We require given below tools, frameworks and packages to get along with this tutorial.

• Node
• NPM
• IDE
• React Native
• React Native CLI
• Xcode
• Android Studio

Install React Native App

React Native is a well known open-source framework created by Facebook. It allows you to build a native mobile application with the help of JavaScript.

Use the following command to install React Native CLI on your system.

npm install -g react-native-cli

Install React Native project.

react-native init rnfirebase

Head over to the project directory.

cd rnfirebase

Run React Native App

#Android
You should have Java environment variables configured in your system and must have Android Studio to run the Android app on emulator.

react-native run-android

#iOS
You must have Xcode installed and configured on your system to run the react native app on the iOS emulator.

react-native run-ios

Set up Firebase

In order to establish a connection between React Native and Firebase, first, we must create and configure the project in Firebase.

Step #1:

Head over to console.firebase.google.com and create Firebase project.

Step #2:

Next, we will define the Firebase project name for react native application.

Step #3:

Now, Firebase project has been created. So, In the next step, we will add an app to get started.

Step #4:

Next, we will add Firebase to our web app. We have to provide the app’s nickname in ‘My web app’ input field.

Step #5:

Now, we need to copy the firebaseConfig details. This Firebase configuration makes the connection between Firebase and React Native application.

Step #6:

See left side menu items click on the ‘Database’. Look for Realtime Database and click on the ‘create database’.

Integrate Firebase in React Native

We have already installed the react native app. Now, we will install the Firebase package using the following command.

npm install firebase --save

If you would like to install Firebase package via yarn package manager.

yarn add firebase

Create environment directory and also create config.js file inside of it.

Add and configure the Firebase Configuration in config.js file.

Here in config.js file we import the firebase and add the Firebase configuration code that we copied earlier.

import * as firebase from 'firebase';
const firebaseConfig = {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  }

Conclusion

That was the React Native Firebase example tutorial. In this tutorial, we learned how to add Firebase to React Native application.