@rnmapbox/maps 10.1.0-beta.9 → 10.1.0-rc.0

package/src/components/PointAnnotation.tsx

@@ -1,17 +1,14 @@
 import React, { SyntheticEvent, type Component } from 'react';
-import {
-  requireNativeComponent,
-  StyleSheet,
-  Platform,
-  type ViewProps,
-} from 'react-native';
-import { Feature, Point } from 'geojson';
+import { StyleSheet, type ViewProps } from 'react-native';
+import { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
 
 import { toJSONString, isFunction } from '../utils';
 import checkRequiredProps from '../utils/checkRequiredProps';
 import { makePoint } from '../utils/geoUtils';
 import { type BaseProps } from '../types/BaseProps';
 import { Position } from '../types/Position';
+import RNMBXPointAnnotationNativeComponent from '../specs/RNMBXPointAnnotationNativeComponent';
+import NativeRNMBXPointAnnotationModule from '../specs/NativeRNMBXPointAnnotationModule';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
 
@@ -127,7 +124,7 @@ type Props = BaseProps & {
  */
 class PointAnnotation extends NativeBridgeComponent(
   React.PureComponent<Props>,
-  NATIVE_MODULE_NAME,
+  NativeRNMBXPointAnnotationModule,
 ) {
   static defaultProps = {
     anchor: { x: 0.5, y: 0.5 },
@@ -146,33 +143,50 @@ class PointAnnotation extends NativeBridgeComponent(
     this._onDragEnd = this._onDragEnd.bind(this);
   }
 
+  _decodePayload<G extends Geometry | null = Geometry, P = GeoJsonProperties>(
+    payload: GeoJSON.Feature<G, P> | string,
+  ): GeoJSON.Feature<G, P> {
+    // 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;
+    }
+  }
+
   _onSelected(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
     if (isFunction(this.props.onSelected)) {
-      this.props.onSelected(e.nativeEvent.payload);
+      const payload = this._decodePayload(e.nativeEvent.payload);
+      this.props.onSelected(payload);
     }
   }
 
   _onDeselected(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
     if (isFunction(this.props.onDeselected)) {
-      this.props.onDeselected(e.nativeEvent.payload);
+      const payload = this._decodePayload(e.nativeEvent.payload);
+      this.props.onDeselected(payload);
     }
   }
 
   _onDragStart(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
     if (isFunction(this.props.onDragStart)) {
-      this.props.onDragStart(e.nativeEvent.payload);
+      const payload = this._decodePayload(e.nativeEvent.payload);
+      this.props.onDragStart(payload);
     }
   }
 
   _onDrag(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
     if (isFunction(this.props.onDrag)) {
-      this.props.onDrag(e.nativeEvent.payload);
+      const payload = this._decodePayload(e.nativeEvent.payload);
+      this.props.onDrag(payload);
     }
   }
 
   _onDragEnd(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
     if (isFunction(this.props.onDragEnd)) {
-      this.props.onDragEnd(e.nativeEvent.payload);
+      const payload = this._decodePayload(e.nativeEvent.payload);
+      this.props.onDragEnd(payload);
     }
   }
 
@@ -189,16 +203,12 @@ class PointAnnotation extends NativeBridgeComponent(
    * Call this for example from Image#onLoad.
    */
   refresh() {
-    if (Platform.OS === 'android') {
-      this._runNativeCommand('refresh', this._nativeRef, []);
-    } else {
-      this._runNativeCommand('refresh', this._nativeRef, []);
-    }
+    this._runNativeMethod('refresh', this._nativeRef, []);
   }
 
   _setNativeRef(nativeRef: NativePointAnnotationRef | null) {
     this._nativeRef = nativeRef;
-    super._runPendingNativeCommands(nativeRef);
+    super._runPendingNativeMethods(nativeRef);
   }
 
   render() {
@@ -221,9 +231,10 @@ class PointAnnotation extends NativeBridgeComponent(
       coordinate: this._getCoordinate(),
     };
     return (
-      <RNMBXPointAnnotation {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXPointAnnotationNativeComponent {...props}>
         {this.props.children}
-      </RNMBXPointAnnotation>
+      </RNMBXPointAnnotationNativeComponent>
     );
   }
 }
@@ -234,7 +245,4 @@ type NativeProps = Omit<Props, 'coordinate'> & {
 
 type NativePointAnnotationRef = Component<NativeProps>;
 
-const RNMBXPointAnnotation =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default PointAnnotation;

package/src/components/RasterDemSource.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
+import RNMBXRasterDemSourceNativeComponent from '../specs/RNMBXRasterDemSourceNativeComponent';
 import { cloneReactChildrenWithProps } from '../utils';
 
 import AbstractSource from './AbstractSource';
@@ -11,8 +12,6 @@ const isTileTemplateUrl = (url?: string): url is string =>
 
 const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RNMBXRasterDemSource';
-
 type Props = {
   /**
    * A string that uniquely identifies the source.
@@ -96,16 +95,14 @@ class RasterDemSource extends AbstractSource<Props, NativeProps> {
       tileSize: this.props.tileSize,
     };
     return (
-      <RNMBXRasterDemSource ref={this.setNativeRef} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterDemSourceNativeComponent ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RNMBXRasterDemSource>
+      </RNMBXRasterDemSourceNativeComponent>
     );
   }
 }
 
-const RNMBXRasterDemSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default RasterDemSource;

package/src/components/RasterLayer.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, RasterLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXRasterLayerNativeComponent from '../specs/RNMBXRasterLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RNMBXRasterLayer';
+// @{codepart-replace-start(LayerPropsCommon.codepart-tsx)}
+type Slot = 'bottom' | 'middle' | 'top';
 
-export type Props = {
+type LayerPropsCommon = {
   /**
-   * A string that uniquely identifies the layer in the style to which it is added.
+   * A string that uniquely identifies the source in the style to which it is added.
    */
   id: string;
 
@@ -63,6 +65,16 @@ export type Props = {
    */
   maxZoomLevel?: number;
 
+  /**
+   * The slot this layer is assigned to. If specified, and a slot with that name exists, it will be placed at that position in the layer order.
+   *
+   * v11 only
+   */
+  slot?: Slot;
+};
+// @{codepart-replace-end}
+
+export type Props = LayerPropsCommon & {
   /**
    * Customizable style attributes
    */
@@ -75,7 +87,7 @@ type NativeTypeProps = Omit<Props, 'style'> & {
 
 class RasterLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
 
   render() {
@@ -83,11 +95,11 @@ class RasterLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RNMBXRasterLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RNMBXRasterLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default RasterLayer;

package/src/components/RasterSource.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { cloneReactChildrenWithProps } from '../utils';
 import { BaseProps } from '../types/BaseProps';
+import RNMBXRasterSourceNativeComponent from '../specs/RNMBXRasterSourceNativeComponent';
 
 import AbstractSource from './AbstractSource';
 
 const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RNMBXRasterSource';
-
 const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
   (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
@@ -115,16 +114,14 @@ class RasterSource extends AbstractSource<Props, NativeProps> {
       attribution: this.props.attribution,
     };
     return (
-      <RNMBXRasterSource ref={this.setNativeRef} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterSourceNativeComponent ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RNMBXRasterSource>
+      </RNMBXRasterSourceNativeComponent>
     );
   }
 }
 
-const RNMBXRasterSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default RasterSource;

package/src/components/ShapeSource.tsx

@@ -3,10 +3,10 @@ import {
   NativeMethods,
   NativeModules,
   NativeSyntheticEvent,
-  requireNativeComponent,
 } from 'react-native';
 
-import { getFilter } from '../utils/filterUtils';
+import RNMBXShapeSourceNativeComponent from '../specs/RNMBXShapeSourceNativeComponent';
+import NativeRNMBXShapeSourceModule from '../specs/NativeRNMBXShapeSourceModule';
 import {
   toJSONString,
   cloneReactChildrenWithProps,
@@ -21,8 +21,6 @@ import NativeBridgeComponent from './NativeBridgeComponent';
 
 const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RNMBXShapeSource';
-
 type OnPressEventDeprecated = OnPressEvent & {
   nativeEvent?: OnPressEvent;
 };
@@ -150,7 +148,7 @@ export type Props = {
  */
 export class ShapeSource extends NativeBridgeComponent(
   AbstractSource<Props, NativeProps>,
-  NATIVE_MODULE_NAME,
+  NativeRNMBXShapeSourceModule,
 ) {
   static NATIVE_ASSETS_KEY = 'assets';
 
@@ -166,31 +164,7 @@ 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;
+    super._runPendingNativeMethods(nativeRef);
   }
 
   /**
@@ -205,19 +179,7 @@ export class ShapeSource extends NativeBridgeComponent(
   async getClusterExpansionZoom(
     feature: string | GeoJSON.Feature,
   ): Promise<number> {
-    if (typeof feature === 'number') {
-      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(
+    const res: { data: number } = await this._runNativeMethod(
       'getClusterExpansionZoom',
       this._nativeRef,
       [JSON.stringify(feature)],
@@ -241,24 +203,7 @@ export class ShapeSource extends NativeBridgeComponent(
     limit: number,
     offset: number,
   ) {
-    if (typeof feature === 'number') {
-      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(
+    const res: { data: string } = await this._runNativeMethod(
       'getClusterLeaves',
       this._nativeRef,
       [JSON.stringify(feature), limit, offset],
@@ -267,7 +212,6 @@ export class ShapeSource extends NativeBridgeComponent(
     if (isAndroid()) {
       return JSON.parse(res.data);
     }
-
     return res.data;
   }
 
@@ -281,24 +225,7 @@ export class ShapeSource extends NativeBridgeComponent(
    * @return {FeatureCollection}
    */
   async getClusterChildren(feature: number | GeoJSON.Feature) {
-    if (typeof feature === 'number') {
-      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(
+    const res: { data: string } = await this._runNativeMethod(
       'getClusterChildren',
       this._nativeRef,
       [JSON.stringify(feature)],
@@ -307,7 +234,6 @@ export class ShapeSource extends NativeBridgeComponent(
     if (isAndroid()) {
       return JSON.parse(res.data);
     }
-
     return res.data;
   }
 
@@ -329,16 +255,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 +317,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 +334,3 @@ type NativeProps = {
   id: string;
   shape?: string;
 };
-
-const RNMBXShapeSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/SkyLayer.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, SkyLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXSkyLayerNativeComponent from '../specs/RNMBXSkyLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
-
-export const NATIVE_MODULE_NAME = 'RNMBXSkyLayer';
+const Mapbox = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -61,15 +60,18 @@ type NativeTypeProps = Omit<Props, 'style'> & {
  */
 class SkyLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
 
   render() {
-    return <RNMBXSkyLayer ref={this.setNativeLayer} {...this.baseProps} />;
+    return (
+      <RNMBXSkyLayerNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={this.setNativeLayer}
+        {...this.baseProps}
+      />
+    );
   }
 }
 
-const RNMBXSkyLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default SkyLayer;

package/src/components/SymbolLayer.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
-import { View, NativeModules, requireNativeComponent } from 'react-native';
+import { View, NativeModules } from 'react-native';
 
-import { Expression, type SymbolLayerStyleProps } from '../utils/MapboxStyles';
+import {
+  type FilterExpression,
+  type SymbolLayerStyleProps,
+} from '../utils/MapboxStyles';
 import { type StyleValue } from '../utils/StyleValue';
+import RNMBXSymbolLayerNativeComponent from '../specs/RNMBXSymbolLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
-
 export const NATIVE_MODULE_NAME = 'RNMBXSymbolLayer';
 
-export type Props = {
+const Mapbox = NativeModules.RNMBXModule;
+
+// @{codepart-replace-start(LayerPropsCommon.codepart-tsx)}
+type Slot = 'bottom' | 'middle' | 'top';
+
+type LayerPropsCommon = {
   /**
-   * A string that uniquely identifies the layer in the style to which it is added.
+   * A string that uniquely identifies the source in the style to which it is added.
    */
   id: string;
 
@@ -51,7 +58,7 @@ export type Props = {
   /**
    *  Filter only the features in the source layer that satisfy a condition that you define
    */
-  filter?: Expression;
+  filter?: FilterExpression;
 
   /**
    * The minimum zoom level at which the layer gets parsed and appears.
@@ -63,7 +70,20 @@ export type Props = {
    */
   maxZoomLevel?: number;
 
-  style?: SymbolLayerStyleProps;
+  /**
+   * The slot this layer is assigned to. If specified, and a slot with that name exists, it will be placed at that position in the layer order.
+   *
+   * v11 only
+   */
+  slot?: Slot;
+};
+// @{codepart-replace-end}
+
+export type Props = LayerPropsCommon & {
+  /**
+   * Customizable style attributes
+   */
+  style: SymbolLayerStyleProps;
 
   /**
    * @deprecated passed children used to create an image with id of symbol in style and also set the iconImageName property accordingly.
@@ -77,15 +97,12 @@ type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
 
-const RNMBXSymbolLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
 export class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
   deprecationLogged: { snapshot: boolean } = { snapshot: false };
 
@@ -119,9 +136,10 @@ export class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
     };
 
     return (
-      <RNMBXSymbolLayer ref={this.setNativeLayer} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXSymbolLayerNativeComponent ref={this.setNativeLayer} {...props}>
         {this.props.children}
-      </RNMBXSymbolLayer>
+      </RNMBXSymbolLayerNativeComponent>
     );
   }
 }

package/src/components/Terrain.tsx

@@ -1,11 +1,9 @@
 import React, { memo, useMemo } from 'react';
-import { requireNativeComponent } from 'react-native';
 
 import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
-import { StyleValue, transformStyle } from '../utils/StyleValue';
+import { transformStyle } from '../utils/StyleValue';
 import type { BaseProps } from '../types/BaseProps';
-
-export const NATIVE_MODULE_NAME = 'RNMBXTerrain';
+import RNMBXATerrainNativeComponent from '../specs/RNMBXTerrainNativeComponent';
 
 type Props = BaseProps & {
   /**
@@ -24,10 +22,6 @@ type Props = BaseProps & {
   style?: TerrainLayerStyleProps;
 };
 
-type NativeProps = Omit<Props, 'style'> & {
-  reactStyle?: { [key: string]: StyleValue };
-};
-
 export const Terrain = memo((props: Props) => {
   let { style = {} } = props;
 
@@ -46,7 +40,5 @@ export const Terrain = memo((props: Props) => {
     };
   }, [props, style]);
 
-  return <RNMBXTerrain {...baseProps} />;
+  return <RNMBXATerrainNativeComponent {...baseProps} />;
 });
-
-const RNMBXTerrain = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/UserLocation.tsx

@@ -7,7 +7,7 @@ import { CircleLayerStyle } from '../Mapbox';
 import Annotation from './Annotation';
 import CircleLayer from './CircleLayer';
 import HeadingIndicator from './HeadingIndicator';
-import NativeUserLocation from './NativeUserLocation';
+import NativeUserLocation from './LocationPuck';
 
 const mapboxBlue = 'rgba(51, 181, 229, 100)';
 
@@ -100,6 +100,7 @@ type Props = {
   onUpdate?: (location: Location) => void;
 
   /**
+   * @deprecated use NativeUserLocation component instead of UserLocationRenderMode.Native
    * Which render mode to use.
    */
   renderMode?: UserLocationRenderMode;