Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Integrating Firebase with React Native (iOS and Android)

Published by: Noc Folio3 | September 6, 2019
SCROLL AND BE AMAZED!
Home > Blog > Integrating Firebase with React Native (iOS and Android)

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.

Firebase integration with React Native

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:
Integrate React Native app with Firebase
  • 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-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: 

  • 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:

Integrate React Native with Firebase Console

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.


About Noc Folio3

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous How to go from idea to app: building the right feature set
Next How to Launch an App the Right Way
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]