Add Firebase to React native
Tags: Firebase, React Native, Tutorial

We’ve been using Firebase with React native last couple of years and it’s fantastic, easy to use and you can achieve many great things in a short time.

Firebase provides many features:

Cloud Messaging — Firebase allows us to deliver and receive messages in a more reliable way across platforms.

Firebase allows us to deliver and receive messages in a more reliable way across platforms. Authentication — Firebase has little friction with acclaimed authentication.

Firebase has little friction with acclaimed authentication. Test Lab — Test in the lab instead on your users.

Test in the lab instead on your users. Hosting — Firebase delivers web content faster.

Firebase delivers web content faster. Remote Configuration — It allows us to customise our app on the go.

It allows us to customise our app on the go. Dynamic Links — Dynamic Links are smart URLs which dynamically change behaviour for providing the best experience across different platforms. These links allow app users to take directly to the content of their interest after installing the app — no matter whether they are completely new or lifetime customers.

Dynamic Links are smart URLs which dynamically change behaviour for providing the best experience across different platforms. These links allow app users to take directly to the content of their interest after installing the app — no matter whether they are completely new or lifetime customers. Crash Reporting — It keeps our app stable.

It keeps our app stable. Real-time Database — It can store and sync app data in real-time.

It can store and sync app data in real-time. Storage — We can easily store the file in the database.

What we will do today is to connect Firebase with our React native project and believe me it’s easy as riding a bike, so let’s start.

We will use well documented package https://rnfirebase.io/

Create Firebase project

Open https://firebase.google.com/ and go to Get started. You will see your recent projects if you have them already, to create a new one click on “Add project” which will lead your to first step.

Simply enter your Project name and move to the next step.

This step will ask you do you want to use Google Analytics for your project, and of course you will do. Press Continue and let’s move further.

Select your Google Analytics account and that’s it. Your new Firebase project is added.

2. Add Firebase to React Native project

We will assume that you already created a React native project and it’s ready. Next step will be to install dependencies and add Firebase configuration.

Install the React Native Firebase “app” module to the root of your React Native project with NPM or Yarn:

# Using npm

npm install --save @react-native-firebase/app # Using Yarn

yarn add @react-native-firebase/app

The @react-native-firebase/app module must be installed before using any other Firebase service.

Android setup

Go to Firebase dashboard and click on Android icon to start a setup.

Skip the third step because we are going to do that a few seconds later, don’t forget to download google-services.json.

Now take the google-services.json and place it inside of your project at the following location: /android/app/google-services.json

To allow Firebase on Android to use these credentials, we need to enable that by adding google-services plugin inside of your /android/build.gradle file:

buildscript {

dependencies {

// ... other dependencies

classpath 'com.google.gms:google-services:4.3.3'

// Add me --- /\

}

}

And lastly, run the plugin by adding the code below into your /android/app/build.gradle file:

apply plugin: 'com.android.application'

apply plugin: 'com.google.gms.google-services' // <- Add this line

Voila! Run the app on android and start using the features.

npx react-native run-android

iOS setup

Same as first step for android, go to your dashboard, add app and press iOS icon.

Skip all other step, but before moving from the second step, download GoogleService-info.plist.

Using Xcode, open the projects /ios/{projectName}.xcodeproj file (or /ios/{projectName}.xcworkspace if using Pods).

Right after the project is opened, right click on the project name and “Add files” to project, as you can see on the image below:

To allow Firebase on iOS to use these credentials, we need to add two things. First, open your /ios/{projectName}/AppDelegate.m file, and add the following at the top:

#import "AppDelegate.h" // add this line

#import <Firebase.h>

Within your existing didFinishLaunchingWithOptions method, add the following to the top of the method:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

#ifdef FB_SONARKIT_ENABLED

InitializeFlipper(application);

#endif



// add this line

if ([FIRApp defaultApp] == nil) {

[FIRApp configure];

}

}

Final step would be install pods and run the app.

# Install pods

npx pod-install # Run the app

npx react-native run-ios

That’s it guys! Everything is prepared and you are ready to build a cool app with Firebase features.