fix: prevent multiple listeners for a native event (#130)

Author: ArturoSalazarB16

SampleApp/ios/Podfile.lock

@@ -382,7 +382,7 @@ PODS:
   - React-jsinspector (0.72.6)
   - React-logger (0.72.6):
     - glog
-  - react-native-navigation-sdk (0.1.5-beta):
+  - react-native-navigation-sdk (0.2.2-beta):
     - GoogleNavigation (= 5.4.0)
     - React-Core
   - React-NativeModulesApple (0.72.6):
@@ -719,7 +719,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
-  react-native-navigation-sdk: a68e122d1301f130b42260924df0589cdd312e34
+  react-native-navigation-sdk: d31a1e8b7ab7bad0a83fb2c5cfd75ac93db3feed
   React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
   React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485

SampleApp/package-lock.json

@@ -14,7 +14,7 @@
     "react": "18.2.0",
     "react-native": "^0.72.4",
     "react-native-eject": "^0.2.0",
-    "react-native-navigation-sdk": "github:googlemaps/react-native-navigation-sdk",
+    "react-native-navigation-sdk": "github:googlemaps/react-native-navigation-sdk#0.2.2-beta",
     "react-native-permissions": "^3.10.1",
     "react-native-select-dropdown": "^3.4.0",
     "react-native-snackbar": "^2.6.2"

SampleApp/package.json

@@ -41,6 +41,7 @@ import {ArrivalEvent, NavigationViewProps} from './types';
 export default class NavigationView extends React.Component<NavigationViewProps> {
   private viewId: number = -1;
   private mapViewRef?: any;
+  private nativeEventsToCallbackMap;
 
   constructor(_props: NavigationViewProps) {
     super(_props);
@@ -62,6 +63,28 @@ export default class NavigationView extends React.Component<NavigationViewProps>
         orientation: isPortrait() ? 'portrait' : 'landscape',
       });
     });
+
+    this.nativeEventsToCallbackMap = {
+      'onRouteChanged': this.onRouteChanged,
+      'onRemainingTimeOrDistanceChanged': this.onRemainingTimeOrDistanceChanged,
+      'onTrafficUpdated': this.onTrafficUpdated,
+      'onArrival': this.onArrival,
+      'onNavigationReady': this.onNavigationReady,
+      'onStartGuidance': this.onStartGuidance,
+      'onRecenterButtonClick': this.onRecenterButtonClick,
+      'onRouteStatusResult': this.onRouteStatusResult,
+      'onMapReady': this.onMapReady,
+      'onReroutingRequestedByOffRoute': this.onReroutingRequestedByOffRoute,
+      'onLocationChanged': this.onLocationChanged,
+      'onNavigationInitError': this.onNavigationInitError,
+      'onMarkerInfoWindowTapped': this.onMarkerInfoWindowTapped,
+      'onMarkerClick': this.onMarkerClick,
+      'onPolylineClick': this.onPolylineClick,
+      'onPolygonClick': this.onPolygonClick,
+      'onCircleClick': this.onCircleClick,
+      'logDebugInfo': this.logDebugInfo
+    };
+
   }
 
   /**
@@ -322,45 +345,24 @@ export default class NavigationView extends React.Component<NavigationViewProps>
     }
   };
 
-  private registerNavModuleListener = () => {
-    const NavModuleEvt = new NativeEventEmitter(
+  private unregisterNavModuleListeners = () => {
+    const eventEmitter = new NativeEventEmitter(
       NativeModules.CustomEventDispatcher,
     );
 
-    NavModuleEvt.addListener('onRouteChanged', this.onRouteChanged);
-    NavModuleEvt.addListener(
-      'onRemainingTimeOrDistanceChanged',
-      this.onRemainingTimeOrDistanceChanged,
-    );
-    NavModuleEvt.addListener('onTrafficUpdated', this.onTrafficUpdated);
-    NavModuleEvt.addListener('onArrival', this.onArrival);
-    NavModuleEvt.addListener('onNavigationReady', this.onNavigationReady);
-    NavModuleEvt.addListener('onStartGuidance', this.onStartGuidance);
-    NavModuleEvt.addListener(
-      'onRecenterButtonClick',
-      this.onRecenterButtonClick,
-    );
-    NavModuleEvt.addListener('onRouteStatusResult', this.onRouteStatusResult);
-    NavModuleEvt.addListener('onMapReady', this.onMapReady);
-    NavModuleEvt.addListener(
-      'onReroutingRequestedByOffRoute',
-      this.onReroutingRequestedByOffRoute,
-    );
-    NavModuleEvt.addListener('onLocationChanged', this.onLocationChanged);
-    NavModuleEvt.addListener(
-      'onNavigationInitError',
-      this.onNavigationInitError,
-    );
+    for (const eventName of Object.keys(this.nativeEventsToCallbackMap)) {
+      eventEmitter.removeAllListeners(eventName);
+    }
+  }
 
-    NavModuleEvt.addListener(
-      'onMarkerInfoWindowTapped',
-      this.onMarkerInfoWindowTapped,
+  private registerNavModuleListener = () => {
+    const eventEmitter = new NativeEventEmitter(
+      NativeModules.CustomEventDispatcher,
     );
-    NavModuleEvt.addListener('onMarkerClick', this.onMarkerClick);
-    NavModuleEvt.addListener('onPolylineClick', this.onPolylineClick);
-    NavModuleEvt.addListener('onPolygonClick', this.onPolygonClick);
-    NavModuleEvt.addListener('onCircleClick', this.onCircleClick);
-    NavModuleEvt.addListener('logDebugInfo', this.logDebugInfo);
+
+    for (const eventName of Object.keys(this.nativeEventsToCallbackMap)) {
+      eventEmitter.addListener(eventName, this.nativeEventsToCallbackMap[eventName]);
+    }
   };
 
   /**
@@ -375,6 +377,7 @@ export default class NavigationView extends React.Component<NavigationViewProps>
     this.viewId = findNodeHandle(this.mapViewRef) || 0;
 
     if (Platform.OS == 'ios') {
+      this.unregisterNavModuleListeners();
       this.registerNavModuleListener();
     }
 
@@ -404,6 +407,7 @@ export default class NavigationView extends React.Component<NavigationViewProps>
   }
 
   override componentWillUnmount() {
+    this.unregisterNavModuleListeners();
     this.deleteFragment();
   }