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:
- Go to the Firebase Console and add a new project.
- In that project, add your iOS and Android apps! It will ask for your app name and more 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 the app’s bundle Id be it 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 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:
- 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 through the terminal, and run the command:
pod init- It will generate a Podfile in the root of your /ios folder.
- Now, inside the Podfile, uncomment:
platform :ios, ‘9.0’- Add the following in the Podfile:
pod ‘Firebase/Core’, ‘~> 6.3.0’- Now run in terminal
$ pod install- To initialize 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-firebaseAndroid
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:
- 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 implemented (If you’re using the 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 Code errors. 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 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.
