@rnmapbox/maps 10.0.0-beta.43 → 10.0.0-beta.45

package/javascript/components/MarkerView.tsx

@@ -1,10 +1,11 @@
-import React, { ReactNode, ReactElement } from 'react';
+import React from 'react';
 import {
   Platform,
   NativeModules,
   requireNativeComponent,
   HostComponent,
   type ViewProps,
+  View,
 } from 'react-native';
 
 import { toJSONString } from '../utils';
@@ -16,46 +17,55 @@ const Mapbox = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
 
-/**
- * MarkerView allows you to place a interactive react native marker to the map.
- *
- * If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
- * .
- * This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android
- * and PointAnnotation on iOS.
- */
-class MarkerView extends React.PureComponent<{
+type Props = ViewProps & {
   /**
    * The center point (specified as a map coordinate) of the marker.
-   * See also #anchor.
    */
   coordinate: [number, number];
 
   /**
-   * Specifies the anchor being set on a particular point of the annotation.
-   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
-   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
-   * Note this is only for custom annotations not the default pin view.
-   * Defaults to the center of the view.
+   * 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: {
-    /**
-     * `x` of anchor
-     */
     x: number;
-    /**
-     * `y` of anchor
-     */
     y: number;
   };
 
   /**
-   * Expects one child - can be container with multiple elements
+   * @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;
+
+  isSelected: boolean;
+
+  /**
+   * One or more valid React Native views.
    */
   children: React.ReactElement;
-}> {
-  static defaultProps = {
+};
+
+/**
+ * MarkerView represents an interactive React Native marker on the map.
+ *
+ * If you have static views, consider using PointAnnotation or SymbolLayer to display
+ * an image, as they'll offer much better performance. Mapbox suggests using this
+ * component for a maximum of around 100 views displayed at one time.
+ *
+ * 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`.
+ */
+class MarkerView extends React.PureComponent<Props> {
+  static defaultProps: Partial<Props> = {
     anchor: { x: 0.5, y: 0.5 },
+    allowOverlap: false,
+    isSelected: false,
   };
 
   static lastId = 0;
@@ -69,68 +79,63 @@ class MarkerView extends React.PureComponent<{
     return this.__idForPointAnnotation;
   }
 
-  render() {
-    const { props } = this;
-    if (Platform.OS === 'ios' && !Mapbox.MapboxV10) {
-      return <PointAnnotation id={this._idForPointAnnotation()} {...props} />;
+  _getCoordinate(coordinate: [number, number]): string | undefined {
+    if (!coordinate) {
+      return undefined;
     }
+    return toJSONString(makePoint(coordinate));
+  }
 
-    function _getCoordinate(coordinate: [number, number]): string | undefined {
-      if (!coordinate) {
-        return undefined;
-      }
-      return toJSONString(makePoint(coordinate));
+  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)]`,
+      );
     }
 
-    const { anchor = { x: 0.5, y: 0.5 } } = props;
-    const { children } = props;
-
-    const actProps = {
-      anchor,
-      coordinate: _getCoordinate(props.coordinate),
-    };
-
-    const wrapChildern =
-      RCTMGLMarkerViewWrapper === undefined
-        ? (child: ReactNode | ReactNode[]) => child
-        : (child: ReactNode | ReactNode[]) => (
-            <RCTMGLMarkerViewWrapper
-              style={{
-                alignSelf: 'flex-start',
-              }}
-            >
-              {child}
-            </RCTMGLMarkerViewWrapper>
-          );
-
-    if (RCTMGLMarkerView === undefined) {
-      throw new Error(
-        'internal error RCTMGLMarkerView should not be null on v10 or non ios',
+    if (Platform.OS === 'ios' && !Mapbox.MapboxV10) {
+      return (
+        <PointAnnotation id={this._idForPointAnnotation()} {...this.props} />
       );
     }
+
+    const { anchor = { x: 0.5, y: 0.5 } } = this.props;
+
     return (
-      <RCTMGLMarkerView {...actProps}>
-        {wrapChildern(children)}
+      <RCTMGLMarkerView
+        style={[
+          {
+            flex: 0,
+            alignSelf: 'flex-start',
+          },
+          this.props.style,
+        ]}
+        coordinate={this._getCoordinate(this.props.coordinate)}
+        anchor={anchor}
+        allowOverlap={this.props.allowOverlap}
+        isSelected={this.props.isSelected}
+      >
+        <View style={{ flex: 0, alignSelf: 'flex-start' }}>
+          {this.props.children}
+        </View>
       </RCTMGLMarkerView>
     );
   }
 }
 
-const RCTMGLMarkerView:
-  | HostComponent<{
-      anchor: { x: number; y: number };
-      coordinate: string | undefined;
-    }>
-  | undefined =
-  Platform.OS === 'android'
-    ? requireNativeComponent(NATIVE_MODULE_NAME)
-    : Mapbox.MapboxV10
-    ? requireNativeComponent(NATIVE_MODULE_NAME)
-    : undefined;
-
-const RCTMGLMarkerViewWrapper: HostComponent<ViewProps> | undefined =
-  Mapbox.MapboxV10
-    ? requireNativeComponent('RCTMGLMarkerViewWrapper')
-    : undefined;
+type NativeProps = ViewProps & {
+  coordinate: string | undefined;
+  anchor: { x: number; y: number };
+  allowOverlap: boolean;
+  isSelected: boolean;
+};
+
+const RCTMGLMarkerView: HostComponent<NativeProps> =
+  requireNativeComponent(NATIVE_MODULE_NAME);
 
 export default MarkerView;

package/javascript/components/NativeBridgeComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { runNativeCommand, isAndroid } from '../utils';
+import { type NativeArg, runNativeCommand, isAndroid } from '../utils';
 
 let callbackIncrement = 0;
 
@@ -9,18 +9,24 @@ export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   type: string;
 };
 
-const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
-  class extends B {
+const NativeBridgeComponent = <
+  Props extends object,
+  BaseComponent extends new (...ags: any[]) => React.Component<Props>,
+>(
+  Base: BaseComponent,
+  nativeModuleName: string,
+) =>
+  class extends Base {
     _nativeModuleName: string;
     _onAndroidCallback: (e: any) => void;
     _callbackMap: Map<string, any>;
     _preRefMapMethodQueue: Array<{
-      method: { name: string; args: Array<string> };
-      resolver: (value: unknown) => void;
+      method: { name: string; args: NativeArg[] };
+      resolver: (value: NativeArg) => void;
     }>;
 
-    constructor(props: T, nativeModuleName: string) {
-      super(props);
+    constructor(...args: any[]) {
+      super(...args);
 
       this._nativeModuleName = nativeModuleName;
       this._onAndroidCallback = this._onAndroidCallbackO.bind(this);
@@ -28,9 +34,9 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback(
+    _addAddAndroidCallback<ReturnType>(
       id: string,
-      resolve: (value: string) => void,
+      resolve: (value: ReturnType) => void,
       reject: (error: Error) => void,
     ) {
       this._callbackMap.set(id, { resolve, reject });
@@ -74,16 +80,16 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       }
     }
 
-    _runNativeCommand<RefType>(
+    _runNativeCommand<RefType, ReturnType = NativeArg>(
       methodName: string,
       nativeRef: RefType,
-      args: string[] = [],
-    ) {
+      args: NativeArg[] = [],
+    ): Promise<ReturnType> {
       if (!nativeRef) {
-        return new Promise((resolve) => {
+        return new Promise<ReturnType>((resolve) => {
           this._preRefMapMethodQueue.push({
             method: { name: methodName, args },
-            resolver: resolve,
+            resolver: resolve as (args: NativeArg) => void,
           });
         });
       }

package/javascript/components/PointAnnotation.tsx

@@ -116,10 +116,11 @@ type PointAnnotationProps = {
  * they'll offer much better performance.
  *
  * If you need interactive views please use MarkerView,
- * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
+ * as with PointAnnotation child views are rendered onto a bitmap
  */
 class PointAnnotation extends NativeBridgeComponent(
   React.PureComponent<PointAnnotationProps>,
+  NATIVE_MODULE_NAME,
 ) {
   static defaultProps = {
     anchor: { x: 0.5, y: 0.5 },
@@ -129,7 +130,7 @@ class PointAnnotation extends NativeBridgeComponent(
   _nativeRef: NativePointAnnotationRef | null = null;
 
   constructor(props: PointAnnotationProps) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
     this._onSelected = this._onSelected.bind(this);
     this._onDeselected = this._onDeselected.bind(this);
     this._onDragStart = this._onDragStart.bind(this);

package/javascript/components/RasterSource.js

@@ -107,7 +107,7 @@ class RasterSource extends AbstractSource {
       attribution: this.props.attribution,
     };
     return (
-      <RCTMGLRasterSource ref="nativeSource" {...props}>
+      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}