Firebase offers a robust set of tools and services for building high-quality apps, making it a popular choice among developers. It simplifies backend development with its real-time database, authentication services, cloud storage, and more. In the context of React Native, one of the valuable features that Firebase provides is a simplified structure for sending push notifications, which are essential for engaging users by delivering timely and relevant information. So-called Firebase Cloud Messaging (FCM) is a versatile and reliable solution for sending notifications across various platforms, making it a go-to for developers seeking to maintain user engagement and drive app usage.
This article provides a step-by-step guide to send push notifications. It covers sending device tokens to a backend server (implemented in Java), and using these tokens to send notifications from the backend.
First, we will install and set up @react-native-firebase/app dependency. You can follow the 4 steps in the installation guide provided in the documentation of the dependency. Basically, you will need to:
Then, we will need to do some changes on each platformModify native code in each platform
For Android, that means adding the following code in /android/build.gradle file:
And then adding the following code in /android/app/build.gradle:
For iOS, we need to do some changes in the /ios/{projectName}/AppDelegate.mm file
First, at the top right after '#import "AppDelegate.h"', add the following:
Now that we have the base dependency installed and configured, we will continue with the installation and configuration of the @react-native-firebase/messaging dependency. As is explained in his installation guide you will need to install the dependency via npm or yarn, and for iOS you need to do an extra step as is explained in the iOS Messaging Setup guide.
Then, verify that your app is building well running yarn android or yarn ios depending on what platform you are.
Add the following to the AndroidManifest.xml of your react native application:
Then, ask the user for permission to receive push notifications. You would need to add the following logic in the first screen of you application (for example the login or home screen):
Finally, add a listener for foreground notifications. In you App.tsx add the following code:
This example is only for foreground notifications, but we recommend reading the usage documentation of the dependency to understand the different notifications and how they are handled depending on the application state and the platform.
Once Firebase is configured, the next step is to obtain the device token, which uniquely identifies the app instance. This token must be sent to a backend server to facilitate sending push notifications. The following code demonstrates how to retrieve the token and send it to a backend server.
Retrieve Device Token:
The backend server, implemented in Java, will use the device tokens to send push notifications. Firebase Admin SDK provides the tools necessary for sending notifications to specific devices.
We will need to generate a JSON file with the firebase credentials to send push notifications. We will create a custom role to only send push notifications (permission cloudmessaging.messages.create), a custom service with that role and finally the credentials to use that service and download the json file - we will skip that part for the sake of conciseness.
Now, let's proceed to adding the Firebase Admin SDK dependency to the backend project. Assuming maven, that can be done by adding the following to the pom.xml file.
Then we need to initialize Firebase in the backend
Ensuring that the credentials are provided as a property.
Note that we load credentials using an environment variable instead of a file. For local testing you can simply copy the content of the json and export it to an environment variable. In a production environment like AWS you can use Secret Manager service to safely set the credentials to an environment variable in the container that runs the application.
Now that the set up is done, we can use the tokens sent from the backend to send new messages from
Integrating Firebase with a React Native app for push notifications is a relatively straightforward process that involves setting up Firebase in the app, obtaining and sending device tokens to a backend server, and using these tokens to send notifications. Firebase's comprehensive suite of tools simplifies this process, ensuring reliable and timely delivery of notifications. This article provided a detailed guide to implementing this functionality, covering both frontend and backend integration, thereby enabling developers to enhance user engagement effectively.
