@rnmapbox/maps 10.0.0-beta.43 → 10.0.0-beta.44

package/javascript/components/NativeBridgeComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { runNativeCommand, isAndroid } from '../utils';
+import { type NativeArg, runNativeCommand, isAndroid } from '../utils';
 
 let callbackIncrement = 0;
 
@@ -9,18 +9,24 @@ export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   type: string;
 };
 
-const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
-  class extends B {
+const NativeBridgeComponent = <
+  Props extends object,
+  BaseComponent extends new (...ags: any[]) => React.Component<Props>,
+>(
+  Base: BaseComponent,
+  nativeModuleName: string,
+) =>
+  class extends Base {
     _nativeModuleName: string;
     _onAndroidCallback: (e: any) => void;
     _callbackMap: Map<string, any>;
     _preRefMapMethodQueue: Array<{
-      method: { name: string; args: Array<string> };
-      resolver: (value: unknown) => void;
+      method: { name: string; args: NativeArg[] };
+      resolver: (value: NativeArg) => void;
     }>;
 
-    constructor(props: T, nativeModuleName: string) {
-      super(props);
+    constructor(...args: any[]) {
+      super(...args);
 
       this._nativeModuleName = nativeModuleName;
       this._onAndroidCallback = this._onAndroidCallbackO.bind(this);
@@ -28,9 +34,9 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback(
+    _addAddAndroidCallback<ReturnType>(
       id: string,
-      resolve: (value: string) => void,
+      resolve: (value: ReturnType) => void,
       reject: (error: Error) => void,
     ) {
       this._callbackMap.set(id, { resolve, reject });
@@ -74,16 +80,16 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       }
     }
 
-    _runNativeCommand<RefType>(
+    _runNativeCommand<RefType, ReturnType = NativeArg>(
       methodName: string,
       nativeRef: RefType,
-      args: string[] = [],
-    ) {
+      args: NativeArg[] = [],
+    ): Promise<ReturnType> {
       if (!nativeRef) {
-        return new Promise((resolve) => {
+        return new Promise<ReturnType>((resolve) => {
           this._preRefMapMethodQueue.push({
             method: { name: methodName, args },
-            resolver: resolve,
+            resolver: resolve as (args: NativeArg) => void,
           });
         });
       }

package/javascript/components/PointAnnotation.tsx

@@ -120,6 +120,7 @@ type PointAnnotationProps = {
  */
 class PointAnnotation extends NativeBridgeComponent(
   React.PureComponent<PointAnnotationProps>,
+  NATIVE_MODULE_NAME,
 ) {
   static defaultProps = {
     anchor: { x: 0.5, y: 0.5 },
@@ -129,7 +130,7 @@ class PointAnnotation extends NativeBridgeComponent(
   _nativeRef: NativePointAnnotationRef | null = null;
 
   constructor(props: PointAnnotationProps) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
     this._onSelected = this._onSelected.bind(this);
     this._onDeselected = this._onDeselected.bind(this);
     this._onDragStart = this._onDragStart.bind(this);

package/javascript/components/RasterSource.js

@@ -107,7 +107,7 @@ class RasterSource extends AbstractSource {
       attribution: this.props.attribution,
     };
     return (
-      <RCTMGLRasterSource ref="nativeSource" {...props}>
+      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}

package/javascript/components/ShapeSource.tsx

@@ -0,0 +1,412 @@
+import React from 'react';
+import {
+  HostComponent,
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from 'react-native';
+
+import { getFilter } from '../utils/filterUtils';
+import {
+  toJSONString,
+  cloneReactChildrenWithProps,
+  isFunction,
+  isAndroid,
+} from '../utils';
+import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
+
+export type OnPressEvent = {
+  features: Array<GeoJSON.Feature>;
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  };
+  point: {
+    x: number;
+    y: number;
+  };
+};
+type OnPressEventDeprecated = OnPressEvent & {
+  nativeEvent?: OnPressEvent;
+};
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
+   */
+  url?: string;
+
+  /**
+   * The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection.
+   */
+  shape?:
+    | GeoJSON.GeometryCollection
+    | GeoJSON.Feature
+    | GeoJSON.FeatureCollection
+    | GeoJSON.Geometry;
+
+  /**
+   * Enables clustering on the source for point shapes.
+   */
+  cluster?: boolean;
+
+  /**
+   * Specifies the radius of each cluster if clustering is enabled.
+   * A value of 512 produces a radius equal to the width of a tile.
+   * The default value is 50.
+   */
+  clusterRadius?: number;
+
+  /**
+   * Specifies the maximum zoom level at which to cluster points if clustering is enabled.
+   * Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,
+   * the shapes are not clustered.
+   */
+  clusterMaxZoomLevel?: number;
+
+  /**
+   * [`mapbox-gl` (v8) implementation only]
+   * Specifies custom properties on the generated clusters if clustering
+   * is enabled, aggregating values from clustered points.
+   *
+   * Has the form `{ "property_name": [operator, map_expression]}`, where
+   *  `operator` is a custom reduce expression that references a special `["accumulated"]` value -
+   *   it accumulates the property value from clusters/points the cluster contains
+   *  `map_expression` produces the value of a single point
+   *
+   * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
+   *
+   */
+  clusterProperties?: object;
+
+  /**
+   * Specifies the maximum zoom level at which to create vector tiles.
+   * A greater value produces greater detail at high zoom levels.
+   * The default value is 18.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Specifies the size of the tile buffer on each side.
+   * A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
+   * Larger values produce fewer rendering artifacts near tile edges and slower performance.
+   * The default value is 128.
+   */
+  buffer?: number;
+
+  /**
+   * Specifies the Douglas-Peucker simplification tolerance.
+   * A greater value produces simpler geometries and improves performance.
+   * The default value is 0.375.
+   */
+  tolerance?: number;
+
+  /**
+   * Whether to calculate line distance metrics.
+   * This is required for line layers that specify lineGradient values.
+   * The default value is false.
+   */
+  lineMetrics?: boolean;
+
+  /**
+   * Source press listener, gets called when a user presses one of the children layers only
+   * if that layer has a higher z-index than another source layers
+   *
+   * @param {Object} event
+   * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
+   * @param {Object} event.coordinates - the coordinates of the click
+   * @param {Object} event.point - the point of the click
+   * @return void
+   */
+  onPress?: (event: OnPressEvent) => void;
+
+  /**
+   * Overrides the default touch hitbox(44x44 pixels) for the source layers
+   */
+  hitbox?: {
+    /**
+     * `width` of hitbox
+     */
+    width: number;
+    /**
+     * `height` of hitbox
+     */
+    height: number;
+  };
+
+  children: React.ReactElement | React.ReactElement[];
+};
+
+/**
+ * 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,
+) {
+  static NATIVE_ASSETS_KEY = 'assets';
+
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  _setNativeRef(
+    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;
+  }
+
+  /**
+   * Returns the zoom needed to expand the cluster.
+   *
+   * @example
+   * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
+   *
+   * @param  {Feature} feature - The feature cluster to expand.
+   * @return {number}
+   */
+  async getClusterExpansionZoom(
+    feature: string | GeoJSON.Feature,
+  ): Promise<string> {
+    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(
+        'getClusterExpansionZoomById',
+        this._nativeRef,
+        [feature],
+      );
+      return res.data;
+    }
+
+    const res: { data: string } = await this._runNativeCommand(
+      'getClusterExpansionZoom',
+      this._nativeRef,
+      [JSON.stringify(feature)],
+    );
+    return res.data;
+  }
+
+  /**
+   * Returns the FeatureCollection from the cluster.
+   *
+   * @example
+   * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
+   *
+   * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
+   * @param  {number} limit - The number of points to return.
+   * @param  {number} offset - The amount of points to skip (for pagination).
+   * @return {FeatureCollection}
+   */
+  async getClusterLeaves(
+    feature: number | GeoJSON.Feature,
+    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(
+      'getClusterLeaves',
+      this._nativeRef,
+      [JSON.stringify(feature), limit, offset],
+    );
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  /**
+   * Returns the FeatureCollection from the cluster (on the next zoom level).
+   *
+   * @example
+   * const collection = await shapeSource.getClusterChildren(clusterId);
+   *
+   * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
+   * @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(
+      'getClusterChildren',
+      this._nativeRef,
+      [JSON.stringify(feature)],
+    );
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  setNativeProps(props: NativeProps) {
+    const shallowProps = Object.assign({}, props);
+
+    // Adds support for Animated
+    if (shallowProps.shape && typeof shallowProps.shape !== 'string') {
+      shallowProps.shape = JSON.stringify(shallowProps.shape);
+    }
+
+    super.setNativeProps(shallowProps);
+  }
+
+  _getShape() {
+    if (!this.props.shape) {
+      return;
+    }
+    return toJSONString(this.props.shape);
+  }
+
+  onPress(
+    event: NativeSyntheticEvent<{
+      payload: OnPressEvent;
+    }>,
+  ) {
+    const {
+      nativeEvent: {
+        payload: { features, coordinates, point },
+      },
+    } = event;
+    let newEvent: OnPressEventDeprecated = {
+      features,
+      coordinates,
+      point,
+    };
+
+    newEvent = copyPropertiesAsDeprecated(
+      event as unknown as Record<string, unknown>,
+      newEvent,
+      (key) => {
+        console.warn(
+          `event.${key} is deprecated on ShapeSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: (origNativeEvent: unknown) => ({
+          ...(origNativeEvent as OnPressEvent),
+          payload: features[0],
+        }),
+      },
+    );
+    this.props.onPress?.(newEvent);
+  }
+
+  render() {
+    const props = {
+      id: this.props.id,
+      url: this.props.url,
+      shape: this._getShape(),
+      hitbox: this.props.hitbox,
+      hasPressListener: isFunction(this.props.onPress),
+      onMapboxShapeSourcePress: this.onPress.bind(this),
+      cluster: this.props.cluster ? 1 : 0,
+      clusterRadius: this.props.clusterRadius,
+      clusterMaxZoomLevel: this.props.clusterMaxZoomLevel,
+      clusterProperties: this.props.clusterProperties,
+      maxZoomLevel: this.props.maxZoomLevel,
+      buffer: this.props.buffer,
+      tolerance: this.props.tolerance,
+      lineMetrics: this.props.lineMetrics,
+      onPress: undefined,
+      ref: (
+        nativeRef: React.Component<NativeProps> & Readonly<NativeMethods>,
+      ) => this._setNativeRef(nativeRef),
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+
+    return (
+      <RCTMGLShapeSource {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLShapeSource>
+    );
+  }
+}
+
+type NativeProps = {
+  id: string;
+  shape?: string;
+};
+
+type NativeShapeSource = HostComponent<NativeProps>;
+const RCTMGLShapeSource: NativeShapeSource =
+  requireNativeComponent(NATIVE_MODULE_NAME);

package/javascript/components/Style.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import CircleLayer from './CircleLayer';
 import RasterLayer from './RasterLayer';
-import SymbolLayer from './SymbolLayer';
+import { SymbolLayer } from './SymbolLayer';
 import LineLayer from './LineLayer';
 import FillLayer from './FillLayer';
 import FillExtrusionLayer from './FillExtrusionLayer';
@@ -12,7 +12,7 @@ import HeatmapLayer from './HeatmapLayer';
 import VectorSource from './VectorSource';
 import RasterSource from './RasterSource';
 import ImageSource from './ImageSource';
-import ShapeSource from './ShapeSource';
+import { ShapeSource } from './ShapeSource';
 
 function toCamelCase(s) {
   return s.replace(/([-_][a-z])/gi, ($1) => {

package/javascript/components/SymbolLayer.tsx

@@ -74,7 +74,7 @@ const RCTMGLSymbolLayer =
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
-class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
+export class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
     sourceID: MapboxGL.StyleSource.DefaultSourceID,
   };
@@ -109,5 +109,3 @@ class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
     );
   }
 }
-
-export default SymbolLayer;

package/javascript/components/VectorSource.js

@@ -22,7 +22,10 @@ export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
  * 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) {
+class VectorSource extends NativeBridgeComponent(
+  AbstractSource,
+  NATIVE_MODULE_NAME,
+) {
   static propTypes = {
     ...viewPropTypes,
 
@@ -98,7 +101,7 @@ class VectorSource extends NativeBridgeComponent(AbstractSource) {
   };
 
   constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
   }
 
   _setNativeRef(nativeRef) {
@@ -177,7 +180,7 @@ class VectorSource extends NativeBridgeComponent(AbstractSource) {
       onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
     };
     return (
-      <RCTMGLVectorSource ref="nativeSource" {...props}>
+      <RCTMGLVectorSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}

package/javascript/components/annotations/Annotation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Easing } from 'react-native';
 import PropTypes from 'prop-types';
 
-import SymbolLayer from '../SymbolLayer';
+import { SymbolLayer } from '../SymbolLayer';
 import Animated from '../../utils/animated/Animated';
 import { AnimatedPoint } from '../../classes';
 

package/javascript/index.js

@@ -9,7 +9,7 @@ import Annotation from './components/annotations/Annotation';
 import Callout from './components/Callout';
 import UserLocation from './components/UserLocation';
 import VectorSource from './components/VectorSource';
-import ShapeSource from './components/ShapeSource';
+import { ShapeSource } from './components/ShapeSource';
 import RasterSource from './components/RasterSource';
 import RasterDemSource from './components/RasterDemSource';
 import ImageSource from './components/ImageSource';
@@ -20,7 +20,7 @@ import HeatmapLayer from './components/HeatmapLayer';
 import LineLayer from './components/LineLayer';
 import CircleLayer from './components/CircleLayer';
 import SkyLayer from './components/SkyLayer';
-import SymbolLayer from './components/SymbolLayer';
+import { SymbolLayer } from './components/SymbolLayer';
 import RasterLayer from './components/RasterLayer';
 import BackgroundLayer from './components/BackgroundLayer';
 import { Terrain } from './components/Terrain';

package/javascript/utils/animated/Animated.js

@@ -1,12 +1,12 @@
 import { Animated as RNAnimated } from 'react-native';
 
-import ShapeSource from '../../components/ShapeSource';
+import { ShapeSource } from '../../components/ShapeSource';
 import ImageSource from '../../components/ImageSource';
 import FillLayer from '../../components/FillLayer';
 import FillExtrusionLayer from '../../components/FillExtrusionLayer';
 import LineLayer from '../../components/LineLayer';
 import CircleLayer from '../../components/CircleLayer';
-import SymbolLayer from '../../components/SymbolLayer';
+import { SymbolLayer } from '../../components/SymbolLayer';
 import RasterLayer from '../../components/RasterLayer';
 import BackgroundLayer from '../../components/BackgroundLayer';
 

package/javascript/utils/deprecation.ts

@@ -18,12 +18,15 @@ export function deprecatedClass<C extends new (...args: any[]) => object>(
  * Copy properties from origObject to newObject, which not exists in newObject,
  * calls onDeprecatedCalled callback in case a copied property is invoked.
  */
-export function copyPropertiesAsDeprecated(
-  origObject: { [key: string]: unknown },
-  newObject: { [key: string]: unknown },
+export function copyPropertiesAsDeprecated<
+  DeprecatedType extends Record<string, unknown>,
+  WithDeprecatedType extends Record<string, unknown>,
+>(
+  origObject: DeprecatedType,
+  newObject: WithDeprecatedType,
   onDeprecatedCalled: (key: string) => void,
   accessors: { [key: string]: (value: unknown) => unknown } = {},
-): { [key: string]: unknown } {
+): WithDeprecatedType {
   const result = newObject;
   for (const [key, value] of Object.entries(origObject)) {
     if (!newObject[key]) {

package/javascript/utils/filterUtils.tsx

@@ -1,4 +1,4 @@
-export function getFilter(filter: string[] | unknown) {
+export function getFilter(filter: string[] | unknown): string[] {
   if (!Array.isArray(filter) || filter.length === 0) {
     return [];
   }

package/javascript/utils/index.d.ts

@@ -1,3 +1,11 @@
+import React from 'react';
+
+export type NativeArg =
+  | string
+  | number
+  | { [k: string]: NativeArg }
+  | NativeArg[];
+
 export function isAndroid(): boolean;
 export function isBoolean(_: unknown): argument is boolean;
 export function isNumber(_: unknown): argument is number;
@@ -6,9 +14,14 @@ export function isString(_: unknown): argument is string;
 export function isFunction(argument: unknown): argument is Function;
 
 export function toJSONString(_: unknown): string;
-export function runNativeCommand<RefType>(
+export function runNativeCommand<RefType, ReturnType = NativeArg>(
   module: string,
   name: string,
   nativeRef: RefType,
-  args: string[],
-): void;
+  args: NativeArg[],
+): Promise<ReturnType>;
+
+export function cloneReactChildrenWithProps(
+  children: React.ReactElement | React.ReactElement[],
+  propsToAdd: { [key: string]: string } = {},
+): React.ReactElement | React.ReactElement[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.43",
+  "version": "10.0.0-beta.44",
   "publishConfig": {
     "access": "public"
   },