Firebase Tutorial episode #1
Kickstart your React Native app with Firebase — Cloud Firestore (Tutorial #0)
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services. This is not an “intro to React Native” tutorial so we won’t cover basic things, but only Firebase specific topics, so you will need some React Native knowledge to keep up with the pace.
Today, in Ep. 0, we will look at what is Firebase and create the base project. We will build forward this project in Episode 1.
One of the biggest benefit of React Native is that you can rapidly code cross-platform applications. You just started and suddenly realize that you are just created an MVP. Why don’t you lower the backend development costs & time in the MVP period by using a BaaS solution like Firebase?
What is Firebase?
Firebase — as they refer themselves — is a mobile & web application development platform, created by Firebase Inc. then later acquired by Google. The platform has a really big & growing user base, mostly mobile developers tend to use it. This is basically a platform offering many switchable modules. Why don’t you take advantage of mobile analytics, push notification and crash reporting without headaches? Use Social/email/phone authentication, NoSQL database, and countless other features with ease.
React Native & Firebase
React Native’s ecosystem is relatively new, the community is still looking for best practices but in past months react-native-firebase package gained a lot of popularity because of the connected native modules and the easy to use API. The third major version came out in October 2017 bringing us some exciting new features, like Cloud Firestore, phone authentication, and more easier app integration. We will use the latest (at this time v3.1.1) version in this tutorial. Docs time:
RNFirebase makes using Firebase with React Native simple. It is a light-weight layer sitting
Our starting app (Fakestagram)
We will create an application, called Fakestagram, where the users are able
Creating the application
First we create a stater project:
Note: We need to use 0.49.5 version because react-native link is updated on the 0.50 and won’t work well with CocoaPods. Now you have to link the project to your application native projects by
react-native link react-native-firebase
Creating the Firebase Project
First, log in with your
Firebase new project
After you filled in the necessary field, click on Create project and you’ll land on Firebase dashboard. There you can choose your application(s) types (iOS, Android or Web). We’ll need to add iOS and Android too. So add both of them.
Android & iOS modals
You’ll need to download the google-services.json for Android to android/app/ and GoogleServiceInfo.plist for iOS to ios/fakestagram.
Add the SDK to your project as the Firebase console asks, to iOS with Cocoapods and Android with
On iOS add the following to your ios/fakestagram/AppDelegate.m file:
A) At the top of the file: #import <Firebase.h>
B) At the beginning of the didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method add the following line:
After that go to your ios folder, run pod init and add this to your target: pod ‘Firebase/Core
You have successfully linked your Firebase app to your React Native project. On the next episode, we will take a look at the new Cloud Firestore and create our database.
Register to our next workshop!
Subscribe to our newsletter, and we will provide you more practical tips regarding mobile development:
Bene studio HQ
Andrássy út 66., 1062 Budapest
+36 70 682 9425