@rnmapbox/maps 10.1.0 → 10.1.2

package/src/components/FillLayer.tsx

@@ -7,9 +7,12 @@ import RNMBXFillLayerNativeComponent from '../specs/RNMBXFillLayerNativeComponen
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export type Props = {
+// @{codepart-replace-start(LayerPropsCommon.codepart-tsx)}
+type Slot = 'bottom' | 'middle' | 'top';
+
+type LayerPropsCommon = {
   /**
    * A string that uniquely identifies the source in the style to which it is added.
    */
@@ -62,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
    */
@@ -77,7 +90,7 @@ type NativeTypeProps = Omit<Props, 'style'> & {
  */
 class FillLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
 
   render() {

package/src/components/HeatmapLayer.tsx

@@ -10,11 +10,14 @@ import RNMBXHeatmapLayerNativeComponent from '../specs/RNMBXHeatmapLayerNativeCo
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export type Props = {
+// @{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;
 
@@ -31,8 +34,7 @@ export type Props = {
   sourceID?: string;
 
   /**
-   * Identifier of the layer within the source identified by the sourceID property
-   * from which the receiver obtains the data to style.
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
    */
   sourceLayerID?: string;
 
@@ -66,6 +68,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
    */
@@ -81,7 +93,7 @@ type NativeTypeProps = Omit<Props, 'style'> & {
  */
 class HeatmapLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
 
   render() {

package/src/components/Images.tsx

@@ -82,7 +82,7 @@ interface Props {
   /**
    * Specifies the external images in key-value pairs required for the shape source.
    * Keys are names - see iconImage expressions, values can be either urls-s objects
-   * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
+   * with format `{uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
    */
   images?: { [key: string]: ImageEntry };
 

package/src/components/LineLayer.tsx

@@ -7,9 +7,12 @@ import RNMBXLineLayerNativeComponent from '../specs/RNMBXLineLayerNativeComponen
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export type Props = {
+// @{codepart-replace-start(LayerPropsCommon.codepart-tsx)}
+type Slot = 'bottom' | 'middle' | 'top';
+
+type LayerPropsCommon = {
   /**
    * A string that uniquely identifies the source in the style to which it is added.
    */
@@ -62,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
    */
@@ -77,7 +90,7 @@ type NativeTypeProps = Omit<Props, 'style'> & {
  */
 class LineLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
 
   render() {

package/src/components/LocationPuck.tsx

@@ -0,0 +1,143 @@
+import React, { memo } from 'react';
+import { processColor, type ColorValue } from 'react-native';
+
+import RNMBXNativeUserLocation, {
+  type NativeProps,
+} from '../specs/RNMBXNativeUserLocationNativeComponent';
+import type { Expression } from '../utils/MapboxStyles';
+
+type Value<T> = T | Expression;
+
+export type Props = {
+  /**
+   * Android render mode.
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @deprecated use `puckBearing` for source and `bearingImage` for image
+   * @platform android
+   */
+  androidRenderMode?: 'normal' | 'compass' | 'gps';
+
+  /**
+   * The bearing of the puck.
+   *
+   *  - heading: Orients the puck to match the direction in which the device is facing.
+   *  - course: Orients the puck to match the direction in which the device is moving.
+   */
+  puckBearing?: 'heading' | 'course';
+
+  /**
+   * Whether the puck rotates to track the bearing source.
+   */
+  puckBearingEnabled?: boolean;
+
+  /**
+   * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
+   *
+   * @platform ios
+   * @deprecated use `puckBearingEnabled={true} puckBrearing="heading"` instead
+   */
+  iosShowsUserHeadingIndicator?: boolean;
+
+  /**
+   * The name of image to use as the top layer for the location indicator. Images component should define this image.
+   */
+  topImage?: string;
+
+  /**
+   * The name of image to use as the middle layer for the location indicator. Images component should define this image.
+   */
+  bearingImage?: string;
+
+  /**
+   * The name of image to use as the background for the location indicator. Images component should define this image.
+   */
+  shadowImage?: string;
+
+  /**
+   * The size of the images, as a scale factor applied to the size of the specified image. Supports expressions based on zoom.
+   *
+   * @example
+   * ["interpolate",["linear"], ["zoom"], 10.0, 1.0, 20.0, 4.0]]
+   * @example
+   * 2.0
+   */
+  scale?: Value<number>;
+
+  /**
+   * The configration parameters for sonar-like pulsing circle animation shown around the 2D puck.
+   */
+  pulsing?:
+    | {
+        /**
+         * Flag determining whether the pulsing circle animation.
+         */
+        isEnabled?: boolean;
+
+        /**
+         * The color of the pulsing circle.
+         */
+        color?: number | ColorValue;
+
+        /**
+         * Circle radius configuration for the pulsing circle animation.
+         *  - accuracy:  Pulsing circle animates with the `horizontalAccuracy` form the latest puck location.
+         *  - number: Pulsing circle should animate with the constant radius.
+         */
+        radius?: 'accuracy' | number;
+      }
+    | 'default';
+
+  /**
+   * Whether location icon is visible, defaults to true
+   */
+  visible?: boolean;
+};
+
+const defaultProps = {
+  visible: true,
+} as const;
+
+/**
+ * Renders a puck on the map that shows the device's current location.
+ */
+const LocationPuck = memo((props: Props) => {
+  const { iosShowsUserHeadingIndicator, pulsing, ...rest } = props;
+  const nativePulsing = pulsing ? _pulsingToNative(pulsing) : undefined;
+  let baseProps: NativeProps = { ...defaultProps, pulsing: nativePulsing };
+  if (iosShowsUserHeadingIndicator) {
+    console.warn(
+      'LocationPuck: iosShowsUserHeadingIndicator is deprecated, use puckBearingEnabled={true} puckBearing="heading" instead',
+    );
+
+    baseProps = {
+      ...baseProps,
+      puckBearingEnabled: true,
+      puckBearing: 'heading',
+    };
+  }
+  const actualProps = { ...baseProps, ...rest };
+  return <RNMBXNativeUserLocation {...actualProps} />;
+});
+
+function _pulsingToNative(
+  pulsing: Props['pulsing'],
+): NativeProps['pulsing'] | undefined {
+  if (pulsing === 'default') {
+    return { kind: 'default' };
+  }
+  if (pulsing == null) {
+    return undefined;
+  }
+  const { color, isEnabled, radius } = pulsing;
+  return {
+    color: processColor(color),
+    isEnabled,
+    radius,
+  };
+}
+
+export default LocationPuck;

package/src/components/MapView.tsx

@@ -297,7 +297,7 @@ type Props = ViewProps & {
 
   /**
    * [`mapbox` (v10) implementation only]
-   * Set map's label locale, e.g. { "locale": "es" } will localize labels to Spanish, { "locale": "current" } will localize labels to system locale.
+   * Set map's label locale, e.g. `{ "locale": "es" }` will localize labels to Spanish, `{ "locale": "current" }` will localize labels to system locale.
    */
   localizeLabels?: LocalizeLabels;
 
@@ -427,6 +427,12 @@ type Props = ViewProps & {
    * The emitted frequency of regiondidchange events
    */
   regionDidChangeDebounceTime?: number;
+
+  /**
+   * Set to true to deselect any selected annotation when the map is tapped. If set to true you will not receive
+   * the onPress event for the taps that deselect the annotation. Default is false.
+   */
+  deselectAnnotationOnTap?: boolean;
 };
 
 type CallbablePropKeys =
@@ -906,14 +912,6 @@ class MapView extends NativeBridgeComponent(
     ]);
   }
 
-  /**
-   * Show the attribution and telemetry action sheet.
-   * If you implement a custom attribution button, you should add this action to the button.
-   */
-  showAttribution() {
-    return this._runNative<void>('showAttribution');
-  }
-
   _decodePayload<T>(payload: T | string): T {
     if (typeof payload === 'string') {
       return JSON.parse(payload);

package/src/components/MarkerView.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { Platform, NativeModules, type ViewProps, View } from 'react-native';
+import { Platform, NativeModules, type ViewProps } from 'react-native';
 
 import { toJSONString } from '../utils';
 import { makePoint } from '../utils/geoUtils';
 import { type Position } from '../types/Position';
 import NativeMarkerViewComponent from '../specs/RNMBXMarkerViewNativeComponent';
+import RNMBXMakerViewContentCoponent from '../specs/RNMBXMarkerViewContentNativeComponent';
 
 import PointAnnotation from './PointAnnotation';
 
 const Mapbox = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RNMBXMarkerView';
-
 type Props = ViewProps & {
   /**
    * The center point (specified as a map coordinate) of the marker.
@@ -35,6 +34,12 @@ type Props = ViewProps & {
    */
   allowOverlap: boolean;
 
+  /**
+   * Whether or not nearby markers on the map should be hidden if close to a
+   * UserLocation puck. Defaults to false.
+   */
+  allowOverlapWithPuck: boolean;
+
   isSelected: boolean;
 
   /**
@@ -60,6 +65,7 @@ class MarkerView extends React.PureComponent<Props> {
   static defaultProps: Partial<Props> = {
     anchor: { x: 0.5, y: 0.5 },
     allowOverlap: false,
+    allowOverlapWithPuck: false,
     isSelected: false,
   };
 
@@ -113,12 +119,13 @@ class MarkerView extends React.PureComponent<Props> {
         coordinate={this._getCoordinate(this.props.coordinate)}
         anchor={anchor}
         allowOverlap={this.props.allowOverlap}
+        allowOverlapWithPuck={this.props.allowOverlapWithPuck}
         isSelected={this.props.isSelected}
         onTouchEnd={(e) => {
           e.stopPropagation();
         }}
       >
-        <View
+        <RNMBXMakerViewContentCoponent
           style={{ flex: 0, alignSelf: 'flex-start' }}
           onStartShouldSetResponder={(_event) => {
             return true;
@@ -128,7 +135,7 @@ class MarkerView extends React.PureComponent<Props> {
           }}
         >
           {this.props.children}
-        </View>
+        </RNMBXMakerViewContentCoponent>
       </RNMBXMarkerView>
     );
   }

package/src/components/ModelLayer.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { NativeModules } from 'react-native';
+
+import { FilterExpression, ModelLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+import RNMBXModelLayerNativeComponent from '../specs/RNMBXModelLayerNativeComponent';
+
+import AbstractLayer from './AbstractLayer';
+
+const Mapbox = NativeModules.RNMBXModule;
+
+// @{codepart-replace-start(LayerPropsCommon.codepart-tsx)}
+type Slot = 'bottom' | 'middle' | 'top';
+
+type LayerPropsCommon = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  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
+   */
+  style?: ModelLayerStyleProps;
+};
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * ModelLayer is a style layer that renders one or more stroked polylines on the map.
+ */
+class ModelLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return (
+      <RNMBXModelLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
+  }
+}
+
+export default ModelLayer;

package/src/components/Models.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import NativeModels from '../specs/RNMBXModelsNativeComponent';
+
+type Props = {
+  /**
+   * pair odf model name to gltf and gbl file path/url, or asset id.
+   */
+  models: { [key: string]: string | number };
+};
+
+type Asset = {
+  __packager_asset?: boolean;
+  uri?: string;
+  url?: string;
+};
+
+function _resolveAssets(models: Props['models']): {
+  [key: string]: Asset;
+} {
+  const resolvedModels: { [key: string]: Asset } = {};
+  Object.keys(models).forEach((key) => {
+    const model = models[key];
+    if (typeof model === 'string') {
+      resolvedModels[key] = { url: model };
+    } else {
+      const asset = Image.resolveAssetSource(model);
+      if (!asset) {
+        throw new Error(`Could not resolve model asset: ${model}`);
+      }
+      resolvedModels[key] = asset;
+    }
+  });
+  return resolvedModels;
+}
+
+/**
+ * Name of 3D model assets to be used in the map
+ */
+export default function Models(props: Props) {
+  const { models, ...restOfProps } = props;
+  return <NativeModels {...restOfProps} models={_resolveAssets(models)} />;
+}

package/src/components/RasterLayer.tsx

@@ -7,11 +7,14 @@ import RNMBXRasterLayerNativeComponent from '../specs/RNMBXRasterLayerNativeComp
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export type Props = {
+// @{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;
 
@@ -62,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
    */
@@ -74,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() {

package/src/components/SkyLayer.tsx

@@ -7,7 +7,7 @@ import RNMBXSkyLayerNativeComponent from '../specs/RNMBXSkyLayerNativeComponent'
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -60,7 +60,7 @@ type NativeTypeProps = Omit<Props, 'style'> & {
  */
 class SkyLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
 
   render() {

package/src/components/SymbolLayer.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 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';
 
@@ -9,11 +12,14 @@ import AbstractLayer from './AbstractLayer';
 
 export const NATIVE_MODULE_NAME = 'RNMBXSymbolLayer';
 
-const MapboxGL = NativeModules.RNMBXModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export type Props = {
+// @{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;
 
@@ -52,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.
@@ -64,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.
@@ -83,7 +102,7 @@ type NativeTypeProps = Omit<Props, 'style'> & {
  */
 export class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
   static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+    sourceID: Mapbox.StyleSource.DefaultSourceID,
   };
   deprecationLogged: { snapshot: boolean } = { snapshot: false };
 

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;