@rnmapbox/maps 10.3.0-beta.1 → 10.3.0

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/UserLocation.tsx

@@ -259,9 +259,10 @@ class UserLocation extends React.Component<Props, UserLocationState> {
   _renderNative() {
     const { androidRenderMode, showsUserHeadingIndicator } = this.props;
 
-    const props = {
+    const props: React.ComponentProps<typeof LocationPuck> = {
       androidRenderMode,
-      iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
+      puckBearingEnabled: showsUserHeadingIndicator,
+      puckBearing: showsUserHeadingIndicator ? 'heading' : undefined,
     };
     return <LocationPuck {...props} />;
   }

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/RNMBXPointAnnotationNativeComponent.ts

@@ -28,6 +28,7 @@ export interface NativeProps extends ViewProps {
   draggable: UnsafeMixed<boolean>;
   id: UnsafeMixed<string>;
   anchor: UnsafeMixed<any>;
+  selected: UnsafeMixed<boolean>;
 
   onMapboxPointAnnotationDeselected: DirectEventHandler<OnMapboxPointAnnotationDeselectedEventType>;
   onMapboxPointAnnotationDrag: DirectEventHandler<OnMapboxPointAnnotationDragEventType>;

package/src/utils/MapboxStyles.ts

@@ -729,6 +729,24 @@ export interface LineLayerStyleProps {
    * The line part between [trimStart, trimEnd] will be painted using `lineTrimColor,` which is transparent by default to produce a route vanishing effect. The line trimOff offset is based on the whole line range [0.0, 1.0].
    */
   lineTrimOffset?: number[];
+  /**
+   * The width of the line border. A value of zero means no border.
+   */
+  lineBorderWidth?: Value<number, ['zoom', 'feature', 'feature-state']>;
+
+  /**
+   * The transition affecting any changes to this layer’s lineBorderWidth property.
+   */
+  lineBorderWidthTransition?: Transition;
+  /**
+   * The color of the line border. If lineBorderWidth is greater than zero and the alpha value of this color is 0 (default), the color for the border will be selected automatically based on the line color.
+   */
+  lineBorderColor?: Value<string, ['zoom', 'feature', 'feature-state']>;
+
+  /**
+   * The transition affecting any changes to this layer’s lineBorderColor property.
+   */
+  lineBorderColorTransition?: Transition;
   /**
    * Vertical offset from ground, in meters. Not supported for globe projection at the moment.
    *

package/src/utils/styleMap.ts

@@ -66,6 +66,10 @@ const styleMap = {
   linePattern: StyleTypes.Image,
   lineGradient: StyleTypes.Color,
   lineTrimOffset: StyleTypes.Constant,
+  lineBorderWidth: StyleTypes.Constant,
+  lineBorderWidthTransition: StyleTypes.Transition,
+  lineBorderColor: StyleTypes.Color,
+  lineBorderColorTransition: StyleTypes.Transition,
   lineZOffset: StyleTypes.Constant,
   lineElevationReference: StyleTypes.Enum,
   lineCrossSlope: StyleTypes.Constant,