Push notifications make an app more complete. It is an essential plus because it will notify your users more often, therefore they will use your app more. What do you need to enable push notifications in your React Native project app? Keep reading!
Intro
Push notifications are the most used feature to send messages to users who have installed an app. That way, you can manage the notifications or alerts you want to send. Keep in mind that, in order to use the notifications, you will need to use Firebase. So, before starting, you must have a Firebase project already created to be able to use Firebase Cloud Messaging.
React Native FirebaseReact Native Firebase
React Native Firebase is the official recommended collection of packages that supports React Native for all Firebase services. It does that on both Android and iOS apps.
Before getting started, you need to have an active Firebase project. But, in case you do not, just follow these simple steps:
Installation
yarn add @react-native-firebase/app
First, download the google-services.json file and place it inside your project at the following location:
You can find google-services.json on Firebase> Settings > your project > Download google-services.json
For Android:
First, add the google-services plugin as a dependency inside your /android/build.gradle file.
After that, execute the plugin by adding the following to your /android/app/build.gradle file:
Finally, add your Google services to your Android app.
For iOS:
First, open Xcode and select your project > Select add files to your project.
Finally, add your googleService-info.plist
Firebase Cloud Messaging
Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that allows you to send messages reliably for free.
By using FCM you can notify a client app that a new email or other data is synced. Also, you can send notification messages to drive user re-engagement and user retention. For use cases, such as instant messaging, a message can transfer a payload of up to 4KB to a client app.
Installation
To start with the installation process you must have installed and already configured @react-native-firebase/app
Now, install Firebase Messaging in the project; use the command yarn add @react-native-firebase/messaging. If you are developing your app using iOS, run this command instead cd ios/ && pod install
Type of notifications
Firebase Cloud Messaging will help you send messages to all real iOS and Android devices. The message that will be displayed in the app will depend on the action.
There are three types of notifications: Foreground, Background, and Quit. Depending on the state, the application will display certain message.
- Foreground: When the application is open and in view.
- Background: When the application is open in the background (minimized). This typically occurs when the user has pressed the "home" button on the device or when they have switched to another app via the app switcher.
- Quit: When the device is locked, or the application is not active or running. The user can quit an app by "swiping it away" via the app switcher UI on the device.
Display Notifications
To start displaying a notification first you need to request permissions to the user on iOS. That happens because it prevents messages containing notifications or alert payloads from being shown unless you have received explicit consent from the user.
Foreground Messages
To listen to messages in the foreground, call the onMessage method inside your application code.
The remoteMessage property contains all the information that was sent on FCM. In this example, the data is displayed on an alert.
Background & quit state messages
When the application is in the background or quits state, the onMessage handler will not be called when receiving messages. Instead, you need to set up a background callback handler via the setBackgroundMessageHandler method.
The handler must return a promise once your logic has completed freeing up device resources. It must not attempt to update any UI (e.g. via the state) - you can, however, perform network requests, update local storage, etc.
The remoteMessage property contains all the information that was sent by FCM. In this example, the data is displayed on Console.log.
Send Notification
First of all, to send a push notification, you need to create a new notification on Firebase at the Cloud Messaging option to open the menu.
The first section is filled in the fields with the information the notification will contain, click on "Next".
The second section is to select the target. There, you can decide if you want to send the notification to a specific person or some specific target, such as app version, language, country, etc.
The third section allows you to set the delivery day of the message.
The last sections are optional, but you can add some extra info if you want.
When you send the message, it will appear that it is already registered to be dispatched on the indicated date.
When the date arrives, you will receive the notification on your cell phone.
iOS Messaging Setup
In iOS you have to do some extra steps to set up Firebase Messaging, so you need an Apple Developer Account to enable the push notifications. Let's get started.
Open your project's workspace on Xcode, select the project target, and select the "Signing & Capabilities" tab.
Click on the "+ Capabilities" button and search for "Background Modes" to add it to the project.
Once you select "Background Modes", you need to enable the background so it fetches "Remote notifications".
When you are done with the Xcode configuration, it is necessary to link APNs with FCM. Go to Apple Developer, navigate to the Certificates, Identifiers & Profiles tab, and select Keys.
Configure your key by selecting the Apple Push Notification service (APNs), and click the "Continue" button.
Copy the Key ID and download the File to add it to Firebase
Now add Key ID and the file on your Firebase Project. On the Firebase console, navigate to the "Project settings" and select the "Cloud Messaging" tab. Select your iOS application under the "iOS app configuration."
Now you have to create the app identifier so the push notifications work in production. (Your bundle ID can be obtained within Xcode, under the "General" tab for your project target). Enter the "Bundle ID" copied from Xcode.
Scroll down and enable the "Push Notifications."
Generate the provisioning profile to enable communication between Apple and the app.
On the "Profiles" menu item register a new Profile. Select the "iOS App Development" checkbox and click "Continue".
Finally, in Xcode, make sure you have selected the correct provisioning profile.
Now, you can get notifications in iOS.
Conclusion
Push notifications have tremendous potential and are an essential communication channel. They allow you to have more interaction with users when they are using an application. If you do not have push notifications enabled in your app, it is time to enable them to make your app even more complete. This will help you notify your users more often, therefore they will use the app more, but remember, avoid abusing spam!
