@rnmapbox/maps 10.1.0-beta.2 → 10.1.0-beta.20

package/src/components/VectorSource.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
-import {
-  NativeMethods,
-  NativeModules,
-  NativeSyntheticEvent,
-  requireNativeComponent,
-} from 'react-native';
-
-import { cloneReactChildrenWithProps, isFunction, isAndroid } from '../utils';
-import { getFilter } from '../utils/filterUtils';
+import { NativeModules, NativeSyntheticEvent } from 'react-native';
+
+import RNMBXVectorSourceNativeComponent from '../specs/RNMBXVectorSourceNativeComponent';
+import { cloneReactChildrenWithProps, isFunction } from '../utils';
 import { copyPropertiesAsDeprecated } from '../utils/deprecation';
 import { OnPressEvent } from '../types/OnPressEvent';
 
 import AbstractSource from './AbstractSource';
-import NativeBridgeComponent from './NativeBridgeComponent';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+export const NATIVE_MODULE_NAME = 'RNMBXVectorSource';
 
 interface Props {
   /**
@@ -99,10 +93,7 @@ type NativeProps = Props; // Omit<Props, 'children'>;
  * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
  * The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.
  */
-class VectorSource extends NativeBridgeComponent(
-  AbstractSource<Props, NativeProps>,
-  NATIVE_MODULE_NAME,
-) {
+class VectorSource extends AbstractSource<Props, NativeProps> {
   static defaultProps = {
     id: MapboxGL.StyleSource.DefaultSourceID,
   };
@@ -111,52 +102,23 @@ class VectorSource extends NativeBridgeComponent(
     super(props);
   }
 
-  _setNativeRef(
-    nativeRef: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
-  ) {
-    if (nativeRef) {
-      this.setNativeRef(nativeRef);
-      // this._nativeRef = nativeRef;
-      super._runPendingNativeCommands(nativeRef);
-    }
-  }
-
-  /**
-   * Returns all features that match the query parameters regardless of whether or not the feature is
-   * currently rendered on the map. The domain of the query includes all currently-loaded vector tiles
-   * and GeoJSON source tiles. This function does not check tiles outside of the visible viewport.
-   *
-   * @example
-   * vectorSource.features(['id1', 'id2'])
-   *
-   * @param  {Array=} layerIDs - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
-   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-   * @return {FeatureCollection}
-   */
-  async features(layerIDs = [], filter = []) {
-    const res: { data: string } = await this._runNativeCommand(
-      'features',
-      this._nativeRef,
-      [layerIDs, getFilter(filter)],
-    );
-
-    if (isAndroid()) {
-      return JSON.parse(res.data);
+  _decodePayload(payload: OnPressEvent | string): OnPressEvent {
+    // we check whether the payload is a string, since the strict type safety is enforced only on iOS on the new arch
+    // on Android, on both archs, the payload is an object
+    if (typeof payload === 'string') {
+      return JSON.parse(payload);
+    } else {
+      return payload;
     }
-
-    return res.data;
   }
 
   onPress(
     event: NativeSyntheticEvent<{
-      payload: OnPressEvent;
+      payload: OnPressEvent | string;
     }>,
   ) {
-    const {
-      nativeEvent: {
-        payload: { features, coordinates, point },
-      },
-    } = event;
+    const payload = this._decodePayload(event.nativeEvent.payload);
+    const { features, coordinates, point } = payload;
     let newEvent = {
       features,
       coordinates,
@@ -197,19 +159,16 @@ class VectorSource extends NativeBridgeComponent(
       hasPressListener: isFunction(this.props.onPress),
       onMapboxVectorSourcePress: this.onPress.bind(this),
       onPress: undefined,
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
     };
     return (
-      <RCTMGLVectorSource ref={(r) => this._setNativeRef(r)} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXVectorSourceNativeComponent ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLVectorSource>
+      </RNMBXVectorSourceNativeComponent>
     );
   }
 }
 
-const RCTMGLVectorSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default VectorSource;

package/src/components/Viewport.tsx

@@ -0,0 +1,293 @@
+import React, {
+  Component,
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  NodeHandle,
+  findNodeHandle,
+  type NativeMethods,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+import NativeViewport, {
+  type NativeViewportReal,
+  type OnStatusChangedEventTypeReal,
+} from '../specs/RNMBXViewportNativeComponent';
+import RNMBXViewportModule from '../specs/NativeRNMBXViewportModule';
+
+type FollowPuckOptions = {
+  /**
+   * The value to use for setting zoom. If 'keep', zoom will not be modified by the FollowPuckViewportState.
+   * @default DEFAULT_FOLLOW_PUCK_VIEWPORT_STATE_ZOOM.
+   */
+  zoom?: number | 'keep';
+
+  /**
+   * The value to use for setting pitch. If 'keep', pitch will not be modified by the FollowPuckViewportState.
+   * @default DEFAULT_FOLLOW_PUCK_VIEWPORT_STATE_PITCH degrees.
+   */
+  pitch?: number | 'keep';
+
+  /**
+   * Indicates how to obtain the value to use for bearing when setting the camera.
+   * If set to 'keep', bearing will not be modified by the FollowPuckViewportState.
+   *  - heading: sets bearing to the heading of the device
+   *  - course: sets bearing based on the direction of travel
+   *  - number: sets the camera bearing to the constant value on every frame
+   *
+   * On Android, 'heading' and 'coruse' sets the camera bearing to the same as the location puck's bearing. See
+   * [syncWithLocationPuck](https://docs.mapbox.com/android/maps/api/11.0.0-rc.1/mapbox-maps-android/com.mapbox.maps.plugin.viewport.data/-follow-puck-viewport-state-bearing/-sync-with-location-puck/)
+   *
+   * @default 'heading'
+   */
+  bearing?: 'heading' | 'course' | number | 'keep';
+
+  /**
+   * The value to use for setting CameraOptions.padding. If 'keep', padding will not be modified by the FollowPuckViewportState.
+   *
+   * @default 0 padding
+   */
+  padding?:
+    | {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+      }
+    | 'keep';
+};
+
+type ViewportState =
+  | {
+      kind: 'followPuck';
+      options?: FollowPuckOptions;
+    }
+  | {
+      kind: 'overview';
+    };
+
+type ViewportStatus =
+  | {
+      kind: 'idle';
+    }
+  | {
+      kind: 'transition';
+      toState: ViewportState;
+      transition: ViewportTransition;
+    };
+
+type ViewportTransition =
+  | {
+      kind: 'immediate';
+    }
+  | {
+      kind: 'default';
+      maxDurationMs?: number;
+    };
+
+type ViewportStatusChangeReason =
+  | 'TransitionStarted'
+  | 'TransitionSucceeded'
+  | 'IdleRequested'
+  | 'UserInteraction';
+
+type ViewportStatusChangedEvent = {
+  from: ViewportStatus;
+  to: ViewportStatus;
+  reason: ViewportStatusChangeReason;
+};
+
+type Props = {
+  /**
+   * Indicates whether the Viewport should idle when the MapView receives touch input.
+   *
+   * Set this property to false to enable building custom ViewportStates that can work simultaneously with certain types of gestures.
+   *
+   * Defaults to true.
+   */
+  transitionsToIdleUponUserInteraction?: boolean;
+
+  /**
+   * Subscribes to status changes, will be called when the status changes.
+   *
+   * Observers are notified of status changes asynchronously on the main queue.
+   * This means that by the time the notification is delivered, the status may have already changed again.
+   * This behavior is necessary to allow observers to trigger further transitions while avoiding out-of-order
+   * delivery of status changed notifications.
+   *
+   */
+  onStatusChanged?: (event: ViewportStatusChangedEvent) => void;
+};
+
+export interface Ref {
+  getState(): Promise<string>;
+  idle(): Promise<void>;
+  transitionTo(
+    state: ViewportState,
+    transition?: ViewportTransition,
+  ): Promise<boolean>;
+}
+
+/**
+ * provides a structured approach to organizing camera management logic into states and transitions between them.
+ *
+ * At any given time, the viewport is either:
+ *  - idle
+ *  - in a state (camera is being managed by a ViewportState)
+ *  - transitioning between states
+ *
+ * See [android](https://docs.mapbox.com/android/maps/api/${ANDROID_SDK_VERSION}/mapbox-maps-android/com.mapbox.maps.plugin.viewport/viewport.html),
+ * [ios](https://docs.mapbox.com/ios/maps/api/${IOS_SDK_VERSION}/Viewport.html#/s:10MapboxMaps8ViewportC)
+ */
+export const Viewport = memo(
+  forwardRef<Ref, Props>((props: Props, ref: React.ForwardedRef<Ref>) => {
+    const commands = useMemo(() => new NativeCommands(RNMBXViewportModule), []);
+    const nativeViewport = useRef<RNMBXViewportRefType>(null);
+    useEffect(() => {
+      if (nativeViewport.current) {
+        commands.setNativeRef(nativeViewport.current);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [commands, nativeViewport.current]);
+
+    useImperativeHandle(ref, () => ({
+      getState() {
+        console.log(' => calling getState');
+        return commands.call<string>('getState', []);
+      },
+      async idle() {
+        return commands.call<void>('idle', []);
+      },
+      transitionTo(state, transition) {
+        return commands.call<boolean>('transitionTo', [state, transition]);
+      },
+    }));
+
+    const onStatusChangedNative = useMemo(() => {
+      const propsOnStatusChanged = props.onStatusChanged;
+      if (propsOnStatusChanged != null) {
+        return (event: NativeSyntheticEvent<OnStatusChangedEventTypeReal>) => {
+          propsOnStatusChanged(event.nativeEvent.payload);
+        };
+      } else {
+        return undefined;
+      }
+    }, [props.onStatusChanged]);
+
+    return (
+      <RNMBXViewport
+        {...props}
+        hasStatusChanged={props.onStatusChanged != null}
+        onStatusChanged={onStatusChangedNative}
+        ref={nativeViewport}
+      />
+    );
+  }),
+);
+export type Viewport = Ref;
+
+type NativeProps = Omit<Props, 'onStatusChanged'> & {
+  hasStatusChanged: boolean;
+  onStatusChanged?: (
+    event: NativeSyntheticEvent<{
+      type: string;
+      payload: ViewportStatusChangedEvent;
+    }>,
+  ) => void;
+};
+
+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
+  | 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/modules/location/locationManager.ts

@@ -7,8 +7,8 @@ import {
   type AppStateStatus,
 } from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
-const MapboxGLLocationManager = NativeModules.MGLLocationModule;
+const MapboxGL = NativeModules.RNMBXModule;
+const MapboxGLLocationManager = NativeModules.RNMBXLocationModule;
 
 export const LocationModuleEventEmitter = new NativeEventEmitter(
   MapboxGLLocationManager,

package/src/modules/offline/OfflinePack.ts

@@ -2,7 +2,7 @@ import { NativeModules } from 'react-native';
 
 import OfflineCreatePackOptions from './OfflineCreatePackOptions';
 
-const MapboxGLOfflineManager = NativeModules.MGLOfflineModule;
+const MapboxGLOfflineManager = NativeModules.RNMBXOfflineModule;
 
 type OfflinePackStatus = {
   name: string;

package/src/modules/offline/offlineManager.ts

@@ -15,9 +15,9 @@ import OfflineCreatePackOptions, {
 } from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';
 
-const { MGLModule } = NativeModules;
+const { RNMBXModule } = NativeModules;
 
-const MapboxOfflineManager = NativeModules.MGLOfflineModule;
+const MapboxOfflineManager = NativeModules.RNMBXOfflineModule;
 export const OfflineModuleEventEmitter = new NativeEventEmitter(
   MapboxOfflineManager,
 );
@@ -183,7 +183,7 @@ class OfflineManager {
    * @return {void}
    */
   async invalidateAmbientCache(): Promise<void> {
-    if (MGLModule.MapboxV10) {
+    if (RNMBXModule.MapboxV10) {
       console.warn(
         'RNMapbox: invalidateAmbientCache is not implemented on v10',
       );
@@ -205,7 +205,7 @@ class OfflineManager {
    * @return {void}
    */
   async clearAmbientCache(): Promise<void> {
-    if (MGLModule.MapboxV10) {
+    if (RNMBXModule.MapboxV10) {
       console.warn('RNMapbox: clearAmbientCache is not implemented on v10');
       return;
     }
@@ -348,7 +348,7 @@ class OfflineManager {
     if (isFunction(progressListener)) {
       if (totalProgressListeners === 0) {
         this.subscriptionProgress = OfflineModuleEventEmitter.addListener(
-          MGLModule.OfflineCallbackName.Progress,
+          RNMBXModule.OfflineCallbackName.Progress,
           this._onProgress,
         );
       }
@@ -359,7 +359,7 @@ class OfflineManager {
     if (isFunction(errorListener)) {
       if (totalErrorListeners === 0) {
         this.subscriptionError = OfflineModuleEventEmitter.addListener(
-          MGLModule.OfflineCallbackName.Error,
+          RNMBXModule.OfflineCallbackName.Error,
           this._onError,
         );
       }
@@ -434,7 +434,7 @@ class OfflineManager {
     this._progressListeners[name](pack, e.payload);
 
     // cleanup listeners now that they are no longer needed
-    if (state === MGLModule.OfflinePackDownloadState.Complete) {
+    if (state === RNMBXModule.OfflinePackDownloadState.Complete) {
       this.unsubscribe(name);
     }
   }

package/src/modules/snapshot/SnapshotOptions.ts

@@ -3,7 +3,7 @@ import { NativeModules } from 'react-native';
 import { toJSONString } from '../../utils';
 import { makePoint, makeFeatureCollection } from '../../utils/geoUtils';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type SnapshotOptionsArgs = {
   centerCoordinate?: GeoJSON.Position;

package/src/modules/snapshot/snapshotManager.ts

@@ -3,7 +3,7 @@ import { NativeModules } from 'react-native';
 export type { default as SnapshotOptions } from './SnapshotOptions';
 import SnapshotOptions from './SnapshotOptions';
 
-const MapboxGLSnapshotManger = NativeModules.MGLSnapshotModule;
+const MapboxGLSnapshotManger = NativeModules.RNMBXSnapshotModule;
 
 /**
  * The snapshotManager generates static raster images of the map.

package/src/specs/NativeMapViewModule.ts

@@ -51,4 +51,4 @@ export interface Spec extends TurboModule {
   ) => Promise<Object>;
 }
 
-export default TurboModuleRegistry.getEnforcing<Spec>('MBXMapViewModule');
+export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXMapViewModule');

package/src/specs/NativeRNMBXImageModule.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  refresh: (viewRef: Int32 | null) => Promise<Object>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXImageModule');

package/src/specs/NativeRNMBXPointAnnotationModule.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  refresh: (viewRef: Int32 | null) => Promise<Object>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'RNMBXPointAnnotationModule',
+);

package/src/specs/NativeRNMBXShapeSourceModule.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  getClusterExpansionZoom: (
+    viewRef: Int32 | null,
+    featureJSON: string,
+  ) => Promise<Object>;
+  getClusterLeaves: (
+    viewRef: Int32 | null,
+    featureJSON: string,
+    number: Int32,
+    offset: Int32,
+  ) => Promise<Object>;
+  getClusterChildren: (
+    viewRef: Int32 | null,
+    featureJSON: string,
+  ) => Promise<Object>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXShapeSourceModule');

package/src/specs/NativeRNMBXViewportModule.ts

@@ -0,0 +1,41 @@
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import { TurboModuleRegistry } from 'react-native';
+
+type StateInfo =
+  | {
+      kind: 'idle';
+    }
+  | {
+      kind: 'state';
+      status: string;
+    }
+  | {
+      kind: 'transition';
+      toState: string;
+      transition: string;
+    };
+
+// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-unused-vars
+type ObjectOr<T> = Object;
+
+type StateReal = { kind: 'followPuck' } /* | { kind: 'overview' } */;
+type State = ObjectOr<StateReal>;
+type TransitionReal =
+  | { kind: 'immediate' }
+  | { kind: 'default'; options: { maxDurationMs?: number } };
+type Transition = ObjectOr<TransitionReal>;
+
+type ViewRef = Int32 | null;
+
+export interface Spec extends TurboModule {
+  getState(viewRef: ViewRef): Promise<StateInfo>;
+  transitionTo(
+    viewRef: ViewRef,
+    state: State,
+    transition: Transition,
+  ): Promise<void>;
+  idle(viewRef: ViewRef): Promise<void>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXViewportModule');

package/src/specs/RNMBXAtmosphereNativeComponent.ts

@@ -0,0 +1,12 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import type { UnsafeMixed } from './codegenUtils';
+
+export interface NativeProps extends ViewProps {
+  reactStyle: UnsafeMixed<any>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNMBXAtmosphere',
+) as HostComponent<NativeProps>;

package/src/specs/RNMBXBackgroundLayerNativeComponent.ts

@@ -0,0 +1,27 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+import type { UnsafeMixed } from './codegenUtils';
+
+// see https://github.com/rnmapbox/maps/wiki/FabricOptionalProp
+type OptionalProp<T> = UnsafeMixed<T>;
+
+export interface NativeProps extends ViewProps {
+  id: UnsafeMixed<string>;
+  sourceID: UnsafeMixed<string>;
+  existing?: OptionalProp<boolean>;
+  filter: UnsafeMixed<any[]>;
+
+  aboveLayerID?: OptionalProp<string>;
+  belowLayerID?: OptionalProp<string>;
+  layerIndex?: OptionalProp<Int32>;
+  reactStyle: UnsafeMixed<any>;
+
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNMBXBackgroundLayer',
+) as HostComponent<NativeProps>;

package/src/specs/RNMBXCalloutNativeComponent.ts

@@ -0,0 +1,9 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNMBXCallout',
+) as HostComponent<NativeProps>;