@rnmapbox/maps 10.1.0-beta.2 → 10.1.0-beta.21

package/src/components/MapView.tsx

@@ -8,13 +8,12 @@ import {
   NativeMethods,
   HostComponent,
   LayoutChangeEvent,
-  findNodeHandle,
 } from 'react-native';
 import { debounce } from 'debounce';
-import { GeoJsonProperties, Geometry } from 'geojson';
 
-import NativeMapView from '../specs/MBXMapViewNativeComponent';
-import NativeAndroidTextureMapView from '../specs/MBXAndroidTextureMapViewNativeComponent';
+import NativeMapView, {
+  type NativeMapViewActual,
+} from '../specs/RNMBXMapViewNativeComponent';
 import NativeMapViewModule from '../specs/NativeMapViewModule';
 import {
   isFunction,
@@ -30,28 +29,25 @@ import { type Location } from '../modules/location/locationManager';
 
 import NativeBridgeComponent from './NativeBridgeComponent';
 
-const { MGLModule } = NativeModules;
-const { EventTypes } = MGLModule;
+const { RNMBXModule } = NativeModules;
+const { EventTypes } = RNMBXModule;
 
-if (MGLModule == null) {
+if (RNMBXModule == null) {
   console.error(
     'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
   );
 }
-if (!MGLModule.MapboxV10) {
+if (!RNMBXModule.MapboxV10) {
   console.warn(
     '@rnmapbox/maps: Non v10 implementations are deprecated and will be removed in next version - see https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-Maplibre',
   );
 }
 
-// TODO: check if this can be removed
-export const NATIVE_MODULE_NAME = 'MBXMapView';
-
 const styles = StyleSheet.create({
   matchParent: { flex: 1 },
 });
 
-const defaultStyleURL = MGLModule.StyleURL.Street;
+const defaultStyleURL = RNMBXModule.StyleURL.Street;
 
 export type Point = {
   x: number;
@@ -69,6 +65,67 @@ export type RegionPayload = {
   pitch: number;
 };
 
+export type GestureSettings = {
+  /**
+   * Whether double tapping the map with one touch results in a zoom-in animation.
+   */
+  doubleTapToZoomInEnabled?: boolean;
+  /**
+   * Whether single tapping the map with two touches results in a zoom-out animation.
+   */
+  doubleTouchToZoomOutEnabled?: boolean;
+  /**
+   * Whether pan/scroll is enabled for the pinch gesture.
+   */
+  pinchPanEnabled?: boolean;
+  /**
+   * Whether zoom is enabled for the pinch gesture.
+   */
+  pinchZoomEnabled?: boolean;
+  /**
+   * Whether a deceleration animation following a pinch-zoom gesture is enabled. True by default.
+   * (Android only)
+   */
+  pinchZoomDecelerationEnabled?: boolean;
+  /**
+   * Whether the pitch gesture is enabled.
+   */
+  pitchEnabled?: boolean;
+  /**
+   * Whether the quick zoom gesture is enabled.
+   */
+  quickZoomEnabled?: boolean;
+  /**
+   * Whether the rotate gesture is enabled.
+   */
+  rotateEnabled?: boolean;
+  /**
+   * Whether a deceleration animation following a rotate gesture is enabled. True by default.
+   * (Android only)
+   */
+  rotateDecelerationEnabled?: boolean;
+  /**
+   * Whether the single-touch pan/scroll gesture is enabled.
+   */
+  panEnabled?: boolean;
+  /**
+   * A constant factor that determines how quickly pan deceleration animations happen. Multiplied with the velocity vector once per millisecond during deceleration animations.
+   *
+   * On iOS Defaults to UIScrollView.DecelerationRate.normal.rawValue
+   * On android set to 0 to disable deceleration, and non zero to enabled it.
+   */
+  panDecelerationFactor?: number;
+  /**
+   * Whether rotation is enabled for the pinch zoom gesture.
+   */
+  simultaneousRotateAndPinchZoomEnabled?: boolean;
+  /**
+   * The amount by which the zoom level increases or decreases during a double-tap-to-zoom-in or double-touch-to-zoom-out gesture. 1.0 by default. Must be positive.
+   * (Android only)
+   */
+  zoomAnimationAmount?: number;
+};
+
 /**
  * v10 only
  */
@@ -244,6 +301,11 @@ type Props = ViewProps & {
    */
   localizeLabels?: LocalizeLabels;
 
+  /**
+   * Gesture configuration allows to control the user touch interaction.
+   */
+  gestureSettings?: GestureSettings;
+
   /**
    * Map press listener, gets called when a user presses the map
    */
@@ -397,10 +459,9 @@ type Debounced<F> = F & { clear(): void; flush(): void };
  */
 class MapView extends NativeBridgeComponent(
   React.PureComponent<Props>,
-  NATIVE_MODULE_NAME,
+  NativeMapViewModule,
 ) {
   static defaultProps: Props = {
-    projection: 'mercator',
     scrollEnabled: true,
     pitchEnabled: true,
     rotateEnabled: true,
@@ -409,7 +470,7 @@ class MapView extends NativeBridgeComponent(
     compassFadeWhenNorth: false,
     logoEnabled: true,
     scaleBarEnabled: true,
-    surfaceView: MGLModule.MapboxV10 ? true : false,
+    surfaceView: RNMBXModule.MapboxV10 ? true : false,
     requestDisallowInterceptTouchEvent: false,
     regionWillChangeDebounceTime: 10,
     regionDidChangeDebounceTime: 500,
@@ -441,7 +502,7 @@ class MapView extends NativeBridgeComponent(
       >,
     ) => void
   >;
-  _nativeRef?: RCTMGLMapViewRefType;
+  _nativeRef?: RNMBXMapViewRefType;
   state: {
     isReady: boolean | null;
     region: null;
@@ -498,7 +559,7 @@ class MapView extends NativeBridgeComponent(
   }
 
   _setHandledMapChangedEvents(props: Props) {
-    if (isAndroid() || MGLModule.MapboxV10) {
+    if (isAndroid() || RNMBXModule.MapboxV10) {
       const events: string[] = [];
 
       function addIfHasHandler(name: CallbablePropKeysWithoutOn) {
@@ -571,7 +632,7 @@ class MapView extends NativeBridgeComponent(
         );
       }
 
-      this._runNativeCommand('setHandledMapChangedEvents', this._nativeRef, [
+      this._runNativeMethod('setHandledMapChangedEvents', this._nativeRef, [
         events,
       ]);
     }
@@ -679,7 +740,7 @@ class MapView extends NativeBridgeComponent(
   ): Promise<GeoJSON.FeatureCollection | undefined> {
     if (
       bbox != null &&
-      (bbox.length === 4 || (MGLModule.MapboxV10 && bbox.length === 0))
+      (bbox.length === 4 || (RNMBXModule.MapboxV10 && bbox.length === 0))
     ) {
       const res = await this._runNative<{ data: GeoJSON.FeatureCollection }>(
         'queryRenderedFeaturesInRect',
@@ -741,7 +802,7 @@ class MapView extends NativeBridgeComponent(
     methodName: string,
     args: NativeArg[] = [],
   ): Promise<ReturnType> {
-    return this._runNativeCommand<typeof RCTMGLMapView, ReturnType>(
+    return super._runNativeMethod<typeof RNMBXMapView, ReturnType>(
       methodName,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore TODO: fix types
@@ -798,7 +859,7 @@ class MapView extends NativeBridgeComponent(
    * v10 only
    */
   async clearData(): Promise<void> {
-    if (!MGLModule.MapboxV10) {
+    if (!RNMBXModule.MapboxV10) {
       console.warn(
         'RNMapbox: clearData is only implemented in v10 implementation or later',
       );
@@ -845,42 +906,7 @@ 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._runNativeCommand('showAttribution', this._nativeRef);
-  }
-
-  _runNativeCommand<RefType, ReturnType = NativeArg>(
-    methodName: string,
-    nativeRef: RefType | undefined,
-    args?: NativeArg[],
-  ): Promise<ReturnType> {
-    // when this method is called after component mounts, the ref is not yet set
-    // schedule it to be called after a timeout
-    if (!this._nativeRef) {
-      return new Promise((resolve) => setTimeout(resolve, 1)).then(() => {
-        return this._runNativeCommand(methodName, this._nativeRef, args);
-      });
-    }
-
-    const handle = findNodeHandle(nativeRef as any);
-
-    // @ts-expect-error TS says that string cannot be used to index NativeMapViewModule.
-    // It can, it's just not pretty.
-    return NativeMapViewModule[methodName]?.(
-      handle,
-      ...(args ?? []),
-    ) as Promise<ReturnType>;
-  }
-
-  _decodePayload<G extends Geometry | null = Geometry, P = GeoJsonProperties>(
-    payload: GeoJSON.Feature<G, P> | string,
-  ): GeoJSON.Feature<G, P> {
-    // we check whether the payload is a string, since the strict type safety is enforced only on iOS on the new arch
-    // on Android, on both archs, the payload is an object
+  _decodePayload<T>(payload: T | string): T {
     if (typeof payload === 'string') {
       return JSON.parse(payload);
     } else {
@@ -888,15 +914,15 @@ class MapView extends NativeBridgeComponent(
     }
   }
 
-  _onPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>) {
+  _onPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature | string }>) {
     if (isFunction(this.props.onPress)) {
       this.props.onPress(this._decodePayload(e.nativeEvent.payload));
     }
   }
 
-  _onLongPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>) {
+  _onLongPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature | string }>) {
     if (isFunction(this.props.onLongPress)) {
-      this.props.onLongPress(e.nativeEvent.payload);
+      this.props.onLongPress(this._decodePayload(e.nativeEvent.payload));
     }
   }
 
@@ -923,17 +949,19 @@ class MapView extends NativeBridgeComponent(
     this.setState({ region: payload });
   }
 
-  _onCameraChanged(e: NativeSyntheticEvent<{ payload: MapState }>) {
-    this.props.onCameraChanged?.(e.nativeEvent.payload);
+  _onCameraChanged(e: NativeSyntheticEvent<{ payload: MapState | string }>) {
+    this.props.onCameraChanged?.(this._decodePayload(e.nativeEvent.payload));
   }
 
   _onChange(
     e: NativeSyntheticEvent<{
       type: string;
-      payload: GeoJSON.Feature<
-        GeoJSON.Point,
-        RegionPayload & { isAnimatingFromUserInteraction: boolean }
-      >;
+      payload:
+        | GeoJSON.Feature<
+            GeoJSON.Point,
+            RegionPayload & { isAnimatingFromUserInteraction: boolean }
+          >
+        | string;
     }>,
   ) {
     const { regionWillChangeDebounceTime, regionDidChangeDebounceTime } =
@@ -1037,7 +1065,7 @@ class MapView extends NativeBridgeComponent(
       return;
     }
 
-    if (MGLModule.MapboxV10) {
+    if (RNMBXModule.MapboxV10) {
       if (!this.deprecationLogged.contentInset) {
         console.warn(
           '@rnmapbox/maps: contentInset is deprecated, use Camera padding instead.',
@@ -1053,9 +1081,11 @@ class MapView extends NativeBridgeComponent(
     return this.props.contentInset;
   }
 
-  _setNativeRef(nativeRef: RCTMGLMapViewRefType) {
-    this._nativeRef = nativeRef;
-    super._runPendingNativeCommands(nativeRef);
+  _setNativeRef(nativeRef: RNMBXMapViewRefType | null) {
+    if (nativeRef != null) {
+      this._nativeRef = nativeRef;
+      super._runPendingNativeMethods(nativeRef);
+    }
   }
 
   setNativeProps(props: NativeProps) {
@@ -1083,7 +1113,7 @@ class MapView extends NativeBridgeComponent(
   }
 
   _setLocalizeLabels(props: Props) {
-    if (!MGLModule.MapboxV10) {
+    if (!RNMBXModule.MapboxV10) {
       return;
     }
     if (typeof props.localizeLabels === 'boolean') {
@@ -1104,28 +1134,20 @@ class MapView extends NativeBridgeComponent(
     this._setLocalizeLabels(props);
 
     const callbacks = {
-      ref: (nativeRef: RCTMGLMapViewRefType) => this._setNativeRef(nativeRef),
+      ref: (nativeRef: RNMBXMapViewRefType | null) =>
+        this._setNativeRef(nativeRef),
       onPress: this._onPress,
       onLongPress: this._onLongPress,
       onMapChange: this._onChange,
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
       onCameraChanged: this._onCameraChanged,
     };
 
     let mapView = null;
-    if (isAndroid() && !this.props.surfaceView && this.state.isReady) {
+    if (this.state.isReady) {
       mapView = (
-        <RCTMGLAndroidTextureMapView {...props} {...callbacks}>
+        <RNMBXMapView {...props} {...callbacks}>
           {this.props.children}
-        </RCTMGLAndroidTextureMapView>
-      );
-    } else if (this.state.isReady) {
-      mapView = (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore TODO: fix types
-        <RCTMGLMapView {...props} {...callbacks}>
-          {this.props.children}
-        </RCTMGLMapView>
+        </RNMBXMapView>
       );
     }
 
@@ -1145,19 +1167,19 @@ type NativeProps = Omit<
   Props,
   'onPress' | 'onLongPress' | 'onCameraChanged'
 > & {
-  onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
-  onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
-  onCameraChanged(event: NativeSyntheticEvent<{ payload: MapState }>): void;
+  onPress?: (
+    event: NativeSyntheticEvent<{ type: string; payload: string }>,
+  ) => void;
+  onLongPress?: (
+    event: NativeSyntheticEvent<{ type: string; payload: string }>,
+  ) => void;
+  onCameraChanged?: (
+    event: NativeSyntheticEvent<{ type: string; payload: string }>,
+  ) => void;
 };
 
-type RCTMGLMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
-// const RCTMGLMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-// TODO: figure out how to pick the correct implementation
-const RCTMGLMapView = NativeMapView;
+type RNMBXMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
 
-let RCTMGLAndroidTextureMapView: any;
-if (isAndroid()) {
-  RCTMGLAndroidTextureMapView = NativeAndroidTextureMapView;
-}
+const RNMBXMapView = NativeMapView as NativeMapViewActual;
 
 export default MapView;

package/src/components/MarkerView.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
-import {
-  Platform,
-  NativeModules,
-  requireNativeComponent,
-  type ViewProps,
-  View,
-} from 'react-native';
+import { Platform, NativeModules, type ViewProps, View } from 'react-native';
 
 import { toJSONString } from '../utils';
 import { makePoint } from '../utils/geoUtils';
 import { type Position } from '../types/Position';
+import NativeMarkerViewComponent from '../specs/RNMBXMarkerViewNativeComponent';
 
 import PointAnnotation from './PointAnnotation';
 
-const Mapbox = NativeModules.MGLModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
+export const NATIVE_MODULE_NAME = 'RNMBXMarkerView';
 
 type Props = ViewProps & {
   /**
@@ -107,7 +102,7 @@ class MarkerView extends React.PureComponent<Props> {
     const { anchor = { x: 0.5, y: 0.5 } } = this.props;
 
     return (
-      <RCTMGLMarkerView
+      <RNMBXMarkerView
         style={[
           {
             flex: 0,
@@ -134,19 +129,11 @@ class MarkerView extends React.PureComponent<Props> {
         >
           {this.props.children}
         </View>
-      </RCTMGLMarkerView>
+      </RNMBXMarkerView>
     );
   }
 }
 
-type NativeProps = ViewProps & {
-  coordinate: string | undefined;
-  anchor: { x: number; y: number };
-  allowOverlap: boolean;
-  isSelected: boolean;
-};
-
-const RCTMGLMarkerView =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXMarkerView = NativeMarkerViewComponent;
 
 export default MarkerView;

package/src/components/NativeBridgeComponent.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
+import { TurboModule } from 'react-native';
 
-import { type NativeArg, runNativeCommand, isAndroid } from '../utils';
-
-let callbackIncrement = 0;
+import { type NativeArg, runNativeMethod } from '../utils';
 
 export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   payload: PayloadType;
@@ -14,12 +13,10 @@ const NativeBridgeComponent = <
   BaseComponent extends new (...ags: any[]) => React.Component<Props>,
 >(
   Base: BaseComponent,
-  nativeModuleName: string,
+  turboModule: TurboModule,
 ) =>
   class extends Base {
-    _nativeModuleName: string;
-    _onAndroidCallback: (e: any) => void;
-    _callbackMap: Map<string, any>;
+    _turboModule: TurboModule;
     _preRefMapMethodQueue: Array<{
       method: { name: string; args: NativeArg[] };
       resolver: (value: NativeArg) => void;
@@ -28,48 +25,17 @@ const NativeBridgeComponent = <
     constructor(...args: any[]) {
       super(...args);
 
-      this._nativeModuleName = nativeModuleName;
-      this._onAndroidCallback = this._onAndroidCallbackO.bind(this);
-      this._callbackMap = new Map();
+      this._turboModule = turboModule;
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback<ReturnType>(
-      id: string,
-      resolve: (value: ReturnType) => void,
-      reject: (error: Error) => void,
-    ) {
-      this._callbackMap.set(id, { resolve, reject });
-    }
-
-    _removeAndroidCallback(id: string) {
-      this._callbackMap.delete(id);
-    }
-
-    _onAndroidCallbackO(e: React.SyntheticEvent<Element, RNMBEvent>) {
-      const callbackID = e.nativeEvent.type;
-      const callback = this._callbackMap.get(callbackID);
-
-      if (!callback) {
-        return;
-      }
-
-      this._callbackMap.delete(callbackID);
-      const { payload } = e.nativeEvent;
-      if (payload.error) {
-        callback.reject.call(null, new Error(payload.error));
-      } else {
-        callback.resolve.call(null, payload);
-      }
-    }
-
-    async _runPendingNativeCommands<RefType>(nativeRef: RefType) {
+    async _runPendingNativeMethods<RefType>(nativeRef: RefType) {
       if (nativeRef) {
         while (this._preRefMapMethodQueue.length > 0) {
           const item = this._preRefMapMethodQueue.pop();
 
           if (item && item.method && item.resolver) {
-            const res = await this._runNativeCommand(
+            const res = await this._runNativeMethod(
               item.method.name,
               nativeRef,
               item.method.args,
@@ -80,7 +46,7 @@ const NativeBridgeComponent = <
       }
     }
 
-    _runNativeCommand<RefType, ReturnType = NativeArg>(
+    _runNativeMethod<RefType, ReturnType = NativeArg>(
       methodName: string,
       nativeRef: RefType | undefined,
       args: NativeArg[] = [],
@@ -94,21 +60,7 @@ const NativeBridgeComponent = <
         });
       }
 
-      if (isAndroid()) {
-        return new Promise((resolve, reject) => {
-          callbackIncrement += 1;
-          const callbackID = `${methodName}_${callbackIncrement}`;
-          this._addAddAndroidCallback(callbackID, resolve, reject);
-          args.unshift(callbackID);
-          runNativeCommand(this._nativeModuleName, methodName, nativeRef, args);
-        });
-      }
-      return runNativeCommand(
-        this._nativeModuleName,
-        methodName,
-        nativeRef,
-        args,
-      );
+      return runNativeMethod(this._turboModule, methodName, nativeRef, args);
     }
   };
 

package/src/components/NativeUserLocation.tsx

@@ -1,7 +1,11 @@
 import React, { memo } from 'react';
-import { requireNativeComponent } from 'react-native';
 
-const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+import RNMBXNativeUserLocation, {
+  type NativeProps,
+} from '../specs/RNMBXNativeUserLocationNativeComponent';
+import type { Expression } from '../utils/MapboxStyles';
+
+type Value<T> = T | Expression;
 
 export type Props = {
   /**
@@ -11,25 +15,82 @@ export type Props = {
    *  - 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;
-};
 
-type NativeProps = Props;
+  /**
+   * 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>;
+
+  /**
+   * Whether location icon is visible, defaults to true
+   */
+  visible?: boolean;
+};
 
-const RCTMGLNativeUserLocation =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const defaultProps = {
+  visible: true,
+} as const;
 
 const NativeUserLocation = memo((props: Props) => {
-  return <RCTMGLNativeUserLocation {...props} />;
+  const { iosShowsUserHeadingIndicator, ...rest } = props;
+  let baseProps: NativeProps = { ...defaultProps };
+  if (iosShowsUserHeadingIndicator) {
+    console.warn(
+      'NativeUserLocation: iosShowsUserHeadingIndicator is deprecated, use puckBearingEnabled={true} puckBearing="heading" instead',
+    );
+    baseProps = {
+      ...baseProps,
+      puckBearingEnabled: true,
+      puckBearing: 'heading',
+    };
+  }
+  const actualProps = { ...baseProps, ...rest };
+  return <RNMBXNativeUserLocation {...actualProps} />;
 });
 
 export default NativeUserLocation;