Firebase + React Native (A Quick Start)

React Native has started to become the buzz word recently in the world of hybrid apps. But the best part about it is the efficiency and the performance of it. React Native actually works pretty differently when compared to other other hybrid apps like PhoneGap and Ionic. It follows the architectural pattern of the popular front end framework (React) by Facebook and communicating with native APIs and libraries it creates a bridge between the mobile's JavaScript engine and the native APIs, so that your JS code performs native operations.

Even though React Native helps you build mobile applications - whereas when you need to build a distributed architecture for your app, you need to rely on a back end architecture. But writing a server code is yet another huge task, so that's where Firebase comes into the picture for survival.

Firebase helps you maintain the backend infrastructure for your mobile app.

Want to build an app that's scalable like a walk in the park? Talk to us.

The Story

Recently I was exploring React Native to build a cross platform application for my clients. While I had already decided on the architecture of the application and considering maintainability as the primary focus I decided to go with React Native + Firebase combo as I don't have to face the pain for managing a server, scaling up and backups.

A Twist

But when I walked through the Internet I couldn't find an SDK for Firebase to use with React Native, since RN is built with JavaScript, I decided to use the web SDK for the development. But that's where a lot of things started breaking as it's not the browser environment. I'll walk you through all the challenges that I faced during the development.

The Challenges and solution

These are some of the following challenges I faced with the Web SDK in React Native Environment,

Social Login

When your app is completely focused towards users and bringing them into your platform in a more easier way is the social login. But the Web SDK uses the browser's popup window technology for getting the permission for the app login, whereas in React Native we don't have the browser concept, so we needed a different approach.

According to the documentation we need to get the access token of the user by some third party and then give it to the firebase signInWithCredential method and login the user.

Libraries that helped me :

1. react-native-fbsdk

2. react-native-twitter-signin

Firebase Storage

The next big challenge is when you try to upload files, this is becoming a basic requirement for any app recently , that too for social apps where the user is allowed to set profile picture and stuff.

When I tried to use the Web SDK, it wasn't working. The reason is that in the mobile environment you can get only the filepath whereas the sdk need the blob of the file which is given only by the browser.

So in order to bridge this gap, I've used a couple of 3rd party libraries that helps me to select the file and get the blob from the file path. Once you get the blob you can use Web SDK to put the file to firebase by passing its blob.

Libraries that helped me :

1. react-native-file-picker

2. react-native-fetch-blob

Firebase Cloud Messaging

Push notifications are one of the essentials in modern apps for user engagement. With firebase you can send push notifications with help for FCM. But integrating that with your ReactNative project is such pain.

Luckily there is one library that helps you build it easily after a lengthy configuration process. Just start the listener wherever you want also this library helps you send custom local notifications as well.

react-native-fcm

Hope this helped you crossing these hurdles pretty faster than I took. There are lot more to come in ReactNative and Firebase which I hope bridges a gap between the two worlds. I've made an app using all these and you can fork it or contribute to it here

varun-raj/Checkin

Also I've given a talk on the same which you can find below.