React Native, Firebase and You

React Native, Firebase and You

In short

Firebase, a backend-as-a-service platform, simplifies web and mobile app development by offering services like authentication, real-time databases, and cloud storage without requiring server-side programming. The article guides you in creating a Firebase project, enabling services, and integrating Firebase with a React Native app. It emphasizes the benefits of using the react-native-firebase module over the web version to optimize performance. The installation process for iOS and Android is outlined, and the article concludes with a repository for a ready-to-use app, promising future insights into Firebase usage.

Getting started with Firebase in React Native project

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


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:

how to create a firebase project

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:

how to enable firebase services

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:

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>.

create react native app with firebase

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.


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.

ios bundle id

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


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.

how to add firebase to 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.

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.


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

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.


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

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

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

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


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


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!


No items found.
React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.