Integrating Firebase with React Native (iOS and Android)

Have you ever had that moment while development when you can not or don’t want to work with the back-end to do stuff like deepLinking, authentication, database or etc? That is when Firebase comes in!

Beside the typical back-end related jobs, firebase comes with more power! Like, push notification, analytics, crash reports and much more! According to google:

Firebase is Google’s mobile application development platform that helps you build, improve, and grow your app.

With the jobs, firebase can do for us, every dev would love to integrate it in his /her app, he/she is building. So we are gonna discuss, how YOU can integrate Firebase in React-Native. Oh, and I am assuming that you already know react-native! HENCE, we are not gonna start with hello world app.

So, the first step is:

Create a project on Firebase:

• Go to Firebase Console and add a new project.
• In that project, add your iOS and Android apps! It will ask you, your app name and most importantly, your app’s bundle ID. It will look like this :

• After you have provided the necessary information, it will ask you to download a file (separate for iOS and Android), please do download it without hesitating. We will talk about, what this file is for, later.
• Please note that, every time you change app’s bundle Id whether it be iOS or Android. You will have to add a new app in your firebase project with new bundle Id, and download the new file again.

Integrating it with your app

Now coming back to react native! After creating the project in firebase we will install react-native-firebase library, it’s pretty simple:

npm install --save react-native-firebase

After installing the library, we now do the real work:

iOS

Remeber we downloaded a file when we created the app on firebase? We will be needing it now. For iOS, this file would be named as GoogleService-Info.plist. This file contains all of the information required by the Firebase iOS SDK to connect to your Firebase project. Now, what you have to do is to:

• Place the file in the root of your iOS app at ios/[YOUR APP NAME]/GoogleService-Info.plist
• Make sure that the GoogleService-Info.plist file has been added to your project within XCode
• If you don’t already have Cocoapods set up, install Cocoa Pods on OS, cd into your iOS folder in your RN project and run the command:

pod init

• It will generate a podfile in the root of your /ios folder.
• Now, inside podfile, uncomment :

platform :ios, ‘9.0’

• Add in podfile:

pod ‘Firebase/Core’, ‘~> 6.3.0’ .

• Now run in terminal

$  pod install

• To initilize the native SDK in your app, add the following to your ios/[YOUR APP NAME]/AppDelegate.m file

#import <Firebase.h>

• At the beginning of the didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method add the following line:

[FIRApp configure];

Now, you have successfully integrated firebase with your iOS app. Before running your app, link your sdk/library with running this command in terminal:

$ react-native link react-native-firebase

Android

If you haven’t linked the firebase sdk, in iOS setup then please link the firebase sdk with above command. Here, again we’ll start with the file we downloaded from firebase when we created the android app in our firebase project. The file for android would be named as google-services.json . Place this file in the root of your project at android/app/google-services.json and follow me:

• Add the google-services gradle plugin as a dependency to your project in the project level build.gradle file in order for android to parse that file:

buildscript {   
    // ...   
    dependencies {     
        // ...     
        classpath 'com.google.gms:google-services:4.2.0'   
    } 
}

• Add the following to the very bottom of your app android/app/build.gradle file, to apply the plugin to your project:

apply plugin: 'com.google.gms.google-services'

• The Firebase modules need to be installed as project dependencies. In the android/app/build.gradle file, add the following:

dependencies {
  // This should be here already
  implementation project(':react-native-firebase')
// Firebase dependencies
  implementation "com.google.android.gms:play-services-base:16.1.0"
  implementation "com.google.firebase:firebase-core:16.0.9"
...

• Please note that, due to some breaking changes in v12+ of the Android Firebase libraries, you’ll need to upgrade your Gradle version to at least v4.4 and make a few other tweaks as follows:

— In android/gradle/wrapper/gradle-wrapper.properties, update the gradle URL to gradle-4.4-all.zip.
— In android/build.gradle check that you have google() specified in the buildScript repositories section:

buildscript {
    repositories {
        google()  // <-- Check this line exists and is above jcenter
        jcenter()
        // ...
    }
    // ...
}

— In android/build.gradle update Android build tools to version 3.4.1:

classpath 'com.android.tools.build:gradle:3.4.1'

— In android/app/build.gradle update all your compile statements to be implementation (If you’re using latest version of RN then you would probably have it but just double check), e.g:

implementation project(':react-native-firebase')

— As per rnfirebase.io, when running your app from within Android Studio, you may encounter Missing Byte Codeerrors. This is due to a known issue with version 3.1.x of the android tools plugin: https://issuetracker.google.com/issues/72811718. You'll need to disable Instant Run to get past this error.

Please note that Google Play services from 11.2.0 onwards require their dependencies to be downloaded from Google’s Maven respository so add the required reference to the repositories section of the project level build.gradle (android/build.gradle):

allprojects {
    repositories {
        mavenLocal()
        google() // <-- Add this line above jcenter
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

Also note that when using react-native-firebase with Proguard enabled (minifyEnabled true in android/app/build.gradle) you need to update your proguard-rules.pro file (android/app/proguard-rules.pro) to include the following lines:

-keep class io.invertase.firebase.** { *; }
-dontwarn io.invertase.firebase.**

Conclusion

After performing all the steps, go back to firebase console and perform this step to make sure that your integration is successful:

The RNFirebasePackage only provides your application with access to Core features. Check out the rnfirebase.io installation guides to integrate other modules of firebase and see how to use them. Till now I have used Firebase crashlytics, push-notification, deep linking, and analytics, and it was all fun! Mostly, you would have to just add some dependencies on iOS and Android respectively and voila! Don’t forget to follow each step thoroughly written in it!