@rnmapbox/maps 10.3.0-rc.0 → 10.3.1

package/src/components/MarkerView.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
-import { NativeModules, Platform, type ViewProps } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  PixelRatio,
+  StyleSheet,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
 
 import RNMBXMakerViewContentComponent from '../specs/RNMBXMarkerViewContentNativeComponent';
 import NativeMarkerViewComponent from '../specs/RNMBXMarkerViewNativeComponent';
 import { type Position } from '../types/Position';
-import { toJSONString } from '../utils';
-import { makePoint } from '../utils/geoUtils';
 
-import PointAnnotation from './PointAnnotation';
+// Device pixel ratio is constant for the lifetime of the app.
+const PIXEL_RATIO = PixelRatio.get();
 
-const Mapbox = NativeModules.RNMBXModule;
+const DEFAULT_ANCHOR = { x: 0.5, y: 0.5 };
 
 type Props = ViewProps & {
   /**
@@ -21,29 +25,28 @@ type Props = ViewProps & {
    * Any coordinate between (0, 0) and (1, 1), where (0, 0) is the top-left corner of
    * the view, and (1, 1) is the bottom-right corner. Defaults to the center at (0.5, 0.5).
    */
-  anchor: {
+  anchor?: {
     x: number;
     y: number;
   };
 
   /**
-   * @v10
-   *
    * Whether or not nearby markers on the map should all be displayed. If false, adjacent
    * markers will 'collapse' and only one will be shown. Defaults to false.
    */
-  allowOverlap: boolean;
+  allowOverlap?: boolean;
 
   /**
    * Whether or not nearby markers on the map should be hidden if close to a
    * UserLocation puck. Defaults to false.
    */
-  allowOverlapWithPuck: boolean;
+  allowOverlapWithPuck?: boolean;
 
-  isSelected: boolean;
+  isSelected?: boolean;
 
   /**
-   * One or more valid React Native views.
+   * One or more valid React Native views. You can use Pressable, TouchableOpacity,
+   * etc. directly as children — onPress and touch feedback work correctly.
    */
   children: React.ReactElement;
 };
@@ -58,93 +61,113 @@ type Props = ViewProps & {
  * This is implemented with view annotations on [Android](https://docs.mapbox.com/android/maps/guides/annotations/view-annotations/)
  * and [iOS](https://docs.mapbox.com/ios/maps/guides/annotations/view-annotations).
  *
- * This component has no dedicated `onPress` method. Instead, you should handle gestures
- * with the React views passed in as `children`.
+ * This component has no dedicated `onPress` method. Instead, handle gestures
+ * with the React views passed in as `children` — Pressable, TouchableOpacity,
+ * etc. all work including their visual feedback (opacity, scale, etc.).
  */
-class MarkerView extends React.PureComponent<Props> {
-  static defaultProps: Partial<Props> = {
-    anchor: { x: 0.5, y: 0.5 },
-    allowOverlap: false,
-    allowOverlapWithPuck: false,
-    isSelected: false,
-  };
-
-  static lastId = 0;
-  __idForPointAnnotation?: string;
-
-  _idForPointAnnotation(): string {
-    if (this.__idForPointAnnotation === undefined) {
-      MarkerView.lastId = MarkerView.lastId + 1;
-      this.__idForPointAnnotation = `MV-${MarkerView.lastId}`;
-    }
-    return this.__idForPointAnnotation;
-  }
-
-  _getCoordinate(coordinate: Position): string | undefined {
-    if (!coordinate) {
-      return undefined;
-    }
-    return toJSONString(makePoint(coordinate));
+const MarkerView = ({
+  anchor = DEFAULT_ANCHOR,
+  allowOverlap = false,
+  allowOverlapWithPuck = false,
+  isSelected = false,
+  coordinate,
+  style,
+  children,
+}: Props) => {
+  // Android new-arch (Fabric) fix: UIManager.measure reads from the Fabric shadow
+  // tree, which doesn't include Mapbox's native setTranslationX/Y positioning.
+  // Strategy: intercept setTranslationX/Y on the native side (see
+  // RNMBXMarkerViewContent.kt), relay the values as an onAnnotationPosition event,
+  // then apply them as a React `transform` on RNMBXMarkerView so the shadow tree
+  // reflects the actual on-screen position. This makes
+  // Pressability._responderRegion correct and onPress / touch feedback work.
+  //
+  // Key details:
+  //  • position:'absolute' on RNMBXMarkerView → all markers have Yoga pos (0,0)
+  //    in MapView, so the only shadow-tree offset is the transform itself.
+  //  • Transform goes on RNMBXMarkerView (not RNMBXMarkerViewContent) so Fabric
+  //    never fights Mapbox's native positioning.
+  //  • PIXEL_RATIO: Android translationX/Y is in device pixels; React transform
+  //    expects logical pixels (points).
+  const [annotationTranslate, setAnnotationTranslate] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Mirror of Kotlin-side dedup: skip setState when position hasn't changed so
+  // we don't trigger a re-render for no-op native position re-applications.
+  const lastTranslateRef = useRef<{ x: number; y: number } | null>(null);
+
+  const handleTouchEnd = useCallback((e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+  }, []);
+
+  const handleAnnotationPosition = useCallback(
+    (e: NativeSyntheticEvent<{ x: number; y: number }>) => {
+      const x = e.nativeEvent.x / PIXEL_RATIO;
+      const y = e.nativeEvent.y / PIXEL_RATIO;
+      const last = lastTranslateRef.current;
+      if (last !== null && last.x === x && last.y === y) return;
+      lastTranslateRef.current = { x, y };
+      setAnnotationTranslate({ x, y });
+    },
+    [],
+  );
+
+  if (anchor.x < 0 || anchor.y < 0 || anchor.x > 1 || anchor.y > 1) {
+    console.warn(
+      `[MarkerView] Anchor with value (${anchor.x}, ${anchor.y}) should not be outside the range [(0, 0), (1, 1)]`,
+    );
   }
 
-  render() {
-    if (
-      this.props.anchor.x < 0 ||
-      this.props.anchor.y < 0 ||
-      this.props.anchor.x > 1 ||
-      this.props.anchor.y > 1
-    ) {
-      console.warn(
-        `[MarkerView] Anchor with value (${this.props.anchor.x}, ${this.props.anchor.y}) should not be outside the range [(0, 0), (1, 1)]`,
-      );
-    }
-
-    if (Platform.OS === 'ios' && !Mapbox.MapboxV10) {
-      return (
-        <PointAnnotation id={this._idForPointAnnotation()} {...this.props} />
-      );
-    }
-
-    const { anchor = { x: 0.5, y: 0.5 } } = this.props;
-
-    return (
-      <RNMBXMarkerView
-        style={[
-          {
-            flex: 0,
-            alignSelf: 'flex-start',
-          },
-          this.props.style,
-        ]}
-        coordinate={[
-          Number(this.props.coordinate[0]),
-          Number(this.props.coordinate[1]),
-        ]}
-        anchor={anchor}
-        allowOverlap={this.props.allowOverlap}
-        allowOverlapWithPuck={this.props.allowOverlapWithPuck}
-        isSelected={this.props.isSelected}
-        onTouchEnd={(e) => {
-          e.stopPropagation();
-        }}
+  const nativeCoordinate = useMemo(
+    () => [Number(coordinate[0]), Number(coordinate[1])] as [number, number],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [coordinate[0], coordinate[1]],
+  );
+
+  const nativeStyle = useMemo(
+    () => [
+      styles.absolutePosition,
+      style,
+      annotationTranslate != null
+        ? {
+            transform: [
+              { translateX: annotationTranslate.x },
+              { translateY: annotationTranslate.y },
+            ],
+          }
+        : undefined,
+    ],
+    [style, annotationTranslate],
+  );
+
+  return (
+    <RNMBXMarkerView
+      style={nativeStyle}
+      coordinate={nativeCoordinate}
+      anchor={anchor}
+      allowOverlap={allowOverlap}
+      allowOverlapWithPuck={allowOverlapWithPuck}
+      isSelected={isSelected}
+      onTouchEnd={handleTouchEnd}
+    >
+      <RNMBXMakerViewContentComponent
+        collapsable={false}
+        style={styles.contentContainer}
+        onAnnotationPosition={handleAnnotationPosition}
       >
-        <RNMBXMakerViewContentComponent
-          collapsable={false}
-          style={{ flex: 0, alignSelf: 'flex-start' }}
-          onStartShouldSetResponder={(_event) => {
-            return true;
-          }}
-          onTouchEnd={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          {this.props.children}
-        </RNMBXMakerViewContentComponent>
-      </RNMBXMarkerView>
-    );
-  }
-}
+        {children}
+      </RNMBXMakerViewContentComponent>
+    </RNMBXMarkerView>
+  );
+};
 
 const RNMBXMarkerView = NativeMarkerViewComponent;
 
+const styles = StyleSheet.create({
+  absolutePosition: { position: 'absolute' },
+  contentContainer: { flex: 0, alignSelf: 'flex-start' },
+});
+
 export default MarkerView;

package/src/components/Rain.tsx

@@ -0,0 +1,31 @@
+import { memo, useMemo } from 'react';
+
+import type { RainLayerStyleProps } from '../utils/MapboxStyles';
+import { transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
+import RNMBXRainNativeComponent from '../specs/RNMBXRainNativeComponent';
+
+type Props = BaseProps & {
+  /** Rain particle effect style properties.
+   *
+   * @note The default `color` and `vignetteColor` values use `measure-light("brightness")`
+   * expressions that are only available in Mapbox Standard-based styles
+   * (`mapbox://styles/mapbox/standard`, `mapbox://styles/mapbox/standard-satellite`).
+   * When using legacy or custom styles, set `color` and `vignetteColor` explicitly to
+   * avoid "Brightness is unavailable in the current evaluation context" warnings and
+   * invisible rain. For example: `color="#a8adbc" vignetteColor="#464646"`.
+   */
+  style?: RainLayerStyleProps;
+};
+
+export const Rain = memo((props: Props) => {
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      reactStyle: transformStyle(props.style),
+      style: undefined,
+    };
+  }, [props]);
+
+  return <RNMBXRainNativeComponent {...baseProps} />;
+});

package/src/components/Snow.tsx

@@ -0,0 +1,22 @@
+import { memo, useMemo } from 'react';
+
+import type { SnowLayerStyleProps } from '../utils/MapboxStyles';
+import { transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
+import RNMBXSnowNativeComponent from '../specs/RNMBXSnowNativeComponent';
+
+type Props = BaseProps & {
+  style?: SnowLayerStyleProps;
+};
+
+export const Snow = memo((props: Props) => {
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      reactStyle: transformStyle(props.style),
+      style: undefined,
+    };
+  }, [props]);
+
+  return <RNMBXSnowNativeComponent {...baseProps} />;
+});

package/src/modules/offline/offlineManager.ts

@@ -182,14 +182,7 @@ class OfflineManager {
    * @return {void}
    */
   async invalidateAmbientCache(): Promise<void> {
-    if (RNMBXModule.MapboxV10) {
-      console.warn(
-        'RNMapbox: invalidateAmbientCache is not implemented on v10',
-      );
-      return;
-    }
-    await this._initialize();
-    await MapboxOfflineManager.invalidateAmbientCache();
+    console.warn('RNMapbox: invalidateAmbientCache is not implemented on v10');
   }
 
   /**
@@ -204,12 +197,7 @@ class OfflineManager {
    * @return {void}
    */
   async clearAmbientCache(): Promise<void> {
-    if (RNMBXModule.MapboxV10) {
-      console.warn('RNMapbox: clearAmbientCache is not implemented on v10');
-      return;
-    }
-    await this._initialize();
-    await MapboxOfflineManager.clearAmbientCache();
+    console.warn('RNMapbox: clearAmbientCache is not implemented on v10');
   }
 
   /**

package/src/specs/RNMBXMarkerViewContentNativeComponent.ts

@@ -1,7 +1,19 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+// @ts-ignore - CI environment type resolution issue for CodegenTypes
+import { DirectEventHandler, Float } from 'react-native/Libraries/Types/CodegenTypes';
 
-export interface NativeProps extends ViewProps {}
+type OnAnnotationPositionEvent = {
+  x: Float;
+  y: Float;
+};
+
+export interface NativeProps extends ViewProps {
+  // Fired by native when Mapbox repositions the annotation via setTranslationX/Y.
+  // JS uses this to keep the Fabric shadow tree transform in sync so that
+  // UIManager.measure returns the correct on-screen position for Pressable hit-testing.
+  onAnnotationPosition?: DirectEventHandler<OnAnnotationPositionEvent>;
+}
 
 // @ts-ignore-error - Codegen requires single cast but TypeScript prefers double cast
 export default codegenNativeComponent<NativeProps>(

package/src/specs/RNMBXRainNativeComponent.ts

@@ -0,0 +1,13 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import type { UnsafeMixed } from './codegenUtils';
+
+export interface NativeProps extends ViewProps {
+  reactStyle: UnsafeMixed<any>;
+}
+
+// @ts-ignore-error - Codegen requires single cast but TypeScript prefers double cast
+export default codegenNativeComponent<NativeProps>(
+  'RNMBXRain',
+) as HostComponent<NativeProps>;

package/src/specs/RNMBXSnowNativeComponent.ts

@@ -0,0 +1,13 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import type { UnsafeMixed } from './codegenUtils';
+
+export interface NativeProps extends ViewProps {
+  reactStyle: UnsafeMixed<any>;
+}
+
+// @ts-ignore-error - Codegen requires single cast but TypeScript prefers double cast
+export default codegenNativeComponent<NativeProps>(
+  'RNMBXSnow',
+) as HostComponent<NativeProps>;

package/src/utils/MapboxStyles.ts

@@ -767,6 +767,20 @@ export interface LineLayerStyleProps {
    * @requires lineZOffset
    */
   lineCrossSlope?: Value<number>;
+  /**
+   * Controls how much the elevation of lines with `lineElevationReference` set to `sea` scales with terrain exaggeration. A value of 0 keeps the line at a fixed altitude above sea level. A value of 1 scales the elevation proportionally with terrain exaggeration.
+   *
+   * @requires lineZOffset
+   */
+  lineElevationGroundScale?: Value<
+    number,
+    ['zoom', 'feature', 'line-progress']
+  >;
+
+  /**
+   * The transition affecting any changes to this layer’s lineElevationGroundScale property.
+   */
+  lineElevationGroundScaleTransition?: Transition;
   /**
    * Controls the transition progress between the image variants of linePattern. Zero means the first variant is used, one is the second, and in between they are blended together. Both images should be the same size and have the same type (either raster or vector).
    *
@@ -2365,6 +2379,181 @@ export interface AtmosphereLayerStyleProps {
    */
   verticalRangeTransition?: Transition;
 }
+export interface SnowLayerStyleProps {
+  /**
+   * Snow particles density. Controls the overall particles number.
+   */
+  density?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s density property.
+   */
+  densityTransition?: Transition;
+  /**
+   * Snow particles movement factor. Controls the overall particles movement speed.
+   */
+  intensity?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s intensity property.
+   */
+  intensityTransition?: Transition;
+  /**
+   * Snow particles color.
+   */
+  color?: Value<string, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s color property.
+   */
+  colorTransition?: Transition;
+  /**
+   * Snow particles opacity.
+   */
+  opacity?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s opacity property.
+   */
+  opacityTransition?: Transition;
+  /**
+   * Snow vignette screenSpace effect. Adds snow tint to screen corners
+   */
+  vignette?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s vignette property.
+   */
+  vignetteTransition?: Transition;
+  /**
+   * Snow vignette screenSpace corners tint color.
+   */
+  vignetteColor?: Value<string, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s vignetteColor property.
+   */
+  vignetteColorTransition?: Transition;
+  /**
+   * Thinning factor of snow particles from center. 0  no thinning. 1  maximal central area thinning.
+   */
+  centerThinning?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s centerThinning property.
+   */
+  centerThinningTransition?: Transition;
+  /**
+   * Main snow particles direction. Azimuth and polar angles
+   */
+  direction?: Value<number[], ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s direction property.
+   */
+  directionTransition?: Transition;
+  /**
+   * Snow flake particle size. Correlates with individual particle screen size
+   */
+  flakeSize?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s flakeSize property.
+   */
+  flakeSizeTransition?: Transition;
+}
+export interface RainLayerStyleProps {
+  /**
+   * Rain particles density. Controls the overall screen density of the rain.
+   */
+  density?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s density property.
+   */
+  densityTransition?: Transition;
+  /**
+   * Rain particles movement factor. Controls the overall rain particles speed
+   */
+  intensity?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s intensity property.
+   */
+  intensityTransition?: Transition;
+  /**
+   * Individual rain particle dorplets color.
+   */
+  color?: Value<string, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s color property.
+   */
+  colorTransition?: Transition;
+  /**
+   * Rain particles opacity.
+   */
+  opacity?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s opacity property.
+   */
+  opacityTransition?: Transition;
+  /**
+   * ScreenSpace vignette rain tinting effect intensity.
+   */
+  vignette?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s vignette property.
+   */
+  vignetteTransition?: Transition;
+  /**
+   * Rain vignette screenSpace corners tint color.
+   */
+  vignetteColor?: Value<string, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s vignetteColor property.
+   */
+  vignetteColorTransition?: Transition;
+  /**
+   * Thinning factor of rain particles from center. 0  no thinning. 1  maximal central area thinning.
+   */
+  centerThinning?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s centerThinning property.
+   */
+  centerThinningTransition?: Transition;
+  /**
+   * Main rain particles direction. Azimuth and polar angles.
+   */
+  direction?: Value<number[], ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s direction property.
+   */
+  directionTransition?: Transition;
+  /**
+   * Rain droplet size. x  normal to direction, y  along direction
+   */
+  dropletSize?: Value<number[], ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s dropletSize property.
+   */
+  dropletSizeTransition?: Transition;
+  /**
+   * Rain particles screenSpace distortion strength.
+   */
+  distortionStrength?: Value<number, ['zoom', 'measure-light']>;
+
+  /**
+   * The transition affecting any changes to this layer’s distortionStrength property.
+   */
+  distortionStrengthTransition?: Transition;
+}
 export interface TerrainLayerStyleProps {
   /**
    * Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.
@@ -2389,4 +2578,6 @@ export type AllLayerStyleProps =
   | SkyLayerStyleProps
   | LightLayerStyleProps
   | AtmosphereLayerStyleProps
+  | SnowLayerStyleProps
+  | RainLayerStyleProps
   | TerrainLayerStyleProps;

package/src/utils/styleMap.ts

@@ -73,6 +73,8 @@ const styleMap = {
   lineZOffset: StyleTypes.Constant,
   lineElevationReference: StyleTypes.Enum,
   lineCrossSlope: StyleTypes.Constant,
+  lineElevationGroundScale: StyleTypes.Constant,
+  lineElevationGroundScaleTransition: StyleTypes.Transition,
   linePatternCrossFade: StyleTypes.Constant,
   lineTrimFadeRange: StyleTypes.Constant,
   lineTrimColor: StyleTypes.Color,
@@ -357,6 +359,26 @@ const styleMap = {
   verticalRange: StyleTypes.Constant,
   verticalRangeTransition: StyleTypes.Transition,
 
+  density: StyleTypes.Constant,
+  densityTransition: StyleTypes.Transition,
+  opacity: StyleTypes.Constant,
+  opacityTransition: StyleTypes.Transition,
+  vignette: StyleTypes.Constant,
+  vignetteTransition: StyleTypes.Transition,
+  vignetteColor: StyleTypes.Color,
+  vignetteColorTransition: StyleTypes.Transition,
+  centerThinning: StyleTypes.Constant,
+  centerThinningTransition: StyleTypes.Transition,
+  direction: StyleTypes.Constant,
+  directionTransition: StyleTypes.Transition,
+  flakeSize: StyleTypes.Constant,
+  flakeSizeTransition: StyleTypes.Transition,
+
+  dropletSize: StyleTypes.Constant,
+  dropletSizeTransition: StyleTypes.Transition,
+  distortionStrength: StyleTypes.Constant,
+  distortionStrengthTransition: StyleTypes.Transition,
+
   exaggeration: StyleTypes.Constant,
 
   color: StyleTypes.Color,