fix: enhance viewcontroller error management with stateaware controllers

Author: jokerttu

CONTRIBUTING.md

@@ -143,6 +143,9 @@ yarn run example detox:test:ios-release
 ```
 
 Android:
+
+> [!NOTE]
+> Create emulator named "Android_Emulator" first if you don't have one already:
 ```bash
 yarn run example detox:test:android-release
 ```

example/.detoxrc.js

@@ -71,7 +71,7 @@ module.exports = {
     emulator: {
       type: 'android.emulator',
       device: {
-        avdName: 'Pixel_9_Pro_API_35',
+        avdName: 'Android_Emulator',
       },
     },
   },

src/maps/mapView/mapView.tsx

@@ -33,6 +33,7 @@ export const MapView = (props: MapViewProps): React.JSX.Element => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const mapViewRef = useRef<any>(null);
   const [viewId, setViewId] = useState<number | null>(null);
+  const mapControllerDisposeRef = useRef<(() => void) | null>(null);
 
   const { onMapViewControllerCreated } = props;
 
@@ -46,17 +47,34 @@ export const MapView = (props: MapViewProps): React.JSX.Element => {
     }
   };
 
+  // Create controllers when viewId changes
   useEffect(() => {
     if (!mapViewRef.current) {
       return;
     }
     const _viewId = findNodeHandle(mapViewRef.current) || 0;
     if (viewId !== _viewId) {
+      // Dispose previous controller if viewId actually changed
+      if (mapControllerDisposeRef.current) {
+        mapControllerDisposeRef.current();
+      }
       setViewId(_viewId);
-      onMapViewControllerCreated(getMapViewController(_viewId));
+      const { controller, dispose } = getMapViewController(_viewId);
+      mapControllerDisposeRef.current = dispose;
+      onMapViewControllerCreated(controller);
     }
   }, [onMapViewControllerCreated, viewId]);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (mapControllerDisposeRef.current) {
+        mapControllerDisposeRef.current();
+        mapControllerDisposeRef.current = null;
+      }
+    };
+  }, []);
+
   const onMapClick = useCallback(
     ({ nativeEvent: latlng }: { nativeEvent: LatLng }) => {
       props.mapViewCallbacks?.onMapClick?.(latlng);

src/maps/mapView/mapViewController.ts

@@ -16,7 +16,11 @@
 
 import { NativeModules } from 'react-native';
 import type { Location } from '../../shared/types';
-import { commands, sendCommand } from '../../shared/viewManager';
+import {
+  commands,
+  createControllerContext,
+  type ControllerResult,
+} from '../../shared/viewManager';
 import type {
   CameraPosition,
   Circle,
@@ -36,19 +40,28 @@ import type {
 } from './types';
 const { NavViewModule } = NativeModules;
 
-export const getMapViewController = (viewId: number): MapViewController => {
-  return {
+export const getMapViewController = (
+  viewId: number
+): ControllerResult<MapViewController> => {
+  const { sendCommand, dispose } = createControllerContext(
+    viewId,
+    'MapViewController'
+  );
+
+  const controller: MapViewController = {
     setMapType: (mapType: MapType) => {
-      sendCommand(viewId, commands.setMapType, [mapType]);
+      sendCommand('setMapType', commands.setMapType, [mapType]);
     },
     setMapStyle: (mapStyle: string) => {
-      sendCommand(viewId, commands.setMapStyle, [mapStyle]);
+      sendCommand('setMapStyle', commands.setMapStyle, [mapStyle]);
     },
     setMapToolbarEnabled: (index: boolean) => {
-      sendCommand(viewId, commands.setMapToolbarEnabled, [index]);
+      sendCommand('setMapToolbarEnabled', commands.setMapToolbarEnabled, [
+        index,
+      ]);
     },
     clearMapView: () => {
-      sendCommand(viewId, commands.clearMapView, []);
+      sendCommand('clearMapView', commands.clearMapView, []);
     },
 
     addCircle: async (circleOptions: CircleOptions): Promise<Circle> => {
@@ -77,73 +90,95 @@ export const getMapViewController = (viewId: number): MapViewController => {
     },
 
     removeMarker: (id: string) => {
-      sendCommand(viewId, commands.removeMarker, [id]);
+      sendCommand('removeMarker', commands.removeMarker, [id]);
     },
 
     removePolyline: (id: string) => {
-      sendCommand(viewId, commands.removePolyline, [id]);
+      sendCommand('removePolyline', commands.removePolyline, [id]);
     },
 
     removePolygon: (id: string) => {
-      sendCommand(viewId, commands.removePolygon, [id]);
+      sendCommand('removePolygon', commands.removePolygon, [id]);
     },
 
     removeCircle: (id: string) => {
-      sendCommand(viewId, commands.removeCircle, [id]);
+      sendCommand('removeCircle', commands.removeCircle, [id]);
     },
 
     setIndoorEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setIndoorEnabled, [isOn]);
+      sendCommand('setIndoorEnabled', commands.setIndoorEnabled, [isOn]);
     },
 
     setTrafficEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setTrafficEnabled, [isOn]);
+      sendCommand('setTrafficEnabled', commands.setTrafficEnabled, [isOn]);
     },
 
     setCompassEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setCompassEnabled, [isOn]);
+      sendCommand('setCompassEnabled', commands.setCompassEnabled, [isOn]);
     },
 
     setMyLocationButtonEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setMyLocationButtonEnabled, [isOn]);
+      sendCommand(
+        'setMyLocationButtonEnabled',
+        commands.setMyLocationButtonEnabled,
+        [isOn]
+      );
     },
 
     setMyLocationEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setMyLocationEnabled, [isOn]);
+      sendCommand('setMyLocationEnabled', commands.setMyLocationEnabled, [
+        isOn,
+      ]);
     },
 
     setRotateGesturesEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setRotateGesturesEnabled, [isOn]);
+      sendCommand(
+        'setRotateGesturesEnabled',
+        commands.setRotateGesturesEnabled,
+        [isOn]
+      );
     },
 
     setScrollGesturesEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setScrollGesturesEnabled, [isOn]);
+      sendCommand(
+        'setScrollGesturesEnabled',
+        commands.setScrollGesturesEnabled,
+        [isOn]
+      );
     },
 
     setScrollGesturesEnabledDuringRotateOrZoom: (isOn: boolean) => {
-      sendCommand(viewId, commands.setScrollGesturesEnabledDuringRotateOrZoom, [
-        isOn,
-      ]);
+      sendCommand(
+        'setScrollGesturesEnabledDuringRotateOrZoom',
+        commands.setScrollGesturesEnabledDuringRotateOrZoom,
+        [isOn]
+      );
     },
 
     setZoomControlsEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setZoomControlsEnabled, [isOn]);
+      sendCommand('setZoomControlsEnabled', commands.setZoomControlsEnabled, [
+        isOn,
+      ]);
     },
 
     setZoomLevel: (level: number) => {
-      sendCommand(viewId, commands.setZoomLevel, [level]);
+      sendCommand('setZoomLevel', commands.setZoomLevel, [level]);
     },
 
     setTiltGesturesEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setTiltGesturesEnabled, [isOn]);
+      sendCommand('setTiltGesturesEnabled', commands.setTiltGesturesEnabled, [
+        isOn,
+      ]);
     },
 
     setZoomGesturesEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setZoomGesturesEnabled, [isOn]);
+      sendCommand('setZoomGesturesEnabled', commands.setZoomGesturesEnabled, [
+        isOn,
+      ]);
     },
 
     setBuildingsEnabled: (isOn: boolean) => {
-      sendCommand(viewId, commands.setBuildingsEnabled, [isOn]);
+      sendCommand('setBuildingsEnabled', commands.setBuildingsEnabled, [isOn]);
     },
 
     getCameraPosition: async (): Promise<CameraPosition> => {
@@ -163,12 +198,19 @@ export const getMapViewController = (viewId: number): MapViewController => {
     },
 
     moveCamera: (cameraPosition: CameraPosition) => {
-      sendCommand(viewId, commands.moveCamera, [cameraPosition]);
+      sendCommand('moveCamera', commands.moveCamera, [cameraPosition]);
     },
 
     setPadding: (padding: Padding) => {
       const { top = 0, left = 0, bottom = 0, right = 0 } = padding;
-      sendCommand(viewId, commands.setPadding, [top, left, bottom, right]);
+      sendCommand('setPadding', commands.setPadding, [
+        top,
+        left,
+        bottom,
+        right,
+      ]);
     },
   };
+
+  return { controller, dispose };
 };

src/navigation/navigationView/navigationView.tsx

@@ -36,6 +36,8 @@ export const NavigationView = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const mapViewRef = useRef<any>(null);
   const [viewId, setViewId] = useState<number | null>(null);
+  const navControllerDisposeRef = useRef<(() => void) | null>(null);
+  const mapControllerDisposeRef = useRef<(() => void) | null>(null);
 
   const {
     onMapViewControllerCreated,
@@ -54,15 +56,32 @@ export const NavigationView = (
     }
   };
 
+  // Create controllers when viewId changes
   useEffect(() => {
     if (!mapViewRef.current) {
       return;
     }
     const _viewId = findNodeHandle(mapViewRef.current) || 0;
     if (viewId !== _viewId) {
+      // Dispose previous controllers if viewId actually changed
+      if (navControllerDisposeRef.current) {
+        navControllerDisposeRef.current();
+      }
+      if (mapControllerDisposeRef.current) {
+        mapControllerDisposeRef.current();
+      }
       setViewId(_viewId);
-      onNavigationViewControllerCreated(getNavigationViewController(_viewId));
-      onMapViewControllerCreated(getMapViewController(_viewId));
+
+      const { controller: navController, dispose: disposeNav } =
+        getNavigationViewController(_viewId);
+      const { controller: mapController, dispose: disposeMap } =
+        getMapViewController(_viewId);
+
+      navControllerDisposeRef.current = disposeNav;
+      mapControllerDisposeRef.current = disposeMap;
+
+      onNavigationViewControllerCreated(navController);
+      onMapViewControllerCreated(mapController);
     }
   }, [
     androidStylingOptions,
@@ -72,6 +91,20 @@ export const NavigationView = (
     viewId,
   ]);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (navControllerDisposeRef.current) {
+        navControllerDisposeRef.current();
+        navControllerDisposeRef.current = null;
+      }
+      if (mapControllerDisposeRef.current) {
+        mapControllerDisposeRef.current();
+        mapControllerDisposeRef.current = null;
+      }
+    };
+  }, []);
+
   const onMapClick = useCallback(
     ({ nativeEvent: latlng }: { nativeEvent: LatLng }) => {
       props.mapViewCallbacks?.onMapClick?.(latlng);