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

package/src/components/PointAnnotation.tsx

@@ -1,21 +1,18 @@
 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';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+export const NATIVE_MODULE_NAME = 'RNMBXPointAnnotation';
 
 const styles = StyleSheet.create({
   container: {
@@ -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 (
-      <RCTMGLPointAnnotation {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXPointAnnotationNativeComponent {...props}>
         {this.props.children}
-      </RCTMGLPointAnnotation>
+      </RNMBXPointAnnotationNativeComponent>
     );
   }
 }
@@ -234,7 +245,4 @@ type NativeProps = Omit<Props, 'coordinate'> & {
 
 type NativePointAnnotationRef = Component<NativeProps>;
 
-const RCTMGLPointAnnotation =
-  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';
@@ -9,9 +10,7 @@ const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
   (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterDemSource';
+const MapboxGL = NativeModules.RNMBXModule;
 
 type Props = {
   /**
@@ -96,16 +95,14 @@ class RasterDemSource extends AbstractSource<Props, NativeProps> {
       tileSize: this.props.tileSize,
     };
     return (
-      <RCTMGLRasterDemSource ref={this.setNativeRef} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterDemSourceNativeComponent ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLRasterDemSource>
+      </RNMBXRasterDemSourceNativeComponent>
     );
   }
 }
 
-const RCTMGLRasterDemSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default RasterDemSource;

package/src/components/RasterLayer.tsx

@@ -1,14 +1,13 @@
 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.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -83,11 +82,11 @@ class RasterLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLRasterLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default RasterLayer;

package/src/components/RasterSource.tsx

@@ -1,14 +1,13 @@
 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.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterSource';
+const MapboxGL = NativeModules.RNMBXModule;
 
 const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
@@ -115,16 +114,14 @@ class RasterSource extends AbstractSource<Props, NativeProps> {
       attribution: this.props.attribution,
     };
     return (
-      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterSourceNativeComponent ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLRasterSource>
+      </RNMBXRasterSourceNativeComponent>
     );
   }
 }
 
-const RCTMGLRasterSource =
-  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,
@@ -19,9 +19,7 @@ import { OnPressEvent } from '../types/OnPressEvent';
 import AbstractSource from './AbstractSource';
 import NativeBridgeComponent from './NativeBridgeComponent';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
+const MapboxGL = NativeModules.RNMBXModule;
 
 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 (
-      <RCTMGLShapeSource {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXShapeSourceNativeComponent {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLShapeSource>
+      </RNMBXShapeSourceNativeComponent>
     );
   }
 }
@@ -401,6 +334,3 @@ type NativeProps = {
   id: string;
   shape?: string;
 };
-
-const RCTMGLShapeSource =
-  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.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLSkyLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -65,11 +64,14 @@ class SkyLayer extends AbstractLayer<Props, NativeTypeProps> {
   };
 
   render() {
-    return <RCTMGLSkyLayer ref={this.setNativeLayer} {...this.baseProps} />;
+    return (
+      <RNMBXSkyLayerNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={this.setNativeLayer}
+        {...this.baseProps}
+      />
+    );
   }
 }
 
-const RCTMGLSkyLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default SkyLayer;

package/src/components/StyleImport.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+
+import NativeStyleImport from '../specs/RNMBXStyleImportNativeComponent';
+
+type Props = {
+  /**
+   * id of the style import (eg. basemap)
+   */
+  id: string;
+
+  /**
+   * existing is now always required as true
+   */
+  existing: boolean;
+
+  /**
+   * config is a dictionary of configuration options for the style import.
+   *
+   * See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
+   */
+  config: {
+    [key: string]: string;
+  };
+};
+
+/**
+ * Use StyleImport to set configuration options on the new standard style. **V11 only.**
+ *
+ * See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
+ */
+export default memo((props: Props) => {
+  return <NativeStyleImport {...props} />;
+});

package/src/components/SymbolLayer.tsx

@@ -1,14 +1,15 @@
 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 StyleValue } from '../utils/StyleValue';
+import RNMBXSymbolLayerNativeComponent from '../specs/RNMBXSymbolLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = 'RNMBXSymbolLayer';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -77,9 +78,6 @@ type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
 
-const RCTMGLSymbolLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
@@ -119,9 +117,10 @@ export class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
     };
 
     return (
-      <RCTMGLSymbolLayer ref={this.setNativeLayer} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXSymbolLayerNativeComponent ref={this.setNativeLayer} {...props}>
         {this.props.children}
-      </RCTMGLSymbolLayer>
+      </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 = 'RCTMGLTerrain';
+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 <RCTMGLTerrain {...baseProps} />;
+  return <RNMBXATerrainNativeComponent {...baseProps} />;
 });
-
-const RCTMGLTerrain = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/UserLocation.tsx

@@ -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;