@rnmapbox/maps 10.1.12 → 10.1.13

package/src/components/Camera.tsx

@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   memo,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -13,6 +14,8 @@ import { type Position } from '../types/Position';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
 import { type NativeRefType } from '../utils/nativeRef';
 import NativeCameraView from '../specs/RNMBXCameraNativeComponent';
+import RNMBXCameraModule from '../specs/NativeRNMBXCameraModule';
+import { NativeCommands, type NativeArg } from '../utils/NativeCommands';
 
 const NativeModule = NativeModules.RNMBXModule;
 
@@ -250,6 +253,15 @@ export const Camera = memo(
         null,
       ) as NativeRefType<NativeCameraProps>;
 
+      const commands = useMemo(() => new NativeCommands(RNMBXCameraModule), []);
+
+      useEffect(() => {
+        if (nativeCamera.current) {
+          commands.setNativeRef(nativeCamera.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [commands, nativeCamera.current]);
+
       const buildNativeStop = useCallback(
         (
           stop: CameraStop,
@@ -380,8 +392,6 @@ export const Camera = memo(
           return;
         }
 
-        lastTS += 1;
-
         if (!config.type)
           // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
           // to be an object type.
@@ -399,22 +409,26 @@ export const Camera = memo(
             if (_nativeStop) {
               _nativeStops = [..._nativeStops, _nativeStop];
             }
-            nativeCamera.current?.setNativeProps({
-              stop: { stops: _nativeStops, __updateTS: lastTS },
-            });
+
+            commands.call<void>('updateCameraStop', [
+              {
+                stops: _nativeStops,
+              } as unknown as NativeArg[],
+            ]);
           }
         } else if (config.type === 'CameraStop') {
           const _nativeStop = buildNativeStop(config);
           if (_nativeStop) {
-            nativeCamera.current?.setNativeProps({
-              stop: { __updateTS: lastTS, ..._nativeStop },
-            });
+            commands.call<void>('updateCameraStop', [
+              _nativeStop as unknown as NativeArg,
+            ]);
           }
         }
       };
       const setCamera = useCallback(_setCamera, [
         allowUpdates,
         buildNativeStop,
+        commands,
       ]);
 
       const _fitBounds: CameraRef['fitBounds'] = (
@@ -594,8 +608,6 @@ export const Camera = memo(
   ),
 );
 
-let lastTS = 0;
-
 const RNMBXCamera = NativeCameraView;
 
 export type Camera = CameraRef;

package/src/components/Viewport.tsx

@@ -7,18 +7,14 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import {
-  NodeHandle,
-  findNodeHandle,
-  type NativeMethods,
-  type NativeSyntheticEvent,
-} from 'react-native';
+import { type NativeMethods, type NativeSyntheticEvent } from 'react-native';
 
 import NativeViewport, {
   type NativeViewportReal,
   type OnStatusChangedEventTypeReal,
 } from '../specs/RNMBXViewportNativeComponent';
 import RNMBXViewportModule from '../specs/NativeRNMBXViewportModule';
+import { NativeCommands } from '../utils/NativeCommands';
 
 type FollowPuckOptions = {
   /**
@@ -240,91 +236,3 @@ type NativeProps = Omit<Props, 'onStatusChanged'> & {
 type RNMBXViewportRefType = Component<NativeProps> & Readonly<NativeMethods>;
 
 const RNMBXViewport = NativeViewport as NativeViewportReal;
-
-export type NativeArg =
-  | string
-  | number
-  | boolean
-  | null
-  | { [k: string]: NativeArg }
-  | NativeArg[]
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  | Function
-  | GeoJSON.Geometry
-  | undefined;
-
-type FunctionKeys<T> = keyof {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  [K in keyof T as T[K] extends Function ? K : never]: T[K];
-};
-
-type RefType = React.Component;
-
-class NativeCommands<Spec extends object> {
-  module: Spec;
-
-  preRefMethodQueue: Array<{
-    method: { name: FunctionKeys<Spec>; args: NativeArg[] };
-    resolver: (value: unknown) => void;
-  }>;
-
-  nativeRef: RefType | undefined;
-
-  constructor(module: Spec) {
-    this.module = module;
-    this.preRefMethodQueue = [];
-  }
-
-  async setNativeRef(nativeRef: RefType) {
-    if (nativeRef) {
-      this.nativeRef = nativeRef;
-      while (this.preRefMethodQueue.length > 0) {
-        const item = this.preRefMethodQueue.pop();
-
-        if (item && item.method && item.resolver) {
-          const res = await this._call(
-            item.method.name,
-            nativeRef,
-            item.method.args,
-          );
-          item.resolver(res);
-        }
-      }
-    }
-  }
-
-  call<T>(name: FunctionKeys<Spec>, args: NativeArg[]): Promise<T> {
-    if (this.nativeRef) {
-      return this._call(name, this.nativeRef, args);
-    } else {
-      return new Promise((resolve) => {
-        this.preRefMethodQueue.push({
-          method: { name, args },
-          resolver: resolve as (args: unknown) => void,
-        });
-      });
-    }
-  }
-
-  _call<T>(
-    name: FunctionKeys<Spec>,
-    nativeRef: RefType,
-    args: NativeArg[],
-  ): Promise<T> {
-    const handle = findNodeHandle(nativeRef);
-    if (handle) {
-      return (
-        this.module[name] as (
-          arg0: NodeHandle,
-          ...args: NativeArg[]
-        ) => Promise<T>
-      )(handle, ...args);
-    } else {
-      throw new Error(
-        `Could not find handle for native ref ${module} when trying to invoke ${String(
-          name,
-        )}`,
-      );
-    }
-  }
-}

package/src/specs/NativeRNMBXCameraModule.ts

@@ -0,0 +1,36 @@
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import { TurboModuleRegistry } from 'react-native';
+
+type ViewRef = Int32 | null;
+
+interface NativeCameraStop {
+  centerCoordinate?: string;
+  bounds?: string;
+  heading?: number;
+  pitch?: number;
+  zoom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  duration?: number;
+  mode?: NativeAnimationMode;
+}
+
+type Stop =
+  | {
+      stops: NativeCameraStop[];
+    }
+  | NativeCameraStop;
+
+type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
+
+// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-unused-vars
+type ObjectOr<T> = Object;
+
+export interface Spec extends TurboModule {
+  updateCameraStop(viewRef: ViewRef, stops: ObjectOr<Stop>): Promise<void>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXCameraModule');

package/src/utils/NativeCommands.ts

@@ -0,0 +1,89 @@
+import { NodeHandle, findNodeHandle } from 'react-native';
+
+export type NativeArg =
+  | string
+  | number
+  | boolean
+  | null
+  | { [k: string]: NativeArg }
+  | NativeArg[]
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | Function
+  | GeoJSON.Geometry
+  | undefined;
+
+type FunctionKeys<T> = keyof {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [K in keyof T as T[K] extends Function ? K : never]: T[K];
+};
+
+type RefType = React.Component;
+
+export class NativeCommands<Spec extends object> {
+  module: Spec;
+
+  preRefMethodQueue: Array<{
+    method: { name: FunctionKeys<Spec>; args: NativeArg[] };
+    resolver: (value: unknown) => void;
+  }>;
+
+  nativeRef: RefType | undefined;
+
+  constructor(module: Spec) {
+    this.module = module;
+    this.preRefMethodQueue = [];
+  }
+
+  async setNativeRef(nativeRef: RefType) {
+    if (nativeRef) {
+      this.nativeRef = nativeRef;
+      while (this.preRefMethodQueue.length > 0) {
+        const item = this.preRefMethodQueue.pop();
+
+        if (item && item.method && item.resolver) {
+          const res = await this._call(
+            item.method.name,
+            nativeRef,
+            item.method.args,
+          );
+          item.resolver(res);
+        }
+      }
+    }
+  }
+
+  call<T>(name: FunctionKeys<Spec>, args: NativeArg[]): Promise<T> {
+    if (this.nativeRef) {
+      return this._call(name, this.nativeRef, args);
+    } else {
+      return new Promise((resolve) => {
+        this.preRefMethodQueue.push({
+          method: { name, args },
+          resolver: resolve as (args: unknown) => void,
+        });
+      });
+    }
+  }
+
+  _call<T>(
+    name: FunctionKeys<Spec>,
+    nativeRef: RefType,
+    args: NativeArg[],
+  ): Promise<T> {
+    const handle = findNodeHandle(nativeRef);
+    if (handle) {
+      return (
+        this.module[name] as (
+          arg0: NodeHandle,
+          ...args: NativeArg[]
+        ) => Promise<T>
+      )(handle, ...args);
+    } else {
+      throw new Error(
+        `Could not find handle for native ref ${module} when trying to invoke ${String(
+          name,
+        )}`,
+      );
+    }
+  }
+}