Getting started with Firebase in React Native project
Have you ever had an idea for next billion-user application, but you gave up on it, because you have no backend experience?
Or maybe you wanted to test 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 fullstack project?
If you’re with me, behold, here comes the 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) database, 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 https://firebase.google.com/pricing/.
In this article, I’ll show you a way to create 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 adequate folder in your RN project (like ios/ and android/).
Create Firebase project
Head over to https://console.firebase.google.com and create a new project. When you finish, Firebase Console will welcome you with such screen:
Firebase is collection of services, such as Authentications, Hosting or Database. To start using a service, simply go to adequate section on the side menu and enable it. Here’s example of 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. More information about products can be found here: https://firebase.google.com/products/
Don’t close the Console yet, we’ll need it in few minute.
Creating React Native app
react-native-cli create a new project with:
react-native init nameOfApp
Now, you should be able to run the app by either using
react-native run-ios or
react-native run-android .
Installing official SDK
Sweet, now we have to add official Firebase SDK on native side on both platforms. We’re heading back to Firebase Console.
From 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, thenfollow 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 settings icon on side menu. There, click Add App and pick Android.
Note: Android package name can be found at
google-services.json file and place it at
android/app/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
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:
Simply put, we’ll just inform native side of what do to with Firebase, and keep our JS thread clean for animations and other stuff.
Let’s setup RNFirebase.
During Firebase SDK installation, you’ve created a Podfile at
ios/folder. We needto add few lines there to install necessary modules for RNFirebase.
And run pod install. From now on, use
ios/[YOUR APP NAME].xcworkspace instead of
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/settings.gradle add those lines:
Next, head to
android/app/build.gradle file and add:
And finally, let’s add few more lines in our
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
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!