React Native Azure Notification Hub

React Native module to support Azure Notification Hub push notifications on Android, iOS, and Windows.

Quick Links

- Getting Started
- Create a Notification Hub
- Android Installation
- Windows Installation
- iOS Installation
- JavaScript Configuration
- Publishing Notifications
- License
- Code of Conduct

Prerequisites

Android

The documentation that follows assumes you have generated a React Native Android project using the react-native-cli, i.e.:

``
react-native init myapp
`

In addition to the standard React Native requirements, you will also need to install the following Android SDK components with your prefered SDK management tools:
* Google Play services

Windows

The documentation that follows assumes you have generated a React Native Windows project using the react-native-cli and rnpm-plugin-windows, i.e.:

`
react-native init myapp
cd myapp
npm i --save-dev rnpm-plugin-windows
react-native windows
`

It also assumes you have Visual Studio 2015 installed (Visual Studio Community is fine).

iOS

The documentation that follows assumes you have generated a React Native iOS project using the react-native-cli, i.e.:

`
react-native init myapp
`

In addition to the standard React Native requirements, you will also need the following:
* An iOS 8 (or later version)-capable device (simulator doesn't work with push notifications)
* Apple Developer Program membership

Getting Started

`
npm install react-native-azurenotificationhub
`

Create a Notification Hub

* Log on to the Azure Portal and create a new Notification Hub.

!Create Notification Hub

Android Installation

$3

* Log in to the Firebase console and create a new Firebase project if you don't already have one.
* After your project is created click Add Firebase to your Android app and folow the instructions provided.

!Add Firebase to Android.

* In the Firebase Console, click the cog for your project and then click Project Settings

!Firebase Project Settings

* Click the Cloud Messaging tab in your project settings and copy the value of the Server key and Sender ID. The former will be used to configure the Notification Hub Access Policy and and the latter for your React Native module registration.

* Back on the Azure Portal page for your notification hub, select Settings > Notification Services > Google (GCM). Enter the FCM Server key you copied from the Firebase console and click Save.

!Configure GCM

$3

In android/app/src/main/AndroidManifest.xml

`xml
xmlns:tools="http://schemas.android.com/tools"
tools:replace="android:icon"
...>

`

This resolves the error caused by the manifest merger tool for gradle.

$3

In android/settings.gradle

`gradle
...

include ':react-native-azurenotificationhub'
project(':react-native-azurenotificationhub').projectDir = file('../node_modules/react-native-azurenotificationhub/android')
`

In android/app/build.gradle

`gradle
...
dependencies {
...

compile project(':react-native-azurenotificationhub')
compile 'com.google.android.gms:play-services-gcm:9.4.0'
compile 'com.google.firebase:firebase-messaging:9.4.0'
}
`

In android/app/src/main/AndroidManifest.xml

`xml
...






...
android:name="com.azure.reactnative.notificationhub.ReactNativeRegistrationIntentService"
android:exported="false">

android:permission="com.google.android.c2dm.permission.SEND">




...
`

Register the module package in MainApplication.java

`java
import com.azure.reactnative.notificationhub.ReactNativeNotificationHubPackage;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactNativeNotificationHubPackage() // <-- Add this package
);
}
};

...
}
`

Windows Installation

$3

* Open your Visual Studio .sln (generally ./windows/[app name].sln) file in Visual Studio 2015.
* In Solution Explorer, right-click the Windows Store app project, click Store, and then click Associate App with the Store...

!Associate with App Store

* Follow the instructions to login, reserve an app name, associate the app with the app name, and automatically configure the required Windows Store registration in the application manifest.

$3

* On the Windows Dev Center page for your new app, click Services, click Push notifications, and then click Live Services site under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps.

!Live Services Site

* On the registration page for your app, make a note of the Application Secret password and the Package security identifier (SID) located in the Windows Store platform settings.

!Application Secrets

* Back on the Azure Portal page for your notification hub, select Settings > Notification Services > Windows (WNS). Then enter the Application Secret password in the Security Key field. Enter your Package SID value that you obtained from WNS in the previous section, and then click Save.

!Configure WNS

$3

* In Solution Explorer of your open .sln in Visual Studio 2015, right-click the Solution, click Add > Existing Project....

!Add Existing Project

* Assuming you've already installed react-native-azurenotificationhub with NPM, find and select ReactWindowsAzureNotificationHub.csproj in .\node_modules\react-native-azurenotificationhub\windows\ReactWindowsAzureNotificationHub.
* Right-click the Windows Store app project, click Add > Reference, and check ReactWindowsAzureNotificationHub from Projects > Solution.

!Add Reference

* In MainPage.cs of your Windows Store app, add the the ReactAzureNotificationHubPacakge to your configured set of packages:

`c#
using ReactWindowsAzureNotificationHub;

namespace ...
{
public class MainPage : ReactPage
{
...

public override List Packages
{
get
{
new List
{
new MainReactPackage(),
new ReactAzureNotificationHubPackage(), // <-- Add this package
}
}
}

...
}
}
`

iOS Installation

$3

* On your Mac, run the Keychain Access tool. It can be opened from the Utilities folder or the Other folder on the launch pad.

* Click Keychain Access, expand Certificate Assistant, then click Request a Certificate from a Certificate Authority....

!RequestCertificate

* Select your User Email Address and Common Name , make sure that Saved to disk is selected, and then click Continue. Leave the CA Email Address field blank as it is not required.

!CertificateInfo

* Type a name for the Certificate Signing Request (CSR) file in Save As, select the location in Where, then click Save.

!SaveCertificate

$3

* If you have not already registered your app, navigate to the iOS Provisioning Portal at the Apple Developer Center, log on with your Apple ID, click Identifiers, then click App IDs, and finally click on the + sign to register a new app.

!RegisterAppId

* Update the following three fields for your new app and then click Continue:

* Name: Type a descriptive name for your app in the Name field in the App ID Description section.

Bundle Identifier: Under the Explicit App ID section, enter a Bundle Identifier in the form . as mentioned in the App Distribution Guide. The Organization Identifier and Product Name you use must match the organization identifier and product name you will use when you create your XCode project. In the screeshot below NotificationHubs is used as a organization idenitifier and GetStarted* is used as the product name. Making sure this matches the values you will use in your XCode project will allow you to use the correct publishing profile with XCode.

* Push Notifications: Check the Push Notifications option in the App Services section, .

!CheckPushNotification

* This generates your App ID and requests you to confirm the information. Click Register to confirm the new App ID.

* Once you click Register, you will see the Registration complete screen, as shown below. Click Done.

!RegistrationComplete

* In the Developer Center, under App IDs, locate the app ID that you just created, and click on its row.

!NavigateAppIDs

* Clicking on the app ID will display the app details. Click the Edit button at the bottom.

* Scroll to the bottom of the screen, and click the Create Certificate... button under the section Development Push SSL Certificate.

!CreateAPNSCertificate

* Click Choose File, browse to the location where you saved the CSR file that you created in the first task, then click Generate.

!GenerateAPNSCertificate

* After the certificate is created by the portal, click the Download button, and click Done.

!DownloadAPNSCertificate

* Double-click the downloaded push certificate aps_development.cer.

!ImportAPNSCertificate

* In Keychain Access, right-click the new push certificate that you created in the Certificates category. Click Export, name the file, select the .p12 format, and then click Save.

!ExportP12Certificate

$3

* Back in the iOS Provisioning Portal, select Provisioning Profiles, select All, and then click the + button to create a new profile. This launches the Add iOS Provisioning Profile Wizard

!AddIOSProvisioningProfile

* Select iOS App Development under Development as the provisiong profile type, and click Continue.

* Next, select the app ID you just created from the App ID drop-down list, and click Continue

!SelectCreatedAppId

* In the Select certificates screen, select your usual development certificate used for code signing, and click Continue. This is not the push certificate you just created.

!SelectIOSDevelopmentCertificate

* Next, select the Devices to use for testing, and click Continue

!SelectIOSDevices

* Finally, pick a name for the profile in Profile Name, click Generate.

!GenerateProfileName

* When the new provisioning profile is created click to download it and install it on your Xcode development machine. Then click Done.

!DownloadProvisioningProfile

$3

* Back on the Azure Portal page for your notification hub, select Settings > Notification Services > Apple (APNS). Click on Upload Certificate and select the .p12 file that you exported earlier. Make sure you also specify the correct password.

* Make sure to select Sandbox mode since this is for development. Only use the Production if you want to send push notifications to users who purchased your app from the store.

!AzureNotificationHubAPNSConfig

$3

* Make sure to use the same Product Name and Organization Identifier that you used when you previously set the bundle ID on the Apple Developer portal, i.e.:

Product Name: myapp*
Organization Identifier: org.reactjs.native.example*

* Remember to set Provisioning Profile to the provisioning profile that you created previously.

!SetProvisioningProfile

* Drag node_modules/react-native-azurenotificationhub/ios/RCTAzureNotificationHubManager.xcodeproj and node_modules/react-native-azurenotificationhub/ios/WindowsAzureMessaging.xcodeproj to your project on Xcode (usually under the Libraries group on Xcode).

!AddLibsIOS

* Click on your main project file (the one that represents the .xcodeproj), select Build Phases and drag the static libraries from the Products folder inside the libraries you are importing to Link Binary With Libraries

!LinkLibsIOS

* Add $(SRCROOT)/../node_modules/react-native-azurenotificationhub/ios to Header Search Paths and select recursive

!IncludeHeaderIOS

* To enable support for notification and register events you need to augment your AppDelegate. At the top of your AppDelegate.m:

`objective-c
#import "RCTAzureNotificationHubManager.h"
`

* And then add the following code in the same file:

`objective-c
// Required to register for notifications
- (void)application:(UIApplication )application didRegisterUserNotificationSettings:(UIUserNotificationSettings )notificationSettings
{
[RCTAzureNotificationHubManager didRegisterUserNotificationSettings:notificationSettings];
}

// Required for the register event.
- (void)application:(UIApplication )application didRegisterForRemoteNotificationsWithDeviceToken:(NSData )deviceToken
{
[RCTAzureNotificationHubManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

// Required for the registrationError event.
- (void)application:(UIApplication )application didFailToRegisterForRemoteNotificationsWithError:(NSError )error
{
[RCTAzureNotificationHubManager didFailToRegisterForRemoteNotificationsWithError:error];
}

// Required for the notification event.
- (void)application:(UIApplication )application didReceiveRemoteNotification:(NSDictionary )notification
{
[RCTAzureNotificationHubManager didReceiveRemoteNotification:notification];
}

// Required for the localNotification event.
- (void)application:(UIApplication )application didReceiveLocalNotification:(UILocalNotification )notification
{
[RCTAzureNotificationHubManager didReceiveLocalNotification:notification];
}
`

$3

With XCode 8, the entitlements are set from your local entitlements file rather than from the provisioning profile you created on the Apple Developer Portal. The entitlements will now need to be added to your Xcode build under Capabilities in addition to in your provisioning profile.

!XCode8Change

JavaScript Configuration

On the Azure Portal page for your notification hub, copy a connection string from Settings > Access Policies.

!Get Connection String

The example below shows how you can register and unregister from Azure Notification Hub in your React component.

$3

`js
const NotificationHub = require('react-native-azurenotificationhub');

const connectionString = '...'; // The Notification Hub connection string
const hubName = '...'; // The Notification Hub name
const senderID = '...'; // The Sender ID from the Cloud Messaging tab of the Firebase console
const tags = [ ... ]; // The set of tags to subscribe to

class myapp extends Component {
register() {
NotificationHub.register({connectionString, hubName, senderID, tags})
.catch(reason => console.warn(reason));
}

unregister() {
NotificationHub.unregister()
.catch(reason => console.warn(reason));
}

render() {
return (




Register






Unregister




);
}
`

$3

`js
const NotificationHub = require('react-native-azurenotificationhub/index.ios');

const connectionString = '...'; // The Notification Hub connection string
const hubName = '...'; // The Notification Hub name
const senderID = '...'; // The Sender ID from the Cloud Messaging tab of the Firebase console
const tags = [ ... ]; // The set of tags to subscribe to

var remoteNotificationsDeviceToken = ''; // The device token registered with APNS

class myapp extends Component {
requestPermissions() {
NotificationHub.addEventListener('register', this._onRegistered);
NotificationHub.addEventListener('registrationError', this._onRegistrationError);
NotificationHub.addEventListener('registerAzureNotificationHub', this._onAzureNotificationHubRegistered);
NotificationHub.addEventListener('azureNotificationHubRegistrationError', this._onAzureNotificationHubRegistrationError);
NotificationHub.addEventListener('notification', this._onRemoteNotification);
NotificationHub.addEventListener('localNotification', this._onLocalNotification);

NotificationHub.requestPermissions();
}

register() {
NotificationHub.register(remoteNotificationsDeviceToken, {connectionString, hubName, senderID, tags});
}

unregister() {
NotificationHub.unregister();
}

render() {
return (




Request permission






Register






Unregister




);
}

_onRegistered(deviceToken) {
remoteNotificationsDeviceToken = deviceToken;
AlertIOS.alert(
'Registered For Remote Push',
Device Token: ${deviceToken},
[{
text: 'Dismiss',
onPress: null,
}]
);
}

_onRegistrationError(error) {
AlertIOS.alert(
'Failed To Register For Remote Push',
Error (${error.code}): ${error.message},
[{
text: 'Dismiss',
onPress: null,
}]
);
}

_onRemoteNotification(notification) {
AlertIOS.alert(
'Push Notification Received',
'Alert message: ' + notification.getMessage(),
[{
text: 'Dismiss',
onPress: null,
}]
);
}

_onAzureNotificationHubRegistered(registrationInfo) {
AlertIOS.alert('Registered For Azure notification hub',
'Registered For Azure notification hub'
[{
text: 'Dismiss',
onPress: null,
}]
);
}

_onAzureNotificationHubRegistrationError(error) {
AlertIOS.alert(
'Failed To Register For Azure Notification Hub',
Error (${error.code}): ${error.message},
[{
text: 'Dismiss',
onPress: null,
}]
);
}

_onLocalNotification(notification){
AlertIOS.alert(
'Local Notification Received',
'Alert message: ' + notification.getMessage(),
[{
text: 'Dismiss',
onPress: null,
}]
);
}
}
``

Publishing Notifications

Coming soon.

License

The React Native Azure Notification Hub plugin is provided under the MIT License.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.