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

package/ios/RCTMGL-v10/RCTMGLShapeSourceManager.swift

@@ -23,7 +23,7 @@ extension RCTMGLShapeSourceManager {
       let view = viewRegistry![reactTag]
 
       guard let shapeSource = view! as? RCTMGLShapeSource else {
-        RCTLogError("Invalid react tag, could not find RCTMGLShapeSource");
+        RCTMGLLogError("Invalid react tag, could not find RCTMGLShapeSource");
         rejecter(name, "Unknown find reactTag: \(reactTag)", nil)
         return;
       }

package/ios/RCTMGL-v10/RCTMGLUtils.swift

@@ -35,7 +35,7 @@ class RCTMGLUtils {
           RCTMGLImageQueue.sharedInstance.addImage(objects[imageName], scale: scale, bridge:bridge) {
             (error,image) in
             if image == nil {
-              RCTLogWarn("Failed to fetch image: \(imageName) error:\(error)")
+              RCTMGLLogWarn("Failed to fetch image: \(imageName) error:\(error)")
             }
             else {
               DispatchQueue.main.async {

package/ios/RCTMGL-v10/RCTMGLVectorLayer.swift

@@ -15,7 +15,7 @@ class RCTMGLVectorLayer: RCTMGLLayer {
         ((MGLVectorStyleLayer *) self.styleLayer).predicate = predicate;
     }
     @catch (NSException* exception) {
-        RCTLogError(@"Invalid predicate: %@ on layer %@ - %@ reason: %@", predicate, self, exception.name, exception.reason);
+        RCTMGLLogError(@"Invalid predicate: %@ on layer %@ - %@ reason: %@", predicate, self, exception.name, exception.reason);
     }
 }
 

package/javascript/components/AbstractLayer.tsx

@@ -4,7 +4,7 @@ import { NativeMethods, processColor } from 'react-native';
 
 import { getFilter } from '../utils/filterUtils';
 import { transformStyle } from '../utils/StyleValue';
-import { AllLayerStyleProps } from '../utils/MapboxStyles';
+import { AllLayerStyleProps, Expression } from '../utils/MapboxStyles';
 
 type PropsBase = {
   id: string;
@@ -14,7 +14,7 @@ type PropsBase = {
   aboveLayerID?: string;
   belowLayerID?: string;
   layerIndex?: number;
-  filter?: string[];
+  filter?: Expression;
   style: AllLayerStyleProps;
 };
 
@@ -62,7 +62,10 @@ class AbstractLayer<
     if (this.nativeLayer) {
       let propsToPass = props;
       if (props.style) {
-        propsToPass = { ...props, reactStyle: this.getStyle(props.style) };
+        propsToPass = {
+          ...props,
+          reactStyle: this.getStyle(props.style as AllLayerStyleProps),
+        };
       }
       this.nativeLayer?.setNativeProps(propsToPass);
     }

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,69 +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',
-                position: 'absolute',
-              }}
-            >
-              {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/PointAnnotation.tsx

@@ -116,7 +116,7 @@ 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>,

package/javascript/components/SymbolLayer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, NativeModules, requireNativeComponent } from 'react-native';
 
-import { type SymbolLayerStyleProps } from '../utils/MapboxStyles';
+import { Expression, type SymbolLayerStyleProps } from '../utils/MapboxStyles';
 import { type StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
@@ -46,7 +46,7 @@ export type Props = {
   /**
    *  Filter only the features in the source layer that satisfy a condition that you define
    */
-  filter?: string[];
+  filter?: Expression;
 
   /**
    * The minimum zoom level at which the layer gets parsed and appears.

package/javascript/utils/index.d.ts

@@ -7,9 +7,9 @@ export type NativeArg =
   | NativeArg[];
 
 export function isAndroid(): boolean;
-export function isBoolean(_: unknown): argument is boolean;
-export function isNumber(_: unknown): argument is number;
-export function isString(_: unknown): argument is string;
+export function isBoolean(argument: unknown): argument is boolean;
+export function isNumber(argument: unknown): argument is number;
+export function isString(argument: unknown): argument is string;
 // eslint-disable-next-line @typescript-eslint/ban-types
 export function isFunction(argument: unknown): argument is Function;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.44",
+  "version": "10.0.0-beta.45",
   "publishConfig": {
     "access": "public"
   },

package/scripts/autogenHelpers/DocJSONBuilder.js

@@ -48,6 +48,7 @@ class DocJSONBuilder {
     return {
       match: fileExtensionsRegex,
       shortName: true,
+      sort: true,
     };
   }
 
@@ -422,6 +423,18 @@ class DocJSONBuilder {
     });
   }
 
+  sortObject(not_sorted) {
+    return Object.keys(not_sorted)
+      .sort()
+      .reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: not_sorted[key],
+        }),
+        {},
+      );
+  }
+
   async generate() {
     this.generateModulesTask({}, MODULES_PATH);
 
@@ -433,7 +446,10 @@ class DocJSONBuilder {
     ];
 
     return Promise.all(tasks).then(() => {
-      fs.writeFileSync(OUTPUT_PATH, JSON.stringify(results, null, 2));
+      fs.writeFileSync(
+        OUTPUT_PATH,
+        JSON.stringify(this.sortObject(results), null, 2),
+      );
       return true;
     });
   }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewWrapper.kt

@@ -1,8 +0,0 @@
-package com.mapbox.rctmgl.components.annotation
-import android.content.Context
-import android.util.Log
-import android.view.View
-import com.facebook.react.views.view.ReactViewGroup
-
-class RCTMGLMarkerViewWrapper(context: Context?, private val mManager: RCTMGLMarkerViewWrapperManager) :  ReactViewGroup(context) {
-}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewWrapperManager.kt

@@ -1,21 +0,0 @@
-package com.mapbox.rctmgl.components.annotation
-
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-
-class RCTMGLMarkerViewWrapperManager(reactApplicationContext: ReactApplicationContext?) :
-    ViewGroupManager<RCTMGLMarkerViewWrapper>() {
-
-    override fun getName(): String {
-        return REACT_CLASS
-    }
-
-    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLMarkerViewWrapper {
-        return RCTMGLMarkerViewWrapper(reactContext, this)
-    }
-
-    companion object {
-        const val REACT_CLASS = "RCTMGLMarkerViewWrapper"
-    }
-}

package/ios/RCTMGL-v10/RCTMGLMarkerViewWrapper.swift

@@ -1,24 +0,0 @@
-import MapboxMaps
-
-class RCTMGLMarkerViewWrapper : UIView {
-  var anchorX : CGFloat? = nil
-  var anchorY : CGFloat? = nil
-
-  override func reactSetFrame(_ frame: CGRect) {
-    let oldFrame = self.frame
-    let newSize = frame.size
-    let oldSize = oldFrame.size
-
-    if let anchorX = anchorX, let anchorY = anchorY {
-      let oldCenter = CGPoint(x: oldFrame.origin.x + oldSize.width * anchorX,
-                              y: oldFrame.origin.y + oldSize.height * anchorY)
-
-      let newFrame = CGRect(origin: CGPoint(x: oldCenter.x-anchorX * newSize.width,y: oldCenter.y-anchorY * newSize.height), size: newSize)
-      self.frame = newFrame
-    } else {
-      super.reactSetFrame(frame)
-      let newFrame = CGRect(origin: oldFrame.origin, size: newSize)
-      self.frame = newFrame
-    }
-  }
-}

package/ios/RCTMGL-v10/RCTMGLMarkerViewWrapperManager.m

@@ -1,8 +0,0 @@
-#import "React/RCTBridgeModule.h"
-#import <React/RCTViewManager.h>
-#import <Foundation/Foundation.h>
-
-@interface RCT_EXTERN_REMAP_MODULE(RCTMGLMarkerViewWrapper, RCTMGLMarkerViewWrapperManager, RCTViewManager)
-
-@end
-

package/ios/RCTMGL-v10/RCTMGLMarkerViewWrapperManager.swift

@@ -1,14 +0,0 @@
-import Foundation
-import MapboxMaps
-
-@objc(RCTMGLMarkerViewWrapperManager)
-class RCTMGLMarkerViewWrapperManager : RCTViewManager {
-  @objc
-  override static func requiresMainQueueSetup() -> Bool {
-    return true
-  }
-  
-  override func view() -> UIView! {
-    return RCTMGLMarkerViewWrapper()
-  }
-}