React Native Push Notifications with Firebase
Last week, Swizec Teller wrote an fantastic tutorial on adding push notifications to your React Native app using Cloud Messaging and Cloud Functions. Swizec’s tutorial saved me a substantial number of hours (if not days) in order to setup notifications in my react native project: he rocks.
In this story, I’m following-up by providing some tips and strategies for the last mile of your implementation. My use case for notification is the typical one for social networks. As a user, you receive a notification every time someone likes one of your post, or comments on it, or replies to a comment. You can see the flow here. Each user has his own notifications document in Firebase. Every time an action is done, we add a row to the document. Some actions need to notify several peoples. In this instance, we use Firebase fan-out capability.
Cloud Functions
Serverless architectures are great. And if you are not using Typescript or Flow: you really should. In a previous story, I shared some tips on setting up typescript for Cloud functions. We use a database trigger to listen for new notifications. These database triggers provide an extremely convenient way to specify a path component as a wildcard. Based on the data layout described above, our trigger looks like this:
Once the notification is built, we send it to the users dedicated topic. Note the Notification type at like 5. This type has been generated from firebase bolt. As describe in this story, this ensure that refactoring you data model affects database rules, react code, and functions.
React Native FCM
On the React side, we ask for permissions to send notifications once the user is logged-in. If you are using Firebase for authentication, it looks like:
If the app is opened by the user tapping on a notification, we route the app to the appropriate location.
Et voilà
I hope this article was helpful to you, and I look forward to receiving your feedback.
Interested in premium React Native Starter kits based on Firebase? Checkout the links below.
