Firebase + React Native (A Quick Start)
How to build a React Native App using Firebase as the backend with very little cost.
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.
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.
The Challenges and solution
These are some of the following challenges I faced with the Web SDK in React Native Environment,
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 :
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 :
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.
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
Also I’ve given a talk on the same which you can find below.