@rnmapbox/maps 10.1.0-beta.11 → 10.1.0-beta.14

package/src/components/ShapeSource.tsx

@@ -3,10 +3,11 @@ import {
   NativeMethods,
   NativeModules,
   NativeSyntheticEvent,
-  requireNativeComponent,
+  findNodeHandle,
 } from 'react-native';
 
-import { getFilter } from '../utils/filterUtils';
+import RNMBXShapeSourceNativeComponent from '../specs/RNMBXShapeSourceNativeComponent';
+import NativeRNMBXShapeSourceModule from '../specs/NativeRNMBXShapeSourceModule';
 import {
   toJSONString,
   cloneReactChildrenWithProps,
@@ -17,7 +18,6 @@ import { copyPropertiesAsDeprecated } from '../utils/deprecation';
 import { OnPressEvent } from '../types/OnPressEvent';
 
 import AbstractSource from './AbstractSource';
-import NativeBridgeComponent from './NativeBridgeComponent';
 
 const MapboxGL = NativeModules.RNMBXModule;
 
@@ -148,10 +148,7 @@ export type Props = {
  * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
  * The shape may be an url or a GeoJSON object
  */
-export class ShapeSource extends NativeBridgeComponent(
-  AbstractSource<Props, NativeProps>,
-  NATIVE_MODULE_NAME,
-) {
+export class ShapeSource extends AbstractSource<Props, NativeProps> {
   static NATIVE_ASSETS_KEY = 'assets';
 
   static defaultProps = {
@@ -166,31 +163,6 @@ export class ShapeSource extends NativeBridgeComponent(
     nativeRef: React.Component<NativeProps> & Readonly<NativeMethods>,
   ) {
     this.setNativeRef(nativeRef);
-    super._runPendingNativeCommands(nativeRef);
-  }
-
-  /**
-   * Returns all features from the source that match the query parameters whether the feature is currently
-   * rendered on the map.
-   *
-   * @example
-   * shapeSource.features()
-   *
-   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-   * @return {FeatureCollection}
-   */
-  async features(filter: Array<string> = []) {
-    const res: { data: string } = await this._runNativeCommand(
-      'features',
-      this._nativeRef,
-      getFilter(filter),
-    );
-
-    if (isAndroid()) {
-      return JSON.parse(res.data);
-    }
-
-    return res.data;
   }
 
   /**
@@ -209,19 +181,14 @@ export class ShapeSource extends NativeBridgeComponent(
       console.warn(
         'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
       );
-      const res: { data: number } = await this._runNativeCommand(
-        'getClusterExpansionZoomById',
-        this._nativeRef,
-        [feature],
-      );
-      return res.data;
     }
 
-    const res: { data: number } = await this._runNativeCommand(
-      'getClusterExpansionZoom',
-      this._nativeRef,
-      [JSON.stringify(feature)],
-    );
+    const handle = findNodeHandle(this._nativeRef as any);
+
+    const res = (await NativeRNMBXShapeSourceModule.getClusterExpansionZoom(
+      handle,
+      JSON.stringify(feature),
+    )) as { data: number };
     return res.data;
   }
 
@@ -245,24 +212,16 @@ export class ShapeSource extends NativeBridgeComponent(
       console.warn(
         'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
       );
-      const res: { data: string } = await this._runNativeCommand(
-        'getClusterLeavesById',
-        this._nativeRef,
-        [feature, limit, offset],
-      );
-
-      if (isAndroid()) {
-        return JSON.parse(res.data);
-      }
-
-      return res.data;
     }
 
-    const res: { data: string } = await this._runNativeCommand(
-      'getClusterLeaves',
-      this._nativeRef,
-      [JSON.stringify(feature), limit, offset],
-    );
+    const handle = findNodeHandle(this._nativeRef as any);
+
+    const res = (await NativeRNMBXShapeSourceModule.getClusterLeaves(
+      handle,
+      JSON.stringify(feature),
+      limit,
+      offset,
+    )) as { data: string };
 
     if (isAndroid()) {
       return JSON.parse(res.data);
@@ -285,24 +244,14 @@ export class ShapeSource extends NativeBridgeComponent(
       console.warn(
         'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
       );
-      const res: { data: string } = await this._runNativeCommand(
-        'getClusterChildrenById',
-        this._nativeRef,
-        [feature],
-      );
-
-      if (isAndroid()) {
-        return JSON.parse(res.data);
-      }
-
-      return res.data;
     }
 
-    const res: { data: string } = await this._runNativeCommand(
-      'getClusterChildren',
-      this._nativeRef,
-      [JSON.stringify(feature)],
-    );
+    const handle = findNodeHandle(this._nativeRef as any);
+
+    const res = (await NativeRNMBXShapeSourceModule.getClusterChildren(
+      handle,
+      JSON.stringify(feature),
+    )) as { data: string };
 
     if (isAndroid()) {
       return JSON.parse(res.data);
@@ -329,16 +278,23 @@ export class ShapeSource extends NativeBridgeComponent(
     return toJSONString(this.props.shape);
   }
 
+  _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;
+    }
+  }
+
   onPress(
     event: NativeSyntheticEvent<{
       payload: OnPressEvent;
     }>,
   ) {
-    const {
-      nativeEvent: {
-        payload: { features, coordinates, point },
-      },
-    } = event;
+    const payload = this._decodePayload(event.nativeEvent.payload);
+    const { features, coordinates, point } = payload;
     let newEvent: OnPressEventDeprecated = {
       features,
       coordinates,
@@ -384,15 +340,15 @@ export class ShapeSource extends NativeBridgeComponent(
       ref: (
         nativeRef: React.Component<NativeProps> & Readonly<NativeMethods>,
       ) => this._setNativeRef(nativeRef),
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
     };
 
     return (
-      <RNMBXShapeSource {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXShapeSourceNativeComponent {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RNMBXShapeSource>
+      </RNMBXShapeSourceNativeComponent>
     );
   }
 }
@@ -401,6 +357,3 @@ type NativeProps = {
   id: string;
   shape?: string;
 };
-
-const RNMBXShapeSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/VectorSource.tsx

@@ -3,16 +3,14 @@ import {
   NativeMethods,
   NativeModules,
   NativeSyntheticEvent,
-  requireNativeComponent,
 } from 'react-native';
 
-import { cloneReactChildrenWithProps, isFunction, isAndroid } from '../utils';
-import { getFilter } from '../utils/filterUtils';
+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.RNMBXModule;
 
@@ -99,10 +97,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,
   };
@@ -117,46 +112,26 @@ class VectorSource extends NativeBridgeComponent(
     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 +172,20 @@ class VectorSource extends NativeBridgeComponent(
       hasPressListener: isFunction(this.props.onPress),
       onMapboxVectorSourcePress: this.onPress.bind(this),
       onPress: undefined,
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
     };
     return (
-      <RNMBXVectorSource ref={(r) => this._setNativeRef(r)} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXVectorSourceNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={(r) => this._setNativeRef(r)}
+        {...props}
+      >
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RNMBXVectorSource>
+      </RNMBXVectorSourceNativeComponent>
     );
   }
 }
 
-const RNMBXVectorSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default VectorSource;

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/RNMBXBackgroundLayerNativeComponent.ts

@@ -4,19 +4,22 @@ 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: UnsafeMixed<boolean>;
+  existing?: OptionalProp<boolean>;
   filter: UnsafeMixed<any[]>;
 
-  aboveLayerID: UnsafeMixed<string>;
-  belowLayerID: UnsafeMixed<string>;
-  layerIndex: UnsafeMixed<Int32>;
+  aboveLayerID?: OptionalProp<string>;
+  belowLayerID?: OptionalProp<string>;
+  layerIndex?: OptionalProp<Int32>;
   reactStyle: UnsafeMixed<any>;
 
-  maxZoomLevel: UnsafeMixed<Double>;
-  minZoomLevel: UnsafeMixed<Double>;
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/RNMBXCameraNativeComponent.ts

@@ -8,6 +8,9 @@ import {
 
 import type { NativeCameraStop, UnsafeMixed } from './codegenUtils';
 
+// see https://github.com/rnmapbox/maps/wiki/FabricOptionalProp
+type OptionalProp<T> = UnsafeMixed<T>;
+
 type UserTrackingModeChangeEventType = {
   type: string;
   payloadRenamed: {
@@ -18,21 +21,21 @@ type UserTrackingModeChangeEventType = {
 
 export interface NativeProps extends ViewProps {
   maxBounds?: UnsafeMixed<string | null>;
-  animationDuration?: UnsafeMixed<Double>;
-  animationMode?: UnsafeMixed<string>;
+  animationDuration?: OptionalProp<Double>;
+  animationMode?: OptionalProp<string>;
   defaultStop?: UnsafeMixed<NativeCameraStop>;
-  userTrackingMode?: UnsafeMixed<Int32>;
+  userTrackingMode?: OptionalProp<Int32>;
 
-  followUserLocation?: UnsafeMixed<boolean>;
-  followUserMode?: UnsafeMixed<string>;
-  followZoomLevel?: UnsafeMixed<Double>;
-  followPitch?: UnsafeMixed<Double>;
-  followHeading?: UnsafeMixed<Double>;
+  followUserLocation?: OptionalProp<boolean>;
+  followUserMode?: OptionalProp<string>;
+  followZoomLevel?: OptionalProp<Double>;
+  followPitch?: OptionalProp<Double>;
+  followHeading?: OptionalProp<Double>;
   followPadding?: UnsafeMixed<any>;
 
-  zoomLevel?: UnsafeMixed<Double>;
-  maxZoomLevel?: UnsafeMixed<Double>;
-  minZoomLevel?: UnsafeMixed<Double>;
+  zoomLevel?: OptionalProp<Double>;
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
   stop?: UnsafeMixed<NativeCameraStop>;
 
   onUserTrackingModeChange?: DirectEventHandler<UserTrackingModeChangeEventType>;

package/src/specs/RNMBXCircleLayerNativeComponent.ts

@@ -4,20 +4,23 @@ 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: UnsafeMixed<boolean>;
+  sourceID: OptionalProp<string>;
+  existing: OptionalProp<boolean>;
   filter: UnsafeMixed<any[]>;
 
-  aboveLayerID: UnsafeMixed<string>;
-  belowLayerID: UnsafeMixed<string>;
-  layerIndex: UnsafeMixed<Int32>;
+  aboveLayerID: OptionalProp<string>;
+  belowLayerID: OptionalProp<string>;
+  layerIndex: OptionalProp<Int32>;
   reactStyle: UnsafeMixed<any>;
 
-  maxZoomLevel: UnsafeMixed<Double>;
-  minZoomLevel: UnsafeMixed<Double>;
-  sourceLayerID: UnsafeMixed<string>;
+  maxZoomLevel: OptionalProp<Double>;
+  minZoomLevel: OptionalProp<Double>;
+  sourceLayerID: OptionalProp<string>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/RNMBXFillExtrusionLayerNativeComponent.ts

@@ -4,20 +4,23 @@ 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: UnsafeMixed<boolean>;
+  id?: UnsafeMixed<string>;
+  sourceID?: OptionalProp<string>;
+  existing?: OptionalProp<boolean>;
   filter: UnsafeMixed<any[]>;
 
-  aboveLayerID: UnsafeMixed<string>;
-  belowLayerID: UnsafeMixed<string>;
-  layerIndex: UnsafeMixed<Int32>;
+  aboveLayerID?: OptionalProp<string>;
+  belowLayerID?: OptionalProp<string>;
+  layerIndex?: OptionalProp<Int32>;
   reactStyle: UnsafeMixed<any>;
 
-  maxZoomLevel: UnsafeMixed<Double>;
-  minZoomLevel: UnsafeMixed<Double>;
-  sourceLayerID: UnsafeMixed<string>;
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
+  sourceLayerID?: OptionalProp<string>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/RNMBXFillLayerNativeComponent.ts

@@ -4,20 +4,23 @@ 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: UnsafeMixed<boolean>;
+  sourceID?: OptionalProp<string>;
+  existing?: OptionalProp<boolean>;
   filter: UnsafeMixed<any[]>;
 
-  aboveLayerID: UnsafeMixed<string>;
-  belowLayerID: UnsafeMixed<string>;
-  layerIndex: UnsafeMixed<Int32>;
+  aboveLayerID?: OptionalProp<string>;
+  belowLayerID?: OptionalProp<string>;
+  layerIndex?: OptionalProp<Int32>;
   reactStyle: UnsafeMixed<any>;
 
-  maxZoomLevel: UnsafeMixed<Double>;
-  minZoomLevel: UnsafeMixed<Double>;
-  sourceLayerID: UnsafeMixed<string>;
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
+  sourceLayerID?: OptionalProp<string>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/RNMBXHeatmapLayerNativeComponent.ts

@@ -4,20 +4,23 @@ 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: UnsafeMixed<boolean>;
+  id: OptionalProp<string>;
+  sourceID?: OptionalProp<string>;
+  existing?: OptionalProp<boolean>;
   filter: UnsafeMixed<any[]>;
 
-  aboveLayerID: UnsafeMixed<string>;
-  belowLayerID: UnsafeMixed<string>;
-  layerIndex: UnsafeMixed<Int32>;
+  aboveLayerID?: OptionalProp<string>;
+  belowLayerID?: OptionalProp<string>;
+  layerIndex?: OptionalProp<Int32>;
   reactStyle: UnsafeMixed<any>;
 
-  maxZoomLevel: UnsafeMixed<Double>;
-  minZoomLevel: UnsafeMixed<Double>;
-  sourceLayerID: UnsafeMixed<string>;
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
+  sourceLayerID?: OptionalProp<string>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/RNMBXImageSourceNativeComponent.ts

@@ -0,0 +1,15 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import { UnsafeMixed } from './codegenUtils';
+
+export interface NativeProps extends ViewProps {
+  id: UnsafeMixed<string>;
+  existing: UnsafeMixed<boolean>;
+  url: UnsafeMixed<string>;
+  coordinates: UnsafeMixed<any>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNMBXImageSource',
+) as HostComponent<NativeProps>;

package/src/specs/RNMBXLineLayerNativeComponent.ts

@@ -4,20 +4,23 @@ 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: UnsafeMixed<boolean>;
+  sourceID?: OptionalProp<string>;
+  existing?: OptionalProp<boolean>;
   filter: UnsafeMixed<any[]>;
 
-  aboveLayerID: UnsafeMixed<string>;
-  belowLayerID: UnsafeMixed<string>;
-  layerIndex: UnsafeMixed<Int32>;
+  aboveLayerID?: OptionalProp<string>;
+  belowLayerID?: OptionalProp<string>;
+  layerIndex?: OptionalProp<Int32>;
   reactStyle: UnsafeMixed<any>;
 
-  maxZoomLevel: UnsafeMixed<Double>;
-  minZoomLevel: UnsafeMixed<Double>;
-  sourceLayerID: UnsafeMixed<string>;
+  maxZoomLevel?: OptionalProp<Double>;
+  minZoomLevel?: OptionalProp<Double>;
+  sourceLayerID?: OptionalProp<string>;
 }
 
 export default codegenNativeComponent<NativeProps>(