Hello everyone !
I'd like to share insights while integrating Azure Notification Hub for push notifications into one of my React Native project.

Azure portal

Go to https://portal.azure.com/#home

Create notification hub service in azure portal

After creation of the notification hub it will be like

Apple (APN's)

• 

• Authentication Mode : Token

• Key Id :

  Go to developer.apple.com => Certificates, Identifiers & Profiles => keys
  1. Create new key if it not exists and must enable Apple Push Notifications service (APNs) and continue
  2. You will get Name, Key Id then download the .p8 file and save it.

• Bundle Id : IOS app bundle id

• Team Id : get this from top right corner of https://developer.apple.com/account/resources/certificates/list

• Token : Open .p8 file in your code editor and copy token string

    -----BEGIN PRIVATE KEY-----
    <copy content here and paste in your Token field>
    -----END PRIVATE KEY-----
  

Application Mode: Sandbox

IOS Setup

Go to Capability and add

1. Background Modes and enable Background fetch, Remote notifications

2. Push Notifications

Go to Apple Developer Account => Certificates, Identifiers & Profiles => Identifiers
then select your identifier and enable push notification service

Send Notification to IOS devices using Node JS

Get IOS Device token using this npm package react-native-push-notification and send it to the server

import PushNotification from 'react-native-push-notification'

PushNotification.configure({
    onRegister: (token) => {
      console.log(token) // Here {token: <IOS device token>, os: "ios"}
    }
})

Use @azure/notification-hubs package to write the server code to send notification to ios device

const {
    NotificationHubsClient,
    createAppleNotification,
    createAppleRegistrationDescription,
    createAppleNotificationBody
}  =  require("@azure/notification-hubs")


// token (device ios token)
// message body eg: 
/*
const messageBody = {
    "body": {
      "aps": {
        "alert": {"title":  "Dinesh", "body": "How are you doing?"},
        "contentAvailable": true,
        "category": "chat"

      }
    },
    "headers": {
      "apns-priority": "10",
      "apns-push-type": "alert"
    }
}
*/

let registration = createAppleRegistrationDescription({
   deviceToken: token, // This is the ios device token
})
await notificationClient.createRegistration(registration);
const message = createAppleNotification({body: JSON.stringify(messageBody.body), headers: JSON.stringify(messageBody.headers)});
const result = await notificationClient.sendNotification(message);
return res.status(200).json({result})

This will send notifications to the ios device

Read Notifications In React native

Use react-native-notifications package to read the notifications inside the react native app

import { Notifications } from 'react-native-notifications';

  useEffect(() => {
    Notifications.registerRemoteNotifications();  // register on page mount

    Notifications.events().registerNotificationReceivedForeground((notification: any, completion) => {
       // Do actions on receive the forground notification
    });

    Notifications.events().registerNotificationOpened((notification: any, completion) => {
     // Do actions on open the notification
    });

  }, [])

That’s it!