Azure Push Notification Hub for React Native

In one of my last projects in React Native we had to work with many Azure features. We were used to implement Push Notifications via Firebase Cloud Messaging, but in this case we were requested to use Azure instead.

We found quite a challenge when we tried to implement or test the sample code from this example provided by Microsoft. We also tried to use the most recommended packages like react-native-azurenotificationhub but we did not receive any notifications, not even local ones.

In this post, I will try to explain how we followed this other setup from Microsoft with some personal changes so we were able to implement Azure Push Notifications in our project.

We are going to use react-native-push-notification and react-native-community/push-notification-ios, so remember to run both setups of the libraries in your project before continuing with this post.

iOS Setup

iOS only needs the required certificates to enable the Push Notification Service. That is why an Apple Developer Account is necessary to create the required certificates for the app. What we will need is:

• A Developer or Distribution certificate
• An APNS (apple push notification service) certificate for development or production (this will depend on what type of certificate was created before)
• An Identifier for the app to define its bundle id
• A provisioning profile

I will explain the setup for the Distribution environment, but you can test this functionality on Development too.

Once you are inside the Apple Developer Account, head to Certificates, Identifiers & Profiles.

I would suggest starting to create the app Identifier. Remember to add the Push Notifications capability before creating the Identifier.

After creating the Identifier, we should create both certificates: one that will help us build the app, and one for the Apple Push Notification Service.

First, you should create the Distribution Certificate using your Certificate Signing Request that is created on your Mac or provided by your company. We must then get the .p12 file from this certificate because it will be used to set up iOS push notification on the Azure Console.

After doing that, we can create the Apple Push Notification Service by selecting from the list of services the option Apple Push Notification service SSL (Sandbox & Production) and then selecting the identifier created in the previous step.

Now, we can create the Provisioning Profile by selecting the Distribution Certificate created in the previous step and the app Identifier.

Remember to download both certificates and add them to the Keychain Access of your Mac, and set the Provisioning Profile on your XCode Project.

Android Setup

First of all, check that you have everything ready from react-native-push-notification in your AndroidManifest.xml.

A Firebase project is needed to help Azure Notification Hub in this OS. Don´t worry if you do not know how to create a Firebase project; it is very simple and you can get it with just your email.

Go to the Firebase Console and sign in to create a new project for an Android app.

Then, you will have to fill in some fields, but the most important one is the package name, which must be the same you used in your React Native project. You can also add a nickname and the keystore’s SHA1. After doing this, download the google-services.json file and add it to your project.

To get your keystore’s SHA1 or SHA256 you can run

      
      keytool -list -v -keystore your.keystore -alias keystoreAlias -storepass keystorePassword -keypass keyPassword

All this values were defined when you created your keystore file.

Now, we have created the Firebase project for Android and must get its key to set it up on the Azure Console. The key is located in Project settings > Cloud Messaging.

Copy this key and add it to your Azure Console. Now, we only need to add a code to our React Native app, and that’s it!

React Native Time!

The difficult part has already been completed. Now, the last step is to add a code and we are ready to receive notifications.

You can set it up to always receive them or only when the user has logged into your app; it is up to you.

I would suggest defining all Push Notifications’ functions in another file to separate them from the main code and make it cleaner.

If you want to test a local Notification, react-native-push-notification has a simple function to do it:

import PushNotification, { PushNotificationObject } from 'react-native-push-notification';

const CHANNEL_ID = 'your channel id';
const sendLocalNotification = (options: PushNotificationObject) =>
    PushNotification.localNotification({
        channelId: CHANNEL_ID,
        autoCancel: true,
        vibration: 100,
        ongoing: false,
        smallIcon: 'set your notification icon here',
        largeIcon: 'your other icon here',
        ...options
    });

We still need to configure and subscribe to the possible future notifications our app should receive. We will create a channel using PushNotification.createChannel and then configure our registration and how to manage incoming notifications using PushNotification.configure:

import PushNotificationIOS from '@react-native-community/push-notification-ios';
import PushNotification, { ReceivedNotification, PushNotificationObject } from 'react-native-push-notification';

// This channel should be the same as the local Notification function
const CHANNEL_ID = 'your channel id';

const onNotificationSubscriber = (notification: Omit<ReceivedNotification, 'userInfo'>) => {
    const { foreground, userInteraction, data } = notification;
    if (foreground && !userInteraction) {
        sendLocalNotification({ title: data?.title || '', message: data?.body || '' });
    }
    // Here you can manage the notification received if you want, for example, to run another task depending on what you have received
};
const pushNotificationConfig = () => {
    PushNotification.getApplicationIconBadgeNumber((count: number) => {
        if (count > 0)
            PushNotification.setApplicationIconBadgeNumber(count);
});
PushNotification.createChannel(
    { channelId: CHANNEL_ID, channelName: 'your channel name' },
    created => console.log('you can notify or do something here when the channel is created')
);

PushNotification.configure({
    onRegister: token => {
        if (token) {
        // save this token so you don’t have to register the device each time the app opens
        }
    },
    onNotification: notification => {
        onNotificationSubscriber(notification);
        notification.finish(PushNotificationIOS.FetchResult.NoData);
    },
    permissions: {
        alert: true,
        badge: true,
        sound: true
    },
    popInitialNotification: true,
    requestPermissions: true
});
};

The react-native-push-notification package allows you to add more props when you dispatch the notification, so be sure to check them out if you want any of them.

Now, you just have to run your app, check Azure Console is ready to go, and then test your notifications!

That’s it! Enjoy those beautiful pop-ups in your app and check you make them better by using the notification libraries and applying a better image or getting some analytics with them.