feat!: refactor intercom events (#314)

BREAKING CHANGE:
- removes addEventListener
- adds `bootstrapEventListeners()` to setup Android events.
- Consumers must now use `NativeEventEmitter` for handling Intercom events
- Update documentation with new event listener patterns.

Author: jasonpraful

README.md

@@ -1022,37 +1022,48 @@ Set the level of the native logger
 `Promise<boolean>`
 ___
 
-### `Intercom.addEventListener(event,callback)`
+### `Intercom.bootstrapEventListeners()`
 
-Sets a listener for listed events:
+Bootstrap event listeners (Only for Android). This handles platform-specific setup and returns a cleanup function.
+This must be called before setting up your own NativeEventEmitter.
 
-| Event    | Platform        |
-| ------- | --------    |
-| IntercomUnreadConversationCountDidChangeNotification| IOS, Android  |
-| IntercomHelpCenterDidShowNotification| IOS  |
-| IntercomHelpCenterDidHideNotification| IOS  |
-| IntercomWindowDidShowNotification| IOS  |      |
-| IntercomWindowDidHideNotification| IOS  |
+### Returns
+
+`() => void` - Cleanup function
+
+### Usage
 
 ```javascript
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import Intercom, { IntercomEvents } from '@intercom/intercom-react-native';
+
 useEffect(() => {
-  const listener = Intercom.addEventListener('IntercomUnreadConversationCountDidChangeNotification', ({count}) => alert(count));
-  return () => {
-    listener.remove();
-  }
-}, [])
-```
+  const cleanupIntercomEventListeners = Intercom.bootstrapEventListeners();
 
-### Options
+  const eventEmitter = new NativeEventEmitter(NativeModules.IntercomEventEmitter);
 
-| Type    | Type        | Required |
-| ------- | --------    | -------- |
-| event| string (`IntercomEvents`)  |yes        |
-| callback| function `({count?: number, visible?: boolean}) => void`  |yes        |
+  // Listen to unread conversation count changes
+  const unreadCountEventName = IntercomEvents.IntercomUnreadCountDidChange;
+  const countListener = eventEmitter.addListener(unreadCountEventName, (response) => {
+    console.log('Unread count:', response.count);
+  });
 
-### Returns
+  return () => {
+    countListener.remove();
+    cleanupIntercomEventListeners();
+  };
+}, []);
+```
+
+### Available Events
 
-`EmitterSubscription`
+| Event    | Platform        |
+| ------- | --------    |
+| IntercomUnreadConversationCountDidChangeNotification| iOS, Android  |
+| IntercomHelpCenterDidShowNotification| iOS  |
+| IntercomHelpCenterDidHideNotification| iOS  |
+| IntercomWindowDidShowNotification| iOS  |
+| IntercomWindowDidHideNotification| iOS  |
 
 ___
 ### Types

example/src/App.tsx

@@ -5,6 +5,8 @@ import {
   AppState,
   Image,
   Linking,
+  NativeEventEmitter,
+  NativeModules,
   Platform,
   ScrollView,
   StatusBar,
@@ -13,11 +15,11 @@ import {
   View,
 } from 'react-native';
 import Intercom, {
-  IntercomEvents,
   Space,
   type UserAttributes,
   Visibility,
   IntercomContent,
+  IntercomEvents,
   ThemeMode,
 } from '@intercom/intercom-react-native';
 
@@ -156,17 +158,28 @@ export default function App() {
       .catch((e) => console.log(e));
 
     /**
-     * Handle message count changed
+     * Bootstrap Intercom event listeners
+     */
+    const cleanupIntercomEventListeners = Intercom.bootstrapEventListeners();
+
+    const eventEmitter = new NativeEventEmitter(
+      NativeModules.IntercomEventEmitter
+    );
+
+    /**
+     * Unread notification count changed listener
      */
-    const countListener = Intercom.addEventListener(
-      IntercomEvents.IntercomUnreadCountDidChange,
+    const unreadCountEventName = IntercomEvents.IntercomUnreadCountDidChange;
+    const countListener = eventEmitter.addListener(
+      unreadCountEventName,
       (response) => {
         setCount(response.count as number);
       }
     );
 
     return () => {
       countListener.remove();
+      cleanupIntercomEventListeners();
 
       // @ts-ignore - type definitions haven't been updated to 0.65 yet
       urlListener.remove(); // <- for RN 0.65+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intercom/intercom-react-native",
-  "version": "8.8.0",
+  "version": "9.0.0-beta.1",
   "description": "React Native wrapper to bridge our iOS and Android SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/index.tsx

@@ -1,9 +1,4 @@
-import {
-  NativeModules,
-  NativeEventEmitter,
-  Platform,
-  type EmitterSubscription,
-} from 'react-native';
+import { NativeModules, Platform } from 'react-native';
 
 const { IntercomModule, IntercomEventEmitter } = NativeModules;
 
@@ -45,11 +40,6 @@ export const IntercomEvents = {
     IntercomEventEmitter.WINDOW_DID_HIDE_NOTIFICATION,
 };
 
-type EventType =
-  | 'IntercomUnreadConversationCountDidChangeNotification'
-  | 'IntercomWindowDidHideNotification'
-  | 'IntercomWindowDidShowNotification';
-
 export type CustomAttributes = {
   [key: string]: boolean | string | number;
 };
@@ -324,12 +314,11 @@ export type IntercomType = {
   setUserJwt(JWT: String): Promise<boolean>;
 
   /**
-   * Add an event listener for the supported event types.
+   * [Android Only] Bootstrap event listeners for Android. Call this before setting up your own NativeEventEmitter
+   *
+   * @returns cleanup function for Android
    */
-  addEventListener: (
-    event: EventType,
-    callback: (response: { count?: number; visible: boolean }) => void
-  ) => EmitterSubscription;
+  bootstrapEventListeners: () => () => void;
 };
 
 const Intercom: IntercomType = {
@@ -379,20 +368,17 @@ const Intercom: IntercomType = {
   setLogLevel: (logLevel) => IntercomModule.setLogLevel(logLevel),
   setThemeMode: (themeMode) => IntercomModule.setThemeMode(themeMode),
   setUserJwt: (jwt) => IntercomModule.setUserJwt(jwt),
-  addEventListener: (event, callback) => {
-    event === IntercomEvents.IntercomUnreadCountDidChange &&
-      Platform.OS === 'android' &&
+
+  bootstrapEventListeners: () => {
+    if (Platform.OS === 'android') {
       IntercomEventEmitter.startEventListener();
-    const eventEmitter = new NativeEventEmitter(IntercomEventEmitter);
-    const listener = eventEmitter.addListener(event, callback);
-    const originalRemove = listener.remove;
-    listener.remove = () => {
-      event === IntercomEvents.IntercomUnreadCountDidChange &&
-        Platform.OS === 'android' &&
+    }
+
+    return () => {
+      if (Platform.OS === 'android') {
         IntercomEventEmitter.removeEventListener();
-      originalRemove();
+      }
     };
-    return listener;
   },
 };