@rnmapbox/maps 10.0.0-beta.72 → 10.0.0-beta.74

package/index.d.ts

@@ -1,13 +1,7 @@
 declare module 'react-native-mapbox-gl__maps';
 
 import { Component, FC, ReactNode } from 'react';
-import {
-  ViewProps,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-  ImageSourcePropType,
-} from 'react-native';
+import { ViewProps, ViewStyle, StyleProp, TextStyle } from 'react-native';
 import ReactNative from 'react-native';
 import {
   Geometry,
@@ -70,6 +64,8 @@ import {
   ShapeSource as _ShapeSource,
   Props as _ShapeSourceProps,
 } from './javascript/components/ShapeSource';
+import _VectorSource from './javascript/components/VectorSource';
+import _Light from './javascript/components/Light';
 import type {
   MapboxGLEvent as _MapboxGLEvent,
   AnimatedPoint as _AnimatedPoint,
@@ -78,9 +74,15 @@ import type {
 import type { requestAndroidLocationPermissions as _requestAndroidLocationPermissions } from './javascript/requestAndroidLocationPermissions';
 import type {
   Location as _Location,
-  Coordinates as _Coordinates,
   LocationManager,
 } from './javascript/modules/location/locationManager';
+import type { OnPressEvent as _OnPressEvent } from './javascript/types/OnPressEvent';
+import {
+  type LogLevel,
+  type LogObject,
+  type LogCallback,
+  Logger as _Logger,
+} from './javascript/utils/Logger';
 
 // prettier-ignore
 type ExpressionName =
@@ -131,17 +133,7 @@ type Visibility = 'visible' | 'none';
 type Alignment = 'map' | 'viewport';
 type AutoAlignment = Alignment | 'auto';
 
-export type OnPressEvent = {
-  features: Array<GeoJSON.Feature>;
-  coordinates: {
-    latitude: number;
-    longitude: number;
-  };
-  point: {
-    x: number;
-    y: number;
-  };
-};
+export type OnPressEvent = _OnPressEvent;
 
 declare namespace MapboxGL {
   function removeCustomHeader(headerName: string): void;
@@ -157,6 +149,8 @@ declare namespace MapboxGL {
   const getAnnotationsLayerID = _getAnnotationsLayerID;
   type getAnnotationsLayerID = _getAnnotationsLayerID;
 
+  const Logger = _Logger;
+  type Logger = _Logger;
   const Camera = _Camera;
   type Camera = _Camera;
   type CameraStop = _CameraStop;
@@ -180,7 +174,9 @@ declare namespace MapboxGL {
   type UserTrackingMode = _UserTrackingMode;
   type UserTrackingModeChangeCallback = _UserTrackingModeChangeCallback;
   type Location = _Location;
-  type Coordinates = _Coordinates;
+
+  /** @deprecated This will be removed in a future release. Use `Location['coords']` instead. */
+  type Coordinates = Location['coords'];
 
   const offlineManager: OfflineManager;
   const snapshotManager: SnapshotManager;
@@ -333,7 +329,7 @@ declare namespace MapboxGL {
 
   class UserLocation extends Component<UserLocationProps> {}
 
-  class Light extends Component<LightProps> {}
+  const Light = _Light;
 
   class Callout extends Component<CalloutProps> {}
   type Style = FC<StyleProps>;
@@ -341,7 +337,8 @@ declare namespace MapboxGL {
   /**
    * Sources
    */
-  class VectorSource extends Component<VectorSourceProps> {}
+  type VectorSource = typeof _VectorSource;
+  const VectorSource = _VectorSource;
   class RasterSource extends Component<RasterSourceProps> {}
   class RasterDemSource extends Component<RasterSourceProps> {}
 
@@ -642,14 +639,6 @@ export interface TileSourceProps extends ViewProps {
   maxZoomLevel?: number;
 }
 
-export interface VectorSourceProps extends TileSourceProps {
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
 export interface RasterSourceProps extends TileSourceProps {
   tileSize?: number;
 }
@@ -666,35 +655,6 @@ export interface LayerBaseProps<T = object> extends Omit<ViewProps, 'style'> {
   maxZoomLevel?: number;
 }
 
-export interface BackgroundLayerProps extends LayerBaseProps {
-  style?: StyleProp<BackgroundLayerStyle>;
-}
-
-export interface CircleLayerProps extends LayerBaseProps {
-  style?: StyleProp<CircleLayerStyle>;
-}
-
-export interface FillExtrusionLayerProps extends Omit<LayerBaseProps, 'id'> {
-  id: string;
-  style?: StyleProp<FillExtrusionLayerStyle>;
-}
-
-export interface FillLayerProps extends LayerBaseProps {
-  style?: StyleProp<FillLayerStyle>;
-}
-
-export interface LineLayerProps extends LayerBaseProps {
-  style?: StyleProp<LineLayerStyle>;
-}
-
-export interface RasterLayerProps extends LayerBaseProps {
-  style?: StyleProp<RasterLayerStyle>;
-}
-
-export interface HeatmapLayerProps extends LayerBaseProps {
-  style?: StyleProp<HeatmapLayerStyle>;
-}
-
 export interface ImageSourceProps extends ViewProps {
   id: string;
   url?: number | string;
@@ -731,21 +691,7 @@ export interface SkyLayerProps extends LayerBaseProps {
   style?: StyleProp<SkyLayerStyle>;
 }
 
-// Logger class
-type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
-
-interface LogObject {
-  level: LogLevel;
-  message: string;
-  tag: string;
-}
-
-type LogCallback = (object: LogObject) => void;
-
-export class Logger {
-  public static setLogCallback: (cb: LogCallback) => boolean;
-  public static setLogLevel: (level: LogLevel) => void;
-}
+export import Logger = MapboxGL.Logger;
 
 export import MapView = MapboxGL.MapView;
 
@@ -789,6 +735,8 @@ export import AnimatedMapPoint = MapboxGL.AnimatedPoint;
 export import AnimatedShape = MapboxGL.AnimatedShape;
 export import Images = MapboxGL.Images;
 export import Image = MapboxGL.Image;
+export import Light = MapboxGL.Light;
+export import VectorSource = MapboxGL.VectorSource;
 
 export const { offlineManager } = MapboxGL;
 

package/javascript/components/AbstractLayer.tsx

@@ -5,8 +5,9 @@ import { NativeMethods, processColor } from 'react-native';
 import { getFilter } from '../utils/filterUtils';
 import { AllLayerStyleProps, FilterExpression } from '../utils/MapboxStyles';
 import { transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
-type PropsBase = {
+type PropsBase = BaseProps & {
   id: string;
   sourceID?: string;
   minZoomLevel?: number;

package/javascript/components/AbstractSource.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { NativeMethods } from 'react-native';
 
+import type { BaseProps } from '../types/BaseProps';
+
 class AbstractSource<
   PropsType,
   NativePropsType extends object,
-> extends React.PureComponent<PropsType> {
+> extends React.PureComponent<PropsType & BaseProps> {
   _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
 
   setNativeProps(props: NativePropsType) {

package/javascript/components/Atmosphere.tsx

@@ -3,10 +3,11 @@ import { requireNativeComponent } from 'react-native';
 
 import type { AtmosphereLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLAtmosphere';
 
-type Props = {
+type Props = BaseProps & {
   style: AtmosphereLayerStyleProps;
 };
 

package/javascript/components/Camera.tsx

@@ -11,6 +11,7 @@ import { NativeModules, requireNativeComponent } from 'react-native';
 
 import { MapboxGLEvent } from '../types';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
+import { type NativeRefType } from '../utils/nativeRef';
 
 const NativeModule = NativeModules.MGLModule;
 
@@ -240,8 +241,9 @@ export const Camera = memo(
         onUserTrackingModeChange,
       } = props;
 
-      // @ts-expect-error This avoids a type/value mismatch.
-      const nativeCamera = useRef<RCTMGLCamera>(null);
+      const nativeCamera = useRef<typeof RCTMGLCamera>(
+        null,
+      ) as NativeRefType<NativeCameraProps>;
 
       const buildNativeStop = useCallback(
         (
@@ -352,14 +354,14 @@ export const Camera = memo(
             if (_nativeStop) {
               _nativeStops = [..._nativeStops, _nativeStop];
             }
-            nativeCamera.current.setNativeProps({
+            nativeCamera.current?.setNativeProps({
               stop: { stops: _nativeStops },
             });
           }
         } else if (config.type === 'CameraStop') {
           const _nativeStop = buildNativeStop(config);
           if (_nativeStop) {
-            nativeCamera.current.setNativeProps({ stop: _nativeStop });
+            nativeCamera.current?.setNativeProps({ stop: _nativeStop });
           }
         }
       };

package/javascript/components/Image.tsx

@@ -2,19 +2,27 @@ import React, { memo, forwardRef, ReactElement } from 'react';
 import { requireNativeComponent } from 'react-native';
 
 interface Props {
-  /** Image name */
+  /** ID of the image */
   name: string;
 
   /** Make image an sdf optional - see [SDF icons](https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-mapbox-maps/) */
   sdf?: boolean;
 
-  /** stretch along x axis - optional */
+  /** An array of two-element arrays, consisting of two numbers that represent, the from position and the to position of areas that can be stretched horizontally. */
   stretchX?: [number, number][];
 
-  /** stretch along y axis - optional */
+  /** An array of two-element arrays, consisting of two numbers that represent, the from position and the to position of areas that can be stretched vertically. */
   stretchY?: [number, number][];
 
-  /** Single react native view generating the image */
+  /** An array of four numbers, with the first two specifying the left, top
+   * corner, and the last two specifying the right, bottom corner. If present, and if the
+   * icon uses icon-text-fit, the symbol's text will be fit inside the content box. */
+  content?: [number, number, number, number];
+
+  /** Scale factor for the image. */
+  scale?: number;
+
+  /** Single react native view rendering the image */
   children: ReactElement;
 }
 

package/javascript/components/Images.tsx

@@ -69,7 +69,7 @@ interface Props {
 /**
  * Images defines the images used in Symbol etc. layers.
  */
-class Images extends React.Component<Props> {
+class Images extends React.PureComponent<Props> {
   static NATIVE_ASSETS_KEY = 'assets';
 
   _getImages() {

package/javascript/components/Light.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { requireNativeComponent } from 'react-native';
+
+import { LightLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+import { type BaseProps } from '../types/BaseProps';
+import { transformStyle } from '../utils/StyleValue';
+import nativeRef from '../utils/nativeRef';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLLight';
+
+type Props = BaseProps & {
+  /**
+   * Customizable style attributes
+   */
+  style: LightLayerStyleProps;
+};
+
+type NativeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+interface LightMethods {
+  setNativeProps(props: { [key: string]: unknown }): void;
+}
+
+/**
+ * Light represents the light source for extruded geometries
+ */
+function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
+  const { style, ...propWithoutStyle } = props;
+
+  const nativeLightRef = nativeRef(useRef<typeof RCTMGLLight>(null));
+
+  useImperativeHandle(ref, () => ({
+    setNativeProps(_props: { [key: string]: unknown }) {
+      let propsToPass = _props;
+      if (_props.style) {
+        propsToPass = {
+          ..._props,
+          reactStyle: transformStyle(_props.style),
+        };
+      }
+      nativeLightRef.current?.setNativeProps(propsToPass);
+    },
+  }));
+
+  return (
+    <RCTMGLLight
+      ref={nativeLightRef}
+      testID="rctmglLight"
+      {...propWithoutStyle}
+      reactStyle={transformStyle(style)}
+    />
+  );
+}
+
+const RCTMGLLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default memo(forwardRef(Light));

package/javascript/components/PointAnnotation.tsx

@@ -9,6 +9,7 @@ import { type Feature } from 'geojson';
 
 import { toJSONString, isFunction } from '../utils';
 import { makePoint } from '../utils/geoUtils';
+import { type BaseProps } from '../types/BaseProps';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
 
@@ -26,7 +27,7 @@ type FeaturePayload = {
   feature: Feature;
 };
 
-type Props = {
+type Props = BaseProps & {
   /**
    * A string that uniquely identifies the annotation
    */

package/javascript/components/ShapeSource.tsx

@@ -14,6 +14,7 @@ import {
   isAndroid,
 } from '../utils';
 import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+import { OnPressEvent } from '../types/OnPressEvent';
 
 import AbstractSource from './AbstractSource';
 import NativeBridgeComponent from './NativeBridgeComponent';
@@ -22,17 +23,6 @@ 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;
 };

package/javascript/components/Terrain.tsx

@@ -3,10 +3,11 @@ import { HostComponent, requireNativeComponent } from 'react-native';
 
 import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
 
-type Props = {
+type Props = BaseProps & {
   /**
    * Name of a source of raster_dem type to be used for terrain elevation.
    */

package/javascript/components/VectorSource.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from 'react-native';
+
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from '../utils';
+import { getFilter } from '../utils/filterUtils';
+import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+import { OnPressEvent } from '../types/OnPressEvent';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+
+interface Props {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+
+  /**
+   * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
+   */
+  url?: string;
+
+  /**
+   * An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
+   * Example: https://example.com/vector-tiles/{z}/{x}/{y}.pbf
+   */
+  tileUrlTemplates?: string[];
+
+  /**
+   * An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * maxZoomLevel, if specified. The default value for this option is 0.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * An unsigned integer that specifies the maximum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * minZoomLevel, if specified. The default value for this option is 22.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Influences the y direction of the tile coordinates. (tms inverts y axis)
+   */
+  tms?: boolean;
+
+  /**
+   * An HTML or literal text string defining the buttons to be displayed in an action sheet when the
+   * source is part of a map view’s style and the map view’s attribution button is pressed.
+   */
+  attribution?: string;
+
+  /**
+   * 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
+   */
+  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[];
+}
+
+//interface NativeProps extends Omit<Props, 'children'> {}
+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,
+) {
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: Props) {
+    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);
+    }
+
+    return res.data;
+  }
+
+  onPress(
+    event: NativeSyntheticEvent<{
+      payload: OnPressEvent;
+    }>,
+  ) {
+    const {
+      nativeEvent: {
+        payload: { features, coordinates, point },
+      },
+    } = event;
+    let newEvent = {
+      features,
+      coordinates,
+      point,
+    };
+    newEvent = copyPropertiesAsDeprecated(
+      event,
+      newEvent,
+      (key) => {
+        console.warn(
+          `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: (origNativeEvent: unknown) => ({
+          ...(origNativeEvent as OnPressEvent),
+          payload: features[0],
+        }),
+      },
+    );
+    const { onPress } = this.props;
+    if (onPress) {
+      onPress(newEvent);
+    }
+  }
+
+  render() {
+    const props = {
+      id: this.props.id,
+      url: this.props.url,
+      tileUrlTemplates: this.props.tileUrlTemplates,
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      tms: this.props.tms,
+      attribution: this.props.attribution,
+      hitbox: this.props.hitbox,
+      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}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLVectorSource>
+    );
+  }
+}
+
+const RCTMGLVectorSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default VectorSource;

package/javascript/components/annotations/Annotation.js

@@ -51,11 +51,16 @@ class Annotation extends React.Component {
       prevProps.coordinates[0] !== this.props.coordinates[0] ||
       prevProps.coordinates[1] !== this.props.coordinates[1];
 
-    if (!hasCoordChanged) {
-      return;
-    }
+    if (
+      prevProps.animated !== this.props.animated ||
+      (hasCoordChanged && (!this.state.shape || !this.props.animated))
+    ) {
+      const shape = this._getShapeFromProps(this.props);
 
-    if (this.props.animated && this.state.shape) {
+      this.setState({
+        shape: this.props.animated ? new AnimatedPoint(shape) : shape,
+      });
+    } else if (hasCoordChanged && this.props.animated && this.state.shape) {
       // flush current animations
       this.state.shape.stopAnimation();
 
@@ -66,12 +71,6 @@ class Annotation extends React.Component {
           duration: this.props.animationDuration,
         })
         .start();
-    } else if (!this.state.shape || !this.props.animated) {
-      const shape = this._getShapeFromProps(this.props);
-
-      this.setState({
-        shape: this.props.animated ? new AnimatedPoint(shape) : shape,
-      });
     }
   }
 

package/javascript/modules/location/locationManager.ts

@@ -25,7 +25,7 @@ export interface Location {
 /**
  * Coorinates sent by locationManager
  */
-export interface Coordinates {
+interface Coordinates {
   /**
    * The heading (measured in degrees) relative to true north.
    * Heading is used to describe the direction the device is pointing to (the value of the compass).
@@ -69,7 +69,7 @@ export interface Coordinates {
 /**
  * LocationManager is a singleton, see `locationManager`
  */
-class LocationManager {
+export class LocationManager {
   _listeners: ((location: Location) => void)[];
   _lastKnownLocation: Location | null;
   _isListening: boolean;

package/javascript/types/BaseProps.ts

@@ -0,0 +1,3 @@
+export type BaseProps = {
+  testID?: string | undefined;
+};