React Native, Firebase and You

Authors

Krzysztof Borowy

Software Engineer

Callstack

Have you ever had an idea for the next billion-user application, but you gave up on it, because you have no backend experience?
Or maybe you wanted to test a few things out, but turns out you need to use some database and/or user authentication, so that’s another no-no?

What if I told you, you don’t have to have any backend skills and still be able to develop a full-stack project?

If you’re with me, behold, here comes the Firebase!

What is Firebase?

Firebase is a backend-as-a-service platform that helps you create web and mobile applications with no server-side programming. Things like authentication, (real time) databases, cloud storage, analytics and many more are there, waiting for us to put them in good use.

We’re given all those goodies for free. If you want to see full-pricing information, head to the Firebase pricing.

In this article, I’ll show you a way to create a Firebase project and integrate it with your app.

Update: This article has been updated to reflect the latest changes in Firebase world:

1. A new document database Cloud Firestore is in beta and it’s awesome.
2. react-native-firebase 3.0.3 is out

Preparations

Note: All platform-specific installation have to be done in an adequate folder in your RN project (like ios/ and android/).

Create a Firebase project

Create a new project in a Firebase console. When you finish, it will welcome you with such a screen:

Enable Firebase services

Firebase is a collection of services, such as Authentications, Hosting or Database. To start using a service, simply go to the adequate section on the side menu and enable it. Here’s example of an Authentication module screen:

Firebase gives us many methods to authenticate users, from basic email/password combination, to third party services like Facebook, Twitter or Github. Here's more information about products.

Don’t close the Console yet, we’ll need it in a few minutes.

Creating a React Native app

Using <rte-code>react-native-cli<rte-code>, create a new project with:

react-native init nameOfApp

view raw react_native_cli hosted with ❤ by GitHub

Now, you should be able to run the app by either using <rte-code>react-native run-ios<rte-code> or <rte-code>react-native run-android<rte-code>.

Installing official SDK

Sweet, now we have to add the official Firebase SDK on native side on both platforms. We’re heading back to Firebase Console.

iOS

From the Firebase Console main screen, press Add Firebase to your iOS app. Popup will appear with some inputs to fill in.

iOS Bundle ID can be found in Xcode, General tab.

When you fill that up, click Register, then follow the guidelines from Firebase, where you’ll add GoogleService-Info.plist in your project, and install required pods.

Android

From your Firebase project screen, go to project settings by clicking the settings icon on the side menu. There, click Add App and pick Android.

Note: Android package name can be found at android/app/build.gradleat applicationId field.

Next, download the<rte-code>google-services.json<rte-code> file and place it at <rte-code>android/app/<rte-code> level. Last step is adding Firebase SDK to our project — just follow Firebase steps.

Installing Firebase in our App

We’ll need react-native-firebase, so let’s install it.

yarn add react-native-firebase<br>// or<br>npm install react-native-firebase

view raw react_native_firebase.js hosted with ❤ by GitHub

In case you wonder why we use this module, instead of Web version of Firebase (which is also available to use in RN), here’s the quote from RNFirebase README:

RNFirebase provides a JavaScript bridge to the native Firebase SDKs for both iOS and Android therefore Firebase will run on the native thread, allowing the rest of your app to run on the JS thread. The Firebase Web SDK also runs on the JS thread, therefore potentially affecting the frame rate causing jank with animations, touch events etc.

Simply put, we’ll just inform native side of what to do with Firebase, and keep our JS thread clean for animations and other stuff.

Let’s set up RNFirebase.

iOS

During Firebase SDK installation, you’ve created a Podfile at <rte-code>ios/<rte-code>folder. We need to add few lines there to install necessary modules for RNFirebase.

  
          #This will be different
        
          target 'YouAppNameHere' do
        
            #Firebase and RNFirebase pods
        
            pod 'Firebase/Core'  
        
            pod 'RNFirebase', :path => '../node_modules/react-native-firebase'
        
            # Authentication module for RNFirebase
        
            pod 'Firebase/Auth'
        
            #React Pods
        
            pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
        
            pod 'React', :path => '../node_modules/react-native', :subspecs => [
        
              'BatchedBridge', # Required For React Native 0.45.0+
        
              'Core',
        
              'DevSupport'
        
            ]
        
          end

view raw example_podfile hosted with ❤ by GitHub

And run pod install. From now on, use <rte-code>ios/[YOUR APP NAME].xcworkspace<rte-code> instead of <rte-code>.xcproj<rte-code> file.

Note: Some of you might notice that I’ve added React Pods to install, meaning that we’re going to have 2 versions of React in iOS project. I did it to avoid Firebase errors during React linking. If you want to see how to use only one version of React (using cocoapods), check out instructions here.

Android

In <rte-code>android/settings.gradle<rte-code> add those lines:

  
          include ':react-native-firebase'
        
          project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

view raw android_settings_gradle hosted with ❤ by GitHub

Next, head to <rte-code>android/app/build.gradle<rte-code> file and add:

  
          dependencies {
        
            // Add to dependencies
        
            compile(project(':react-native-firebase')) {
        
              transitive = false
        
            }
        
            compile "com.google.firebase:firebase-core:11.4.2"
        
            // If you are receiving Google Play API availability issues, add the following dependency
        
            compile "com.google.android.gms:play-services-base:11.4.2"
        
          }

view raw android_app_build_gradle hosted with ❤ by GitHub

And finally, let’s add few more lines in our <rte-code>android/app/src/main/java/com/[YourAppName]/MainApplication.java<rte-code>:

  
          // This will vary
        
          package com.example.application;
        
          // Core RNFirebase
        
          import io.invertase.firebase.RNFirebasePackage;
        
          public class MainApplication extends Application implements ReactApplication {
        
              @Override
        
              protected List<ReactPackage> getPackages() {
        
                return Arrays.<ReactPackage>asList(
        
                    new MainReactPackage(),
        
                    new RNFirebasePackage()  // Core
        
                );
        
              }
        
            };
        
            // ...
        
          }

view raw MainApplication_android.java hosted with ❤ by GitHub

And we’re done! Our App is ready to implement some cool stuff with Firebase!

TL;DR

I’ve created a repo with prepared app. You just need to provide your own <rte-code>GoogleService<rte-code> files.

Summary

Next time, we’ll dive into actual usage of Firebase: User authentication (using email/password, Facebook, Twitter or Github ), database usage (real-time DB and new Cloud Firestore), storage and more, so stay tuned!

I hope you enjoyed this article, so stay tuned for the next part!

Integrating backend services with React Native?

We assist with seamless backend integrations for mobile apps.

Let’s chat

Insights

Learn more about Backend

View all

Nov 4Article

Setting Up Notifications With AWS Amplify Gen 1

Learn how to integrate AWS Amplify with React Native for Android, focusing on live messaging and push notifications. This guide walks you through the setup.

Aug 10Podcast

Databases for Mobile Apps: React Native & Realm

Join us on a deep-dive into the complex world of databases for mobile apps, and take a closer look at what the marriage of React Native, Realm & MongoDB can bring.

Dec 28Article

Simple Chat App With React Native - Part II

Read the article and learn how to connect the frontend of the messaging app with its backend.

Oct 23Article

Simple Chat App With React Native - Part I

Learn how to create the backend for a messaging app in React Native with our blog post. We cover the topic in a two-part series.

Mar 19Tutorial

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Learn how React Native AI uses a unified provider model to switch between cloud and on-device LLMs without rewriting application logic, enabling reliable AI experiences online and offline.

Mar 12Tutorial

Build Smarter Apps: Tool Calling & AI Orchestration Explained

Learn how on-device models in React Native can call tools, interact with external APIs, and return structured outputs you can use directly in application logic.

Mar 5Tutorial

MLC LLM + React Native: On-Device AI Without the Pain

Learn how to run third-party on-device LLMs in React Native using MLC LLM. Choose your models, run them efficiently across platforms, and keep a unified JavaScript API with React Native AI.

Feb 24Tutorial

Intelligent Fallbacks with Apple Intelligence in React Native

Learn how to use Apple’s built-in Foundation Models in React Native apps, reduce memory usage, and enable fast, fully on-device AI with React Native AI Apple.

Feb 10Tutorial

What Is the React Native AI SDK? A Complete Intro & Quickstart

Learn why on-device AI matters for React Native apps, how local LLMs behave offline, and what problems React Native AI is designed to solve from day one.

Jan 29Tutorial

Implementing an Android TurboModule with Kotlin

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Jan 19Tutorial

Working with Different Threads in Swift TurboModules

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Jan 9Tutorial

How to Add Type-Safe Constants to Swift TurboModules

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Dec 30Tutorial

Adding Event Emitters to Your TurboModule in Swift

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Dec 22Tutorial

Writing Your First TurboModule in Swift

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

	#This will be different
	target 'YouAppNameHere' do

	#Firebase and RNFirebase pods
	pod 'Firebase/Core'
	pod 'RNFirebase', :path => '../node_modules/react-native-firebase'

	# Authentication module for RNFirebase
	pod 'Firebase/Auth'

	#React Pods
	pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
	pod 'React', :path => '../node_modules/react-native', :subspecs => [
	'BatchedBridge', # Required For React Native 0.45.0+
	'Core',
	'DevSupport'
	]




	end

	include ':react-native-firebase'
	project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

	dependencies {
	// Add to dependencies
	compile(project(':react-native-firebase')) {
	transitive = false
	}
	compile "com.google.firebase:firebase-core:11.4.2"

	// If you are receiving Google Play API availability issues, add the following dependency
	compile "com.google.android.gms:play-services-base:11.4.2"
	}

	// This will vary
	package com.example.application;

	// Core RNFirebase
	import io.invertase.firebase.RNFirebasePackage;

	public class MainApplication extends Application implements ReactApplication {

	@Override
	protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
	new MainReactPackage(),
	new RNFirebasePackage() // Core
	);
	}
	};
	// ...
	}

What is Firebase?

Preparations

Create a Firebase project

Enable Firebase services

Creating a React Native app

Installing official SDK

iOS

Android

Installing Firebase in our App

iOS

Android

TL;DR

Summary

Ship priority features with React and React Native experts.

React Native Development

React Development

Next.js Development

Expo Development

Node.js Development

C++ Development

Module Federation Development

On-Device AI

Feature UX/UI Design

Cross-Platform Design Systems

Learn more about Backend

Setting Up Notifications With AWS Amplify Gen 1

Databases for Mobile Apps: React Native & Realm

Simple Chat App With React Native - Part II

Simple Chat App With React Native - Part I

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Build Smarter Apps: Tool Calling & AI Orchestration Explained

MLC LLM + React Native: On-Device AI Without the Pain

Intelligent Fallbacks with Apple Intelligence in React Native

What Is the React Native AI SDK? A Complete Intro & Quickstart

Implementing an Android TurboModule with Kotlin

Working with Different Threads in Swift TurboModules

How to Add Type-Safe Constants to Swift TurboModules

Adding Event Emitters to Your TurboModule in Swift

Writing Your First TurboModule in Swift