How do we register a push notification listener for Azure Notification Hub using React Native?

Viewed 447

I have created an instance in Azure Notification Hub and added a server key to the GCM option that I obtained from my Firebase Console. I have a Node.js backend that has REST API endpoints to register installations and send out push notifications to registered devices using the azure-sb package. In my client side RN code, I have followed the steps outlined in the Microsoft documentation https://docs.microsoft.com/en-us/azure/developer/mobile-apps/notification-hubs-backend-service-react-native and modified it for my codebase. I am able to register an installation but I am not able to receive any push notification sent from my backend nor from the Test Send option in the Azure Notification Hub portal. It shows me no error except randomly it states 'The Push Notification System handle for the registration is invalid' whenever the Push Channel has expired. Is there any working example to register a Push Notification listener in RN? The documentation also seems to be outdated and it would be helpful to see a working example using the Hooks API.This is the code I have modified and added to the main screen of my application. The register and unregister functions are called on button presses on the screen. The other NotificationService and Handlers are added as is mentioned in the document.

    let deviceId = DeviceInfo.getUniqueId();
 const [deviceState, setDeviceState] = useState({
      status: "Push notifications registration status is unknown",
      registeredOS: "",
      registeredToken: "",
      isRegistered: false,
      isBusy: false,
    });
let notificationService = new DemoNotificationService(
      onTokenReceived,
      onNotificationReceived,
    );
let notificationRegistrationService = new DemoNotificationRegistrationService(
    'http://xxxxxx/api',
    '',
  );
  function onTokenReceived(token: any) {
    console.log(`Received a notification token on ${token.os}`);
    setDeviceState({ ...deviceState, registeredToken: token.token, registeredOS: token.os, status: `The push notifications token has been received.` });
    if (deviceState.isRegistered && deviceState.registeredToken && deviceState.registeredOS) {
      onRegisterButtonPress();
    }
  }
  function onNotificationReceived(notification: any) {
    console.log(`Received a push notification on ${deviceState.registeredOS}`);
    setDeviceState({...deviceState, status: `Received a push notification...` });
    if (notification.data.message) {
    console.log(`${notification.data.action} action received`);
    }
  }
  async function onRegisterButtonPress() {
    // if (!deviceState.registeredToken || !deviceState.registeredOS) {
    //   console.log("The push notifications token wasn't received.");
    //   return;
    // }
    let status: string = "Registering...";
    let isRegistered = deviceState.isRegistered;
    try {
      setDeviceState({ ...deviceState, isBusy: true, status });
      const pnPlatform = deviceState.registeredOS == "ios" ? "gcm" : "gcm";
      const pnToken = deviceState.registeredToken;
      const request = {
        installationId: deviceId,
        platform: pnPlatform,
        pushChannel: pnToken,
        tags: []
      };
      const response = await notificationRegistrationService.registerAsync(request);
      status = `Registered for ${deviceState.registeredOS} push notifications`;
      isRegistered = true;
    } catch (e) {
      status = `Registration failed: ${e}`;
    }
    finally {
      setDeviceState({ ...deviceState, isBusy: false, status, isRegistered });
    }
  }
  async function onDeregisterButtonPress() {
    if (!notificationService)
      return;
    let status: string = "Deregistering...";
    let isRegistered = deviceState.isRegistered;
    try {
      setDeviceState({ ...deviceState, isBusy: true, status });
      await notificationRegistrationService.deregisterAsync(deviceId);
      status = "Deregistered from push notifications";
      isRegistered = false;
    } catch (e) {
      status = `Deregistration failed: ${e}`;
    }
    finally {
      setDeviceState({ ...deviceState, isBusy: false, status, isRegistered });
    }
  }
0 Answers
Related