@rnmapbox/maps 10.0.0-beta.73 → 10.0.0-beta.74

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/location/LocationComponentManager.kt

@@ -23,7 +23,7 @@ import com.mapbox.rctmgl.location.LocationManager
 class LocationComponentManager(mapView: RCTMGLMapView, context: Context) {
     var mMapView = mapView
     var mContext = context
-    private var mState = State(showUserLocation=false, followUserLocation=false, hidden=false, tintColor= null, bearingImage = null, puckBearingSource =null)
+    private var mState = State(showUserLocation=false, followUserLocation=false, tintColor= null, bearingImage = null, puckBearingSource =null)
 
     private var mLocationManager: LocationManager = LocationManager.getInstance(context)
 
@@ -34,13 +34,15 @@ class LocationComponentManager(mapView: RCTMGLMapView, context: Context) {
     data class State(
         val showUserLocation: Boolean,
         val followUserLocation: Boolean,
-        val hidden: Boolean, // in case it isn't native
         val tintColor: Int?, // tint of location puck
         var bearingImage: Drawable?, // bearing image (background)
         var puckBearingSource: PuckBearingSource? // bearing source
     ) {
         val enabled: Boolean
             get() = showUserLocation || followUserLocation
+
+        val hidden: Boolean
+            get() = followUserLocation && !showUserLocation
     }
 
     fun update(newStateCallback: (currentState: State) -> State) {

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/styles/layers/RCTLayer.kt

@@ -246,8 +246,13 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     }
 
     override fun removeFromMap(mapView: RCTMGLMapView) {
-        if (style != null) {
-            style!!.removeStyleLayer(mLayer!!.layerId)
+        style?.let {
+            val layer = mLayer
+            if (layer != null) {
+                it.removeStyleLayer(layer.layerId)
+            } else {
+                Logger.e("RCTLayer","mLayer is null on removal layer from map")
+            }
         }
         super.removeFromMap(mapView)
     }

package/index.d.ts

@@ -1,13 +1,7 @@
 declare module 'react-native-mapbox-gl__maps';
 
 import { Component, FC, ReactNode } from 'react';
-import {
-  ViewProps,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-  ImageSourcePropType,
-} from 'react-native';
+import { ViewProps, ViewStyle, StyleProp, TextStyle } from 'react-native';
 import ReactNative from 'react-native';
 import {
   Geometry,
@@ -70,6 +64,8 @@ import {
   ShapeSource as _ShapeSource,
   Props as _ShapeSourceProps,
 } from './javascript/components/ShapeSource';
+import _VectorSource from './javascript/components/VectorSource';
+import _Light from './javascript/components/Light';
 import type {
   MapboxGLEvent as _MapboxGLEvent,
   AnimatedPoint as _AnimatedPoint,
@@ -80,6 +76,13 @@ import type {
   Location as _Location,
   LocationManager,
 } from './javascript/modules/location/locationManager';
+import type { OnPressEvent as _OnPressEvent } from './javascript/types/OnPressEvent';
+import {
+  type LogLevel,
+  type LogObject,
+  type LogCallback,
+  Logger as _Logger,
+} from './javascript/utils/Logger';
 
 // prettier-ignore
 type ExpressionName =
@@ -130,17 +133,7 @@ type Visibility = 'visible' | 'none';
 type Alignment = 'map' | 'viewport';
 type AutoAlignment = Alignment | 'auto';
 
-export type OnPressEvent = {
-  features: Array<GeoJSON.Feature>;
-  coordinates: {
-    latitude: number;
-    longitude: number;
-  };
-  point: {
-    x: number;
-    y: number;
-  };
-};
+export type OnPressEvent = _OnPressEvent;
 
 declare namespace MapboxGL {
   function removeCustomHeader(headerName: string): void;
@@ -156,6 +149,8 @@ declare namespace MapboxGL {
   const getAnnotationsLayerID = _getAnnotationsLayerID;
   type getAnnotationsLayerID = _getAnnotationsLayerID;
 
+  const Logger = _Logger;
+  type Logger = _Logger;
   const Camera = _Camera;
   type Camera = _Camera;
   type CameraStop = _CameraStop;
@@ -334,7 +329,7 @@ declare namespace MapboxGL {
 
   class UserLocation extends Component<UserLocationProps> {}
 
-  class Light extends Component<LightProps> {}
+  const Light = _Light;
 
   class Callout extends Component<CalloutProps> {}
   type Style = FC<StyleProps>;
@@ -342,7 +337,8 @@ declare namespace MapboxGL {
   /**
    * Sources
    */
-  class VectorSource extends Component<VectorSourceProps> {}
+  type VectorSource = typeof _VectorSource;
+  const VectorSource = _VectorSource;
   class RasterSource extends Component<RasterSourceProps> {}
   class RasterDemSource extends Component<RasterSourceProps> {}
 
@@ -643,14 +639,6 @@ export interface TileSourceProps extends ViewProps {
   maxZoomLevel?: number;
 }
 
-export interface VectorSourceProps extends TileSourceProps {
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
 export interface RasterSourceProps extends TileSourceProps {
   tileSize?: number;
 }
@@ -667,35 +655,6 @@ export interface LayerBaseProps<T = object> extends Omit<ViewProps, 'style'> {
   maxZoomLevel?: number;
 }
 
-export interface BackgroundLayerProps extends LayerBaseProps {
-  style?: StyleProp<BackgroundLayerStyle>;
-}
-
-export interface CircleLayerProps extends LayerBaseProps {
-  style?: StyleProp<CircleLayerStyle>;
-}
-
-export interface FillExtrusionLayerProps extends Omit<LayerBaseProps, 'id'> {
-  id: string;
-  style?: StyleProp<FillExtrusionLayerStyle>;
-}
-
-export interface FillLayerProps extends LayerBaseProps {
-  style?: StyleProp<FillLayerStyle>;
-}
-
-export interface LineLayerProps extends LayerBaseProps {
-  style?: StyleProp<LineLayerStyle>;
-}
-
-export interface RasterLayerProps extends LayerBaseProps {
-  style?: StyleProp<RasterLayerStyle>;
-}
-
-export interface HeatmapLayerProps extends LayerBaseProps {
-  style?: StyleProp<HeatmapLayerStyle>;
-}
-
 export interface ImageSourceProps extends ViewProps {
   id: string;
   url?: number | string;
@@ -732,21 +691,7 @@ export interface SkyLayerProps extends LayerBaseProps {
   style?: StyleProp<SkyLayerStyle>;
 }
 
-// Logger class
-type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
-
-interface LogObject {
-  level: LogLevel;
-  message: string;
-  tag: string;
-}
-
-type LogCallback = (object: LogObject) => void;
-
-export class Logger {
-  public static setLogCallback: (cb: LogCallback) => boolean;
-  public static setLogLevel: (level: LogLevel) => void;
-}
+export import Logger = MapboxGL.Logger;
 
 export import MapView = MapboxGL.MapView;
 
@@ -790,6 +735,8 @@ export import AnimatedMapPoint = MapboxGL.AnimatedPoint;
 export import AnimatedShape = MapboxGL.AnimatedShape;
 export import Images = MapboxGL.Images;
 export import Image = MapboxGL.Image;
+export import Light = MapboxGL.Light;
+export import VectorSource = MapboxGL.VectorSource;
 
 export const { offlineManager } = MapboxGL;
 

package/javascript/components/AbstractLayer.tsx

@@ -5,8 +5,9 @@ import { NativeMethods, processColor } from 'react-native';
 import { getFilter } from '../utils/filterUtils';
 import { AllLayerStyleProps, FilterExpression } from '../utils/MapboxStyles';
 import { transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
-type PropsBase = {
+type PropsBase = BaseProps & {
   id: string;
   sourceID?: string;
   minZoomLevel?: number;

package/javascript/components/AbstractSource.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { NativeMethods } from 'react-native';
 
+import type { BaseProps } from '../types/BaseProps';
+
 class AbstractSource<
   PropsType,
   NativePropsType extends object,
-> extends React.PureComponent<PropsType> {
+> extends React.PureComponent<PropsType & BaseProps> {
   _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
 
   setNativeProps(props: NativePropsType) {

package/javascript/components/Atmosphere.tsx

@@ -3,10 +3,11 @@ import { requireNativeComponent } from 'react-native';
 
 import type { AtmosphereLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLAtmosphere';
 
-type Props = {
+type Props = BaseProps & {
   style: AtmosphereLayerStyleProps;
 };
 

package/javascript/components/Camera.tsx

@@ -11,6 +11,7 @@ import { NativeModules, requireNativeComponent } from 'react-native';
 
 import { MapboxGLEvent } from '../types';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
+import { type NativeRefType } from '../utils/nativeRef';
 
 const NativeModule = NativeModules.MGLModule;
 
@@ -240,8 +241,9 @@ export const Camera = memo(
         onUserTrackingModeChange,
       } = props;
 
-      // @ts-expect-error This avoids a type/value mismatch.
-      const nativeCamera = useRef<RCTMGLCamera>(null);
+      const nativeCamera = useRef<typeof RCTMGLCamera>(
+        null,
+      ) as NativeRefType<NativeCameraProps>;
 
       const buildNativeStop = useCallback(
         (
@@ -352,14 +354,14 @@ export const Camera = memo(
             if (_nativeStop) {
               _nativeStops = [..._nativeStops, _nativeStop];
             }
-            nativeCamera.current.setNativeProps({
+            nativeCamera.current?.setNativeProps({
               stop: { stops: _nativeStops },
             });
           }
         } else if (config.type === 'CameraStop') {
           const _nativeStop = buildNativeStop(config);
           if (_nativeStop) {
-            nativeCamera.current.setNativeProps({ stop: _nativeStop });
+            nativeCamera.current?.setNativeProps({ stop: _nativeStop });
           }
         }
       };

package/javascript/components/Images.tsx

@@ -69,7 +69,7 @@ interface Props {
 /**
  * Images defines the images used in Symbol etc. layers.
  */
-class Images extends React.Component<Props> {
+class Images extends React.PureComponent<Props> {
   static NATIVE_ASSETS_KEY = 'assets';
 
   _getImages() {

package/javascript/components/Light.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { requireNativeComponent } from 'react-native';
+
+import { LightLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+import { type BaseProps } from '../types/BaseProps';
+import { transformStyle } from '../utils/StyleValue';
+import nativeRef from '../utils/nativeRef';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLLight';
+
+type Props = BaseProps & {
+  /**
+   * Customizable style attributes
+   */
+  style: LightLayerStyleProps;
+};
+
+type NativeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+interface LightMethods {
+  setNativeProps(props: { [key: string]: unknown }): void;
+}
+
+/**
+ * Light represents the light source for extruded geometries
+ */
+function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
+  const { style, ...propWithoutStyle } = props;
+
+  const nativeLightRef = nativeRef(useRef<typeof RCTMGLLight>(null));
+
+  useImperativeHandle(ref, () => ({
+    setNativeProps(_props: { [key: string]: unknown }) {
+      let propsToPass = _props;
+      if (_props.style) {
+        propsToPass = {
+          ..._props,
+          reactStyle: transformStyle(_props.style),
+        };
+      }
+      nativeLightRef.current?.setNativeProps(propsToPass);
+    },
+  }));
+
+  return (
+    <RCTMGLLight
+      ref={nativeLightRef}
+      testID="rctmglLight"
+      {...propWithoutStyle}
+      reactStyle={transformStyle(style)}
+    />
+  );
+}
+
+const RCTMGLLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default memo(forwardRef(Light));

package/javascript/components/PointAnnotation.tsx

@@ -9,6 +9,7 @@ import { type Feature } from 'geojson';
 
 import { toJSONString, isFunction } from '../utils';
 import { makePoint } from '../utils/geoUtils';
+import { type BaseProps } from '../types/BaseProps';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
 
@@ -26,7 +27,7 @@ type FeaturePayload = {
   feature: Feature;
 };
 
-type Props = {
+type Props = BaseProps & {
   /**
    * A string that uniquely identifies the annotation
    */

package/javascript/components/ShapeSource.tsx

@@ -14,6 +14,7 @@ import {
   isAndroid,
 } from '../utils';
 import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+import { OnPressEvent } from '../types/OnPressEvent';
 
 import AbstractSource from './AbstractSource';
 import NativeBridgeComponent from './NativeBridgeComponent';
@@ -22,17 +23,6 @@ const MapboxGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
 
-export type OnPressEvent = {
-  features: Array<GeoJSON.Feature>;
-  coordinates: {
-    latitude: number;
-    longitude: number;
-  };
-  point: {
-    x: number;
-    y: number;
-  };
-};
 type OnPressEventDeprecated = OnPressEvent & {
   nativeEvent?: OnPressEvent;
 };

package/javascript/components/Terrain.tsx

@@ -3,10 +3,11 @@ import { HostComponent, requireNativeComponent } from 'react-native';
 
 import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
+import type { BaseProps } from '../types/BaseProps';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
 
-type Props = {
+type Props = BaseProps & {
   /**
    * Name of a source of raster_dem type to be used for terrain elevation.
    */

package/javascript/components/VectorSource.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from 'react-native';
+
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from '../utils';
+import { getFilter } from '../utils/filterUtils';
+import { copyPropertiesAsDeprecated } from '../utils/deprecation';
+import { OnPressEvent } from '../types/OnPressEvent';
+
+import AbstractSource from './AbstractSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+
+interface Props {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+
+  /**
+   * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
+   */
+  url?: string;
+
+  /**
+   * An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
+   * Example: https://example.com/vector-tiles/{z}/{x}/{y}.pbf
+   */
+  tileUrlTemplates?: string[];
+
+  /**
+   * An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * maxZoomLevel, if specified. The default value for this option is 0.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * An unsigned integer that specifies the maximum zoom level at which to display tiles from the source.
+   * The value should be between 0 and 22, inclusive, and less than
+   * minZoomLevel, if specified. The default value for this option is 22.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Influences the y direction of the tile coordinates. (tms inverts y axis)
+   */
+  tms?: boolean;
+
+  /**
+   * An HTML or literal text string defining the buttons to be displayed in an action sheet when the
+   * source is part of a map view’s style and the map view’s attribution button is pressed.
+   */
+  attribution?: string;
+
+  /**
+   * Source press listener, gets called when a user presses one of the children layers only
+   * if that layer has a higher z-index than another source layers
+   *
+   * @param {Object} event
+   * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
+   * @param {Object} event.coordinates - the coordinates of the click
+   * @param {Object} event.point - the point of the click
+   */
+  onPress?: (event: OnPressEvent) => void;
+
+  /**
+   * Overrides the default touch hitbox(44x44 pixels) for the source layers
+   */
+  hitbox?: {
+    /**
+     * `width` of hitbox
+     */
+    width: number;
+    /**
+     * `height` of hitbox
+     */
+    height: number;
+  };
+
+  children: React.ReactElement | React.ReactElement[];
+}
+
+//interface NativeProps extends Omit<Props, 'children'> {}
+type NativeProps = Props; // Omit<Props, 'children'>;
+/**
+ * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
+ * The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.
+ */
+class VectorSource extends NativeBridgeComponent(
+  AbstractSource<Props, NativeProps>,
+  NATIVE_MODULE_NAME,
+) {
+  static defaultProps = {
+    id: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  _setNativeRef(
+    nativeRef: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ) {
+    if (nativeRef) {
+      this.setNativeRef(nativeRef);
+      // this._nativeRef = nativeRef;
+      super._runPendingNativeCommands(nativeRef);
+    }
+  }
+
+  /**
+   * Returns all features that match the query parameters regardless of whether or not the feature is
+   * currently rendered on the map. The domain of the query includes all currently-loaded vector tiles
+   * and GeoJSON source tiles. This function does not check tiles outside of the visible viewport.
+   *
+   * @example
+   * vectorSource.features(['id1', 'id2'])
+   *
+   * @param  {Array=} layerIDs - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
+   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
+   * @return {FeatureCollection}
+   */
+  async features(layerIDs = [], filter = []) {
+    const res: { data: string } = await this._runNativeCommand(
+      'features',
+      this._nativeRef,
+      [layerIDs, getFilter(filter)],
+    );
+
+    if (isAndroid()) {
+      return JSON.parse(res.data);
+    }
+
+    return res.data;
+  }
+
+  onPress(
+    event: NativeSyntheticEvent<{
+      payload: OnPressEvent;
+    }>,
+  ) {
+    const {
+      nativeEvent: {
+        payload: { features, coordinates, point },
+      },
+    } = event;
+    let newEvent = {
+      features,
+      coordinates,
+      point,
+    };
+    newEvent = copyPropertiesAsDeprecated(
+      event,
+      newEvent,
+      (key) => {
+        console.warn(
+          `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
+        );
+      },
+      {
+        nativeEvent: (origNativeEvent: unknown) => ({
+          ...(origNativeEvent as OnPressEvent),
+          payload: features[0],
+        }),
+      },
+    );
+    const { onPress } = this.props;
+    if (onPress) {
+      onPress(newEvent);
+    }
+  }
+
+  render() {
+    const props = {
+      id: this.props.id,
+      url: this.props.url,
+      tileUrlTemplates: this.props.tileUrlTemplates,
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      tms: this.props.tms,
+      attribution: this.props.attribution,
+      hitbox: this.props.hitbox,
+      hasPressListener: isFunction(this.props.onPress),
+      onMapboxVectorSourcePress: this.onPress.bind(this),
+      onPress: undefined,
+      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
+    };
+    return (
+      <RCTMGLVectorSource ref={(r) => this._setNativeRef(r)} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLVectorSource>
+    );
+  }
+}
+
+const RCTMGLVectorSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default VectorSource;

package/javascript/modules/location/locationManager.ts

@@ -69,7 +69,7 @@ interface Coordinates {
 /**
  * LocationManager is a singleton, see `locationManager`
  */
-class LocationManager {
+export class LocationManager {
   _listeners: ((location: Location) => void)[];
   _lastKnownLocation: Location | null;
   _isListening: boolean;

package/javascript/types/BaseProps.ts

@@ -0,0 +1,3 @@
+export type BaseProps = {
+  testID?: string | undefined;
+};

package/javascript/types/OnPressEvent.ts

@@ -0,0 +1,11 @@
+export type OnPressEvent = {
+  features: Array<GeoJSON.Feature>;
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  };
+  point: {
+    x: number;
+    y: number;
+  };
+};