Connecting to a Broadcast Channel

This tutorial will guide you step by step on how to connect and listen to notifications via the broadcast channel using NativeEventEmitter in React Native with the module provided by react-native-rook-sdk.

Importing the Rook Module

To interact with the Rook notifications, you first need to obtain the module using the getRookModule function provided by the SDK:

import { getRookModule } from "react-native-rook-sdk";
import { NativeEventEmitter } from "react-native";

Creating the Event Emitter

Next, create a NativeEventEmitter to subscribe to the events emitted by the Rook module:

const rookModule = getRookModule();
const eventEmitter = new NativeEventEmitter(rookModule);

Listening to Rook Notifications

The Rook SDK emits notifications under the event 'ROOK_NOTIFICATION'. These messages follow this structure:

{
  type: string,
  value: boolean,
  message?: string
}

Notification Types

The type field can have one of the following values:

• ROOK_BACKGROUND_ANDROID_PERMISSIONS: Indicates whether permissions have been granted to enable background services on Android.
• ROOK_HEALTH_CONNECT_PERMISSIONS: Indicates whether permissions have been granted to read data from Health Connect.
• ROOK_BACKGROUND_ENABLED: Indicates whether the background services have been successfully enabled.

Example Implementation to Listen to Notifications

// Function to handle notifications
const handleRookNotification = (notification) => {
  const { type, value, message } = notification;

  switch (type) {
    case "ROOK_BACKGROUND_ANDROID_PERMISSIONS":
      console.log(`Background permissions on Android: ${value}`);
      break;
    case "ROOK_HEALTH_CONNECT_PERMISSIONS":
      console.log(`Health Connect permissions: ${value}`);
      break;
    case "ROOK_BACKGROUND_ENABLED":
      console.log(`Background services enabled: ${value}`);
      break;
    default:
      console.log(`Unknown notification: ${message}`);
  }
};

// Subscribe to the 'ROOK_NOTIFICATION' event
const subscription = eventEmitter.addListener(
  "ROOK_NOTIFICATION",
  handleRookNotification
);

Unsubscribing from the Event

It’s important to clean up the listeners to avoid potential memory leaks when you no longer need to listen to notifications.

// Unsubscribe when the component unmounts
useEffect(() => {
  return () => {
    subscription.remove();
  };
}, []);

Full Example

Here's a full example of how to implement notification listening in a React Native component:

import React, { useEffect } from "react";
import { NativeEventEmitter, NativeModules } from "react-native";
import { getRookModule } from "react-native-rook-sdk";

const RookNotificationListener = () => {
  const { ready, requestAllPermissions, requestAndroidBackgroundPermissions } =
    useRookPermissions();

  const { updateUserID } = useRookConfiguration();

  useEffect(() => {
    if (ready) updateUserID("YOUR-USER-ID");
  }, [ready]);

  useEffect(() => {
    const rookModule = getRookModule();
    const eventEmitter = new NativeEventEmitter(rookModule);

    // Subscribe to the event
    const subscription = eventEmitter.addListener(
      "ROOK_NOTIFICATION",
      handleRookNotification
    );

    // Clean up subscription when the component unmounts
    return () => {
      subscription.remove();
    };
  }, []);

  const handleRookNotification = (notification) => {
    const { type, value, message, ...rest } = notification;

    switch (type) {
      case "ROOK_BACKGROUND_ANDROID_PERMISSIONS":
        console.log(`Background permissions on Android: ${value}`);
        break;
      case "ROOK_HEALTH_CONNECT_PERMISSIONS":
        console.log(`Health Connect permissions: ${value}`);
        break;
      case "ROOK_BACKGROUND_ENABLED":
        console.log(`Background services enabled: ${value}`);
        break;
      case "ROOK_APPLE_HEALTH_BACKGROUND_ERROR":
        console.log(`Background services enabled: ${rest}`);
        break;
      default:
        console.log(`Unknown notification: ${{ rest, message, value, type }}`);
    }
  };

  const handleRequestAllPermissions = async (): Promise<void> => {
    try {
      const result = await requestAllPermissions();
      console.log(result);
    } catch (error) {
      console.log(error);
    }
  };

  const handleRequestAndroidPermissions = async (): Promise<void> => {
    try {
      const r = await requestAndroidBackgroundPermissions();
      console.log(r);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View>
      <Button
        title="Request Permissions"
        onPress={handleRequestAllPermissions}
      />

      <Button
        title="Request Permissions Android permissions"
        onPress={handleRequestAndroidPermissions}
      />
    </View>
  );
};

export default RookNotificationListener;

tip

It's important to mention that if you want to catch the ROOK_BACKGROUND_ENABLED message, you need to have background sync enabled. You can achieve this by setting enableBackgroundSync to true in the RookSyncGate.

Conclusion

By following these steps, you'll be able to connect and listen to the notifications emitted by the Rook module in your React Native app. Be sure to adjust the code according to your project's specific requirements.