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

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,
@@ -26,7 +20,6 @@ import type {
   SymbolLayerStyleProps,
   CircleLayerStyleProps,
   FillExtrusionLayerStyleProps,
-  SkyLayerStyleProps,
   RasterLayerStyleProps,
   HeatmapLayerStyleProps,
   FillLayerStyleProps,
@@ -49,6 +42,7 @@ import {
 } from './javascript/components/Camera';
 import _Images from './javascript/components/Images';
 import _Image from './javascript/components/Image';
+import _MapView, { _MapState } from './javascript/components/MapView';
 import { MarkerView as _MarkerView } from './javascript/components/MarkerView';
 import { PointAnnotation as _PointAnnotation } from './javascript/components/PointAnnotation';
 import { Atmosphere as _Atmosphere } from './javascript/components/Atmosphere';
@@ -59,17 +53,24 @@ import {
 import _LineLayer, {
   Props as _LineLayerProps,
 } from './javascript/components/LineLayer';
+import _SkyLater from './javascript/components/SkyLayer';
 import { Props as _BackgroundLayerProps } from './javascript/components/BackgroundLayer';
 import { Props as _CircleLayerProps } from './javascript/components/CircleLayer';
 import { Props as _FillLayerProps } from './javascript/components/FillLayer';
 import { Props as _FillExtrusionLayerProps } from './javascript/components/FillExtrusionLayer';
 import { Props as _RasterLayerProps } from './javascript/components/RasterLayer';
 import { Props as _HeatmapLayerProps } from './javascript/components/HeatmapLayer';
-import { Props as _SkyLayerProps } from './javascript/components/SkyLayer';
+import _SkyLayer, {
+  Props as _SkyLayerProps,
+} from './javascript/components/SkyLayer';
 import {
   ShapeSource as _ShapeSource,
   Props as _ShapeSourceProps,
 } from './javascript/components/ShapeSource';
+import _RasterSource from './javascript/components/RasterSource';
+import _RasterDemSource from './javascript/components/RasterDemSource';
+import _VectorSource from './javascript/components/VectorSource';
+import _Light from './javascript/components/Light';
 import type {
   MapboxGLEvent as _MapboxGLEvent,
   AnimatedPoint as _AnimatedPoint,
@@ -80,67 +81,15 @@ 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 =
-  // Types
-  | 'array' | 'boolean' | 'collator' | 'format' | 'image' | 'literal' | 'number' | 'number-format' | 'object' | 'string'
-  | 'to-boolean' | 'to-color' | 'to-number' | 'to-string' | 'typeof'
-  // Feature data
-  | 'accumulated' | 'feature-state' | 'geometry-type' | 'id' | 'line-progress' | 'properties'
-  // Lookup
-  | 'at' | 'get' | 'has' | 'in' | 'index-of' | 'length' | 'slice'
-  // Decision
-  | '!' | '!=' | '<' | '<=' | '==' | '>' | '>=' | 'all' | 'any' | 'case' | 'match' | 'coalesce' | 'within'
-  // Ramps, scales, curves
-  | 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'step'
-  // Variable binding
-  | 'let' | 'var'
-  // String
-  | 'concat' | 'downcase' | 'is-supported-script' | 'resolved-locale' | 'upcase'
-  // Color
-  | 'rgb' | 'rgba' | 'to-rgba'
-  // Math
-  | '-' | '*' | '/' | '%' | '^' | '+' | 'abs' | 'acos' | 'asin' | 'atan' | 'ceil' | 'cos' | 'distance' | 'e'
-  | 'floor' | 'ln' | 'ln2' | 'log10' | 'log2' | 'max' | 'min' | 'pi' | 'round' | 'sin' | 'sqrt' | 'tan'
-  // Zoom, Heatmap
-  | 'zoom' | 'heatmap-density';
-
-type ExpressionField =
-  | string
-  | number
-  | boolean
-  | Expression
-  | ExpressionField[]
-  | { [key: string]: ExpressionField };
-
-export type Expression = [ExpressionName, ...ExpressionField[]];
-
-type Anchor =
-  | 'center'
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-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 +105,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;
@@ -172,8 +123,14 @@ declare namespace MapboxGL {
   const PointAnnotation = _PointAnnotation;
   const SymbolLayer = _SymbolLayer;
   const LineLayer = _LineLayer;
+  type LineLayer = _LineLayer;
   const ShapeSource = _ShapeSource;
   type ShapeSource = _ShapeSource;
+  const SkyLayer = _SkyLayer;
+  type SkyLayer = _SkyLayer;
+
+  const MapView = _MapView;
+  type MapView = _MapView;
 
   type MapboxGLEvent = _MapboxGLEvent;
   type UserTrackingMode = _UserTrackingMode;
@@ -295,56 +252,29 @@ declare namespace MapboxGL {
     // layers
     class FillLayer extends Component<_FillLayerProps> {}
     class FillExtrusionLayer extends Component<_FillExtrusionLayerProps> {}
-    class LineLayer extends Component<_LineLayerProps> {}
     class CircleLayer extends Component<_CircleLayerProps> {}
     class SymbolLayer extends Component<_SymbolLayerProps> {}
     class RasterLayer extends Component<_RasterLayerProps> {}
     class BackgroundLayer extends Component<_BackgroundLayerProps> {}
   }
 
-  /**
-   * Components
-   */
-  export class MapView extends Component<MapViewProps> {
-    getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
-    getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
-    getVisibleBounds(): Promise<GeoJSON.Position[]>;
-    queryRenderedFeaturesAtPoint(
-      coordinate: GeoJSON.Position,
-      filter?: Expression,
-      layerIds?: Array<string>,
-    ): Promise<GeoJSON.FeatureCollection | undefined>;
-    queryRenderedFeaturesInRect(
-      coordinate: GeoJSON.Position,
-      filter?: Expression,
-      layerIds?: Array<string>,
-    ): Promise<GeoJSON.FeatureCollection | undefined>;
-    takeSnap(writeToDisk?: boolean): Promise<string>;
-    getZoom(): Promise<number>;
-    getCenter(): Promise<GeoJSON.Position>;
-    showAttribution(): void;
-    setSourceVisibility(
-      visible: boolean,
-      sourceId: string,
-      sourceLayerId?: string,
-    ): void;
-  }
-
   type Padding = number | [number, number] | [number, number, number, number];
 
   class UserLocation extends Component<UserLocationProps> {}
 
-  class Light extends Component<LightProps> {}
+  const Light = _Light;
 
   class Callout extends Component<CalloutProps> {}
-  type Style = FC<StyleProps>;
 
   /**
    * Sources
    */
-  class VectorSource extends Component<VectorSourceProps> {}
-  class RasterSource extends Component<RasterSourceProps> {}
-  class RasterDemSource extends Component<RasterSourceProps> {}
+  type VectorSource = _VectorSource;
+  const VectorSource = _VectorSource;
+  type RasterSource = _RasterSource;
+  const RasterSource = _RasterSource;
+  type RasterDemSource = RasterDemSource;
+  const RasterDemSource = _RasterDemSource;
 
   /**
    * Layers
@@ -353,11 +283,11 @@ declare namespace MapboxGL {
   class CircleLayer extends Component<_CircleLayerProps> {}
   class FillExtrusionLayer extends Component<_FillExtrusionLayerProps> {}
   class FillLayer extends Component<_FillLayerProps> {}
-  class LineLayer extends Component<_LineLayerProps> {}
   class RasterLayer extends Component<_RasterLayerProps> {}
   class HeatmapLayer extends Component<_HeatmapLayerProps> {}
   class ImageSource extends Component<ImageSourceProps> {}
-  class SkyLayer extends Component<_SkyLayerProps> {}
+  type SkyLayer = _SkyLayer;
+  const SkyLayer = _SkyLayer;
 
   type Images = _Images;
   const Images = _Images;
@@ -458,99 +388,6 @@ declare namespace MapboxGL {
   }
 }
 
-export type OrnamentPosition =
-  | { top: number; left: number }
-  | { top: number; right: number }
-  | { bottom: number; left: number }
-  | { bottom: number; right: number };
-
-export interface RegionPayload {
-  zoomLevel: number;
-  heading: number;
-  animated: boolean;
-  isUserInteraction: boolean;
-  visibleBounds: GeoJSON.Position[];
-  pitch: number;
-}
-
-/**
- * v10 only - experimental
- */
-export interface MapState {
-  properties: {
-    center: GeoJSON.Position;
-    bounds: {
-      ne: GeoJSON.Position;
-      sw: GeoJSON.Position;
-    };
-    zoom: number;
-    heading: number;
-    pitch: number;
-  };
-  gestures: {
-    isGestureActive: boolean;
-    isAnimatingFromGesture: boolean;
-  };
-}
-
-export interface MapViewProps extends ViewProps {
-  animated?: boolean;
-  userTrackingMode?: MapboxGL.UserTrackingModes;
-  contentInset?: Array<number>;
-  projection?: 'mercator' | 'globe';
-  style?: StyleProp<ViewStyle>;
-  styleURL?: string;
-  styleJSON?: string;
-  preferredFramesPerSecond?: number;
-  localizeLabels?: boolean;
-  zoomEnabled?: boolean;
-  scrollEnabled?: boolean;
-  pitchEnabled?: boolean;
-  rotateEnabled?: boolean;
-  attributionEnabled?: boolean;
-  attributionPosition?: OrnamentPosition;
-  logoEnabled?: boolean;
-  logoPosition?: OrnamentPosition;
-  compassEnabled?: boolean;
-  compassFadeWhenNorth?: boolean;
-  compassPosition?: OrnamentPosition;
-  compassViewPosition?: number;
-  compassViewMargins?: Point;
-  compassImage?: string;
-  scaleBarEnabled?: boolean;
-  scaleBarPosition?: OrnamentPosition;
-  surfaceView?: boolean;
-  regionWillChangeDebounceTime?: number;
-  regionDidChangeDebounceTime?: number;
-  tintColor?: string;
-
-  onPress?: (feature: GeoJSON.Feature) => void;
-  onLongPress?: (feature: GeoJSON.Feature) => void;
-  onRegionWillChange?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onRegionIsChanging?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onRegionDidChange?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onCameraChanged?: (state: MapState) => void;
-  onMapIdle?: (state: MapState) => void;
-  onUserLocationUpdate?: (feature: Location) => void;
-  onWillStartLoadingMap?: () => void;
-  onDidFinishLoadingMap?: () => void;
-  onDidFailLoadingMap?: () => void;
-  onWillStartRenderingFrame?: () => void;
-  onDidFinishRenderingFrame?: () => void;
-  onDidFinishRenderingFrameFully?: () => void;
-  onWillStartRenderingMap?: () => void;
-  onDidFinishRenderingMap?: () => void;
-  onDidFinishRenderingMapFully?: () => void;
-  onDidFinishLoadingStyle?: () => void;
-  onUserTrackingModeChange?: () => void;
-}
-
 export interface UserLocationProps {
   androidRenderMode?: 'normal' | 'compass' | 'gps';
   animated?: boolean;
@@ -564,20 +401,6 @@ export interface UserLocationProps {
   visible?: boolean;
 }
 
-export type WithExpression<T> = {
-  [P in keyof T]: T[P] | Expression;
-};
-
-export interface LightStyle {
-  anchor?: Alignment | Expression;
-  position?: GeoJSON.Position | Expression;
-  positionTransition?: Transition | Expression;
-  color?: string | Expression;
-  colorTransition?: Transition | Expression;
-  intensity?: number | Expression;
-  intensityTransition?: Transition | Expression;
-}
-
 export interface Transition {
   duration: number;
   delay: number;
@@ -597,17 +420,6 @@ export type LineLayerStyle = LineLayerStyleProps;
 
 export type RasterLayerStyle = RasterLayerStyleProps;
 
-export type TextVariableAnchorValues =
-  | 'center'
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-
 export type SymbolLayerStyle = SymbolLayerStyleProps;
 export type LineLayerStyle = LineLayerStyleProps;
 
@@ -618,93 +430,13 @@ export interface Point {
   y: number;
 }
 
-export interface LightProps extends Omit<ViewProps, 'style'> {
-  style?: LightStyle;
-}
-
-export interface StyleProps {
-  json: any;
-}
-
 export interface CalloutProps extends Omit<ViewProps, 'style'> {
   title?: string;
-  style?: StyleProp<WithExpression<ViewStyle>>;
-  containerStyle?: StyleProp<WithExpression<ViewStyle>>;
-  contentStyle?: StyleProp<WithExpression<ViewStyle>>;
-  tipStyle?: StyleProp<WithExpression<ViewStyle>>;
-  textStyle?: StyleProp<WithExpression<TextStyle>>;
-}
-
-export interface TileSourceProps extends ViewProps {
-  id: string;
-  url?: string;
-  tileUrlTemplates?: Array<string>;
-  minZoomLevel?: number;
-  maxZoomLevel?: number;
-}
-
-export interface VectorSourceProps extends TileSourceProps {
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
-export interface RasterSourceProps extends TileSourceProps {
-  tileSize?: number;
-}
-
-export interface LayerBaseProps<T = object> extends Omit<ViewProps, 'style'> {
-  id: string;
-  sourceID?: string;
-  sourceLayerID?: string;
-  aboveLayerID?: string;
-  belowLayerID?: string;
-  layerIndex?: number;
-  filter?: Expression;
-  minZoomLevel?: number;
-  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;
-  coordinates: [
-    GeoJSON.Position,
-    GeoJSON.Position,
-    GeoJSON.Position,
-    GeoJSON.Position,
-  ];
+  style?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  tipStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
 }
 
 export interface OfflineCreatePackOptions {
@@ -727,26 +459,7 @@ export interface SnapshotOptions {
   writeToDisk?: boolean;
 }
 
-export interface SkyLayerProps extends LayerBaseProps {
-  id: string;
-  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 +503,11 @@ 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 import MapView = MapboxGL.MapView;
+export import SkyLayer = MapboxGL.SkyLayer;
+export import MapState = _MapState;
 
 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/ImageSource.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { requireNativeComponent } from 'react-native';
+
+import {
+  cloneReactChildrenWithProps,
+  isNumber,
+  resolveImagePath,
+} from '../utils';
+import { BaseProps } from '../types/BaseProps';
+
+import AbstractSource from './AbstractSource';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+
+type Position = [number, number];
+
+type Props = BaseProps & {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL to the source image.
+   * Gifs are currently not supported.
+   */
+  url?: number | string;
+
+  /**
+   * The top left, top right, bottom right, and bottom left coordinates for the image.
+   */
+  coordinates: [Position, Position, Position, Position];
+
+  children?: React.ReactElement | React.ReactElement[];
+};
+
+type NativeProps = Props;
+
+/**
+ * ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
+ * The georeferenced image scales and rotates as the user zooms and rotates the map
+ */
+class ImageSource extends AbstractSource<Props, NativeProps> {
+  _getURL(): string | undefined {
+    const { url } = this.props;
+
+    if (isNumber(url)) {
+      return resolveImagePath(url);
+    } else {
+      return url;
+    }
+  }
+
+  render() {
+    if (
+      !this.props.url ||
+      !this.props.coordinates ||
+      !this.props.coordinates.length
+    ) {
+      return null;
+    }
+
+    const props = {
+      ...this.props,
+      url: this._getURL(),
+    };
+
+    return (
+      <RCTMGLImageSource ref={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLImageSource>
+    );
+  }
+}
+
+const RCTMGLImageSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default ImageSource;

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() {