Site icon Mobile App Development Services

Integrating Firebase with React Native (iOS and Android)

Noc Folio3

Although known mostly for its authentication services, firebase also comes with other powerful functionalities like, push notifications, analytics, crash reports, and much more! Integrating Firebase with your React Native app can help you quickly deploy, improve, and grow your app.

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 into his/her app. So, we are going to discuss, how integrating Firebase with React Native can help you do wonders. 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:

Integrating it with your app

Now coming back to React Native! After creating the project in firebase we will install the 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

Remember, 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, all you have to do is to:

pod init
platform :ios, ‘9.0’
pod ‘Firebase/Core’, ‘~> 6.3.0’
$  pod install
#import <Firebase.h>
[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 the 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: 

buildscript {   
    // ...   
    dependencies {     
        // ...     
        classpath 'com.google.gms:google-services:4.2.0'   
    } 
}
apply plugin: 'com.google.gms.google-services'
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"
...

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

classpath 'com.android.tools.build:gradle:3.4.1'
implementation project(':react-native-firebase')

Please note that Google Play services from 11.2.0 onwards require their dependencies to be downloaded from Google’s Maven repository 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 the 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 completely as written while integrating Firebase with your React Native app.