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

package/javascript/components/{Style.js → Style.tsx}

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+
+import { FilterExpression } from '../utils/MapboxStyles';
 
 import CircleLayer from './CircleLayer';
 import RasterLayer from './RasterLayer';
@@ -14,7 +15,7 @@ import RasterSource from './RasterSource';
 import ImageSource from './ImageSource';
 import { ShapeSource } from './ShapeSource';
 
-function toCamelCase(s) {
+function toCamelCase(s: string): string {
   return s.replace(/([-_][a-z])/gi, ($1) => {
     return $1.toUpperCase().replace('-', '').replace('_', '');
   });
@@ -22,11 +23,13 @@ function toCamelCase(s) {
 
 // Patches the Mapbox Style Specification keys into the style props attributes:
 // icon-allow-overlap -> iconAllowOverlap
-function toCamelCaseKeys(oldObj) {
+function toCamelCaseKeys(oldObj?: { [key: string]: unknown }): {
+  [key: string]: unknown;
+} {
   if (!oldObj) {
     return {};
   }
-  const newObj = {};
+  const newObj: { [key: string]: unknown } = {};
   Object.keys(oldObj).forEach((key) => {
     const value = oldObj[key];
     if (key.includes('-')) {
@@ -38,7 +41,7 @@ function toCamelCaseKeys(oldObj) {
   return newObj;
 }
 
-function getLayerComponentType(layer) {
+function getLayerComponentType(layer: { type: string }) {
   const { type } = layer;
 
   switch (type) {
@@ -65,8 +68,10 @@ function getLayerComponentType(layer) {
   return null;
 }
 
-function asLayerComponent(layer) {
-  const LayerComponent = getLayerComponentType(layer);
+function asLayerComponent(layer: MapboxJSONLayer) {
+  type GenericProps = { key?: string; id: string };
+  const LayerComponent: typeof React.PureComponent<GenericProps> | null =
+    getLayerComponentType(layer) as typeof React.PureComponent<GenericProps>;
   if (!LayerComponent) {
     return null;
   }
@@ -76,7 +81,14 @@ function asLayerComponent(layer) {
     ...toCamelCaseKeys(layer.layout),
   };
 
-  const layerProps = {};
+  const layerProps: {
+    sourceID?: string;
+    sourceLayerID?: string;
+    minZoomLevel?: number;
+    maxZoomLevel?: number;
+    filter?: FilterExpression;
+    style?: object;
+  } = {};
 
   if (layer.source) {
     layerProps.sourceID = layer.source;
@@ -100,8 +112,17 @@ function asLayerComponent(layer) {
   return <LayerComponent key={layer.id} id={layer.id} {...layerProps} />;
 }
 
-function getTileSourceProps(source) {
-  const sourceProps = {};
+type SourceProps = {
+  url?: string;
+  tileUrlTemplates?: string[];
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  attribution?: string;
+  tms?: boolean;
+};
+
+function getTileSourceProps(source: MapboxJSONSource): SourceProps {
+  const sourceProps: SourceProps = {};
   if (source.url) {
     sourceProps.url = source.url;
   }
@@ -123,20 +144,22 @@ function getTileSourceProps(source) {
   return sourceProps;
 }
 
-function getVectorSource(id, source) {
+function getVectorSource(id: string, source: MapboxJSONSource) {
   const sourceProps = { ...getTileSourceProps(source) };
   return <VectorSource key={id} id={id} {...sourceProps} />;
 }
 
-function getRasterSource(id, source) {
-  const sourceProps = { ...getTileSourceProps(source) };
+function getRasterSource(id: string, source: MapboxJSONSource) {
+  const sourceProps: { tileSize?: number } & SourceProps = {
+    ...getTileSourceProps(source),
+  };
   if (source.tileSize) {
     sourceProps.tileSize = source.tileSize;
   }
   return <RasterSource key={id} id={id} {...sourceProps} />;
 }
 
-function getImageSource(id, source) {
+function getImageSource(id: string, source: MapboxJSONSource) {
   const sourceProps = {
     url: source.url,
     coordinates: source.coordinates,
@@ -144,12 +167,24 @@ function getImageSource(id, source) {
   return <ImageSource key={id} id={id} {...sourceProps} />;
 }
 
-function getShapeSource(id, source) {
-  const sourceProps = {};
+type ShapeShourceShape = typeof ShapeSource.prototype.props['shape'];
+
+function getShapeSource(id: string, source: MapboxJSONSource) {
+  const sourceProps: {
+    url?: string;
+    shape?: ShapeShourceShape;
+    cluster?: boolean;
+    clusterRadius?: number;
+    clusterMaxZoomLevel?: number;
+    clusterProperties?: object;
+    buffer?: number;
+    tolerance?: number;
+    lineMetrics?: boolean;
+  } & SourceProps = {};
   if (source.data && typeof source.data === 'string') {
     sourceProps.url = source.data;
   } else if (source.data && typeof source.data === 'object') {
-    sourceProps.shape = source.data;
+    sourceProps.shape = source.data as ShapeShourceShape;
   }
   if (source.cluster !== undefined) {
     sourceProps.cluster = source.cluster;
@@ -178,7 +213,7 @@ function getShapeSource(id, source) {
   return <ShapeSource key={id} id={id} {...sourceProps} />;
 }
 
-function asSourceComponent(id, source) {
+function asSourceComponent(id: string, source: MapboxJSONSource) {
   switch (source.type) {
     case 'vector':
       return getVectorSource(id, source);
@@ -195,26 +230,79 @@ function asSourceComponent(id, source) {
   return null;
 }
 
+type MapboxJSONLayer = {
+  type: string;
+  id: string;
+  paint?: { [k: string]: unknown };
+  layout?: { [k: string]: unknown };
+  source?: string;
+  minzoom?: number;
+  maxzoom?: number;
+  filter?: FilterExpression;
+  style?: object;
+  ['source-layer']: string;
+};
+
+type MapboxJSONSource = {
+  type: string;
+  url?: string;
+  tiles?: string[];
+  minzoom?: number;
+  maxzoom?: number;
+  attribution?: string;
+  scheme?: string;
+  tileSize?: number;
+  coordinates?: [
+    [number, number],
+    [number, number],
+    [number, number],
+    [number, number],
+  ];
+  data?: string | object;
+
+  buffer: number;
+  cluster?: boolean;
+  clusterRadius?: number;
+  clusterMaxZoom?: number;
+  clusterProperties?: object;
+  tolerance?: number;
+  lineMetrics?: boolean;
+};
+
+type MapboxJSON = {
+  layers?: MapboxJSONLayer[];
+  sources?: { [key: string]: MapboxJSONSource };
+};
+
+type Props = {
+  /**
+   * A JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON.
+   */
+  json: MapboxJSON | URL;
+};
+
 /**
  * Style is a component that automatically adds sources / layers to the map using Mapbox GL Style Spec.
  * Only [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources) & [`layers`](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) are supported.
  * Other fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will be mentioned under https://github.com/rnmapbox/maps/tree/main/docs.
  */
-const Style = (props) => {
+const Style = (props: Props) => {
   const [fetchedJson, setFetchedJson] = useState({});
-  const json = typeof props.json === 'object' ? props.json : fetchedJson;
+  const json: MapboxJSON =
+    typeof props.json === 'object' ? props.json : fetchedJson;
 
   // Fetch style when props.json is a URL
   useEffect(() => {
     const abortController = new AbortController();
-    const fetchStyleJson = async () => {
+    const fetchStyleJson = async (json: string) => {
       try {
-        const response = await fetch(props.json, {
+        const response = await fetch(json, {
           signal: abortController.signal,
         });
         const responseJson = await response.json();
         setFetchedJson(responseJson);
-      } catch (e) {
+      } catch (error: unknown) {
+        const e = error as { name?: string };
         if (e.name === 'AbortError') {
           return;
         }
@@ -222,7 +310,7 @@ const Style = (props) => {
       }
     };
     if (typeof props.json === 'string') {
-      fetchStyleJson();
+      fetchStyleJson(props.json);
     }
     return function cleanup() {
       abortController.abort();
@@ -238,14 +326,15 @@ const Style = (props) => {
   }, [json.layers]);
 
   // Extract source components from json
+  const { sources } = json;
   const sourceComponents = useMemo(() => {
-    if (!json.sources || !Object.keys(json.sources)) {
+    if (!sources || !Object.keys(sources)) {
       return [];
     }
-    return Object.keys(json.sources)
-      .map((id) => asSourceComponent(id, json.sources[id]))
+    return Object.keys(sources)
+      .map((id) => asSourceComponent(id, sources[id]))
       .filter((x) => !!x);
-  }, [json.sources]);
+  }, [sources]);
 
   return (
     <>
@@ -255,11 +344,4 @@ const Style = (props) => {
   );
 };
 
-Style.propTypes = {
-  /**
-   * A JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON.
-   */
-  json: PropTypes.any,
-};
-
 export default Style;

package/javascript/components/SymbolLayer.tsx

@@ -12,10 +12,15 @@ export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/Terrain.tsx

@@ -11,7 +11,7 @@ type Props = BaseProps & {
   /**
    * Name of a source of raster_dem type to be used for terrain elevation.
    */
-  sourceID: string;
+  sourceID?: string;
 
   /**
    * Deprecated, use exaggeration in style instead
@@ -21,7 +21,11 @@ type Props = BaseProps & {
   /**
    * Customizable style attributes
    */
-  style: TerrainLayerStyleProps;
+  style?: TerrainLayerStyleProps;
+};
+
+type NativeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
 };
 
 export const Terrain = memo((props: Props) => {
@@ -46,8 +50,5 @@ export const Terrain = memo((props: Props) => {
   return <RCTMGLTerrain {...baseProps} />;
 });
 
-const RCTMGLTerrain: HostComponent<{
-  sourceID: string;
-  reactStyle?: { [key: string]: StyleValue };
-  style?: undefined;
-}> = requireNativeComponent(NATIVE_MODULE_NAME);
+const RCTMGLTerrain: HostComponent<NativeProps> =
+  requireNativeComponent(NATIVE_MODULE_NAME);

package/javascript/components/{UserLocation.js → UserLocation.tsx}

@@ -1,18 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactElement } from 'react';
 
 import locationManager from '../modules/location/locationManager';
+import { type Location } from '../modules/location/locationManager';
+import { CircleLayerStyle } from '../Mapbox';
 
-import Annotation from './annotations/Annotation';
+import Annotation from './Annotation';
 import CircleLayer from './CircleLayer';
 import HeadingIndicator from './HeadingIndicator';
 import NativeUserLocation from './NativeUserLocation';
 
 const mapboxBlue = 'rgba(51, 181, 229, 100)';
 
-const layerStyles = {
+const layerStyles: Record<'normal', Record<string, CircleLayerStyle>> = {
   normal: {
-    pluse: {
+    pulse: {
       circleRadius: 15,
       circleColor: mapboxBlue,
       circleOpacity: 0.2,
@@ -31,11 +32,14 @@ const layerStyles = {
   },
 };
 
-export const normalIcon = (showsUserHeadingIndicator, heading) => [
+const normalIcon = (
+  showsUserHeadingIndicator?: boolean,
+  heading?: number | null,
+): ReactElement[] => [
   <CircleLayer
-    key="mapboxUserLocationPluseCircle"
-    id="mapboxUserLocationPluseCircle"
-    style={layerStyles.normal.pluse}
+    key="mapboxUserLocationPulseCircle"
+    id="mapboxUserLocationPulseCircle"
+    style={layerStyles.normal.pulse}
   />,
   <CircleLayer
     key="mapboxUserLocationWhiteCircle"
@@ -43,93 +47,98 @@ export const normalIcon = (showsUserHeadingIndicator, heading) => [
     style={layerStyles.normal.background}
   />,
   <CircleLayer
-    key="mapboxUserLocationBlueCicle"
-    id="mapboxUserLocationBlueCicle"
+    key="mapboxUserLocationBlueCircle"
+    id="mapboxUserLocationBlueCircle"
     aboveLayerID="mapboxUserLocationWhiteCircle"
     style={layerStyles.normal.foreground}
   />,
-  ...(showsUserHeadingIndicator && heading !== null
-    ? [HeadingIndicator({ heading })]
+  ...(showsUserHeadingIndicator && typeof heading === 'number'
+    ? [HeadingIndicator({ heading, key: 'mapboxUserLocationHeadingIndicator' })]
     : []),
 ];
 
-class UserLocation extends React.Component {
-  static propTypes = {
-    /**
-     * Whether location icon is animated between updates
-     */
-    animated: PropTypes.bool,
-
-    /**
-     * Which render mode to use.
-     * Can either be `normal` or `native`
-     */
-    renderMode: PropTypes.oneOf(['normal', 'native']),
-
-    /**
-     * native/android only render mode
-     *
-     *  - normal: just a circle
-     *  - compass: triangle with heading
-     *  - gps: large arrow
-     *
-     * @platform android
-     */
-    androidRenderMode: PropTypes.oneOf(['normal', 'compass', 'gps']),
-
-    /**
-     * Whether location icon is visible
-     */
-    visible: PropTypes.bool,
-
-    /**
-     * Callback that is triggered on location icon press
-     */
-    onPress: PropTypes.func,
-
-    /**
-     * Callback that is triggered on location update
-     */
-    onUpdate: PropTypes.func,
-
-    /**
-     * Show or hide small arrow which indicates direction the device is pointing relative to north.
-     */
-    showsUserHeadingIndicator: PropTypes.bool,
-
-    /**
-     * Request the always location permission, and listen to the location even when the app is in background
-     *
-     * @platform ios
-     */
-    requestsAlwaysUse: PropTypes.bool,
-
-    /**
-     * Minimum amount of movement before GPS location is updated in meters
-     */
-    minDisplacement: PropTypes.number,
-
-    /**
-     * Custom location icon of type mapbox-gl-native components
-     */
-    children: PropTypes.any,
-  };
+export enum UserLocationRenderMode {
+  Native = 'native',
+  Normal = 'normal',
+}
+
+type Props = {
+  /**
+   * native/android only render mode
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @platform android
+   */
+  androidRenderMode?: 'normal' | 'compass' | 'gps';
+
+  /**
+   * Whether location icon is animated between updates
+   */
+  animated?: boolean;
+
+  /**
+   * Custom location icon of type mapbox-gl-native components
+   */
+  children?: ReactElement;
+
+  /**
+   * Minimum amount of movement before GPS location is updated in meters
+   */
+  minDisplacement?: number;
+
+  /**
+   * Callback that is triggered on location icon press
+   */
+  onPress?: () => void;
+
+  /**
+   * Callback that is triggered on location update
+   */
+  onUpdate?: (location: Location) => void;
+
+  /**
+   * Which render mode to use.
+   */
+  renderMode?: UserLocationRenderMode;
+
+  /**
+   * Request the always location permission, and listen to the location even when the app is in background
+   *
+   * @platform ios
+   */
+  requestsAlwaysUse?: boolean;
+
+  /**
+   * Show or hide small arrow which indicates direction the device is pointing relative to north.
+   */
+  showsUserHeadingIndicator?: boolean;
 
+  /**
+   * Whether location icon is visible
+   */
+  visible?: boolean;
+};
+
+type UserLocationState = {
+  shouldShowUserLocation: false;
+  coordinates: number[] | null;
+  heading: number | null;
+};
+
+class UserLocation extends React.Component<Props, UserLocationState> {
   static defaultProps = {
     animated: true,
     visible: true,
     showsUserHeadingIndicator: false,
     requestsAlwaysUse: false,
     minDisplacement: 0,
-    renderMode: 'normal',
-  };
-
-  static RenderMode = {
-    Native: 'native',
-    Normal: 'normal',
+    renderMode: UserLocationRenderMode.Normal,
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -143,34 +152,36 @@ class UserLocation extends React.Component {
 
   // required as #setLocationManager attempts to setState
   // after component unmount
-  _isMounted = null;
+  _isMounted?: boolean = undefined;
 
-  locationManagerRunning = false;
+  locationManagerRunning?: boolean = false;
 
   async componentDidMount() {
     this._isMounted = true;
 
-    locationManager.setMinDisplacement(this.props.minDisplacement);
+    locationManager.setMinDisplacement(this.props.minDisplacement || 0);
 
     await this.setLocationManager({
       running: this.needsLocationManagerRunning(),
     });
 
-    if (this.renderMode === UserLocation.RenderMode.Native) {
+    if (this.props.renderMode === UserLocationRenderMode.Native) {
       return;
     }
   }
 
-  async componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps: Props) {
     await this.setLocationManager({
       running: this.needsLocationManagerRunning(),
     });
 
     if (this.props.minDisplacement !== prevProps.minDisplacement) {
-      locationManager.setMinDisplacement(this.props.minDisplacement);
+      locationManager.setMinDisplacement(this.props.minDisplacement || 0);
     }
     if (this.props.requestsAlwaysUse !== prevProps.requestsAlwaysUse) {
-      locationManager.setRequestsAlwaysUse(this.props.requestsAlwaysUse);
+      locationManager.setRequestsAlwaysUse(
+        this.props.requestsAlwaysUse || false,
+      );
     }
   }
 
@@ -189,7 +200,7 @@ class UserLocation extends React.Component {
    * @param {Object} running - Object with key `running` and `boolean` value
    * @return {Promise<void>}
    */
-  async setLocationManager({ running }) {
+  async setLocationManager({ running }: { running?: boolean }) {
     if (this.locationManagerRunning !== running) {
       this.locationManagerRunning = running;
       if (running) {
@@ -211,12 +222,12 @@ class UserLocation extends React.Component {
   needsLocationManagerRunning() {
     return (
       !!this.props.onUpdate ||
-      (this.props.renderMode === UserLocation.RenderMode.Normal &&
+      (this.props.renderMode === UserLocationRenderMode.Normal &&
         this.props.visible)
     );
   }
 
-  _onLocationUpdate(location) {
+  _onLocationUpdate(location: Location | null) {
     if (!this._isMounted || !location) {
       return;
     }
@@ -231,7 +242,7 @@ class UserLocation extends React.Component {
 
     this.setState({
       coordinates,
-      heading,
+      heading: heading ?? null,
     });
 
     if (this.props.onUpdate) {
@@ -242,7 +253,7 @@ class UserLocation extends React.Component {
   _renderNative() {
     const { androidRenderMode, showsUserHeadingIndicator } = this.props;
 
-    let props = {
+    const props = {
       androidRenderMode,
       iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
     };
@@ -258,7 +269,7 @@ class UserLocation extends React.Component {
       return null;
     }
 
-    if (this.props.renderMode === UserLocation.RenderMode.Native) {
+    if (this.props.renderMode === UserLocationRenderMode.Native) {
       return this._renderNative();
     }
 
@@ -268,8 +279,8 @@ class UserLocation extends React.Component {
 
     return (
       <Annotation
-        animated={animated}
         id="mapboxUserLocation"
+        animated={animated}
         onPress={onPress}
         coordinates={coordinates}
         style={{

package/javascript/components/VectorSource.tsx

@@ -24,6 +24,11 @@ interface Props {
    */
   id: string;
 
+  /**
+   * The id refers to en existing source in the style. Does not create a new source.
+   */
+  existing?: boolean;
+
   /**
    * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
    */
@@ -85,7 +90,7 @@ interface Props {
     height: number;
   };
 
-  children: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement | React.ReactElement[];
 }
 
 //interface NativeProps extends Omit<Props, 'children'> {}

package/javascript/index.ts

@@ -0,0 +1,4 @@
+export * from './Mapbox';
+import * as Mapbox from './Mapbox';
+
+export default Mapbox;

package/javascript/modules/offline/offlineManager.ts

@@ -6,8 +6,12 @@ import {
 
 import { isUndefined, isFunction, isAndroid } from '../../utils';
 
+export {
+  default as OfflineCreatePackOptions,
+  type OfflineCreatePackOptionsArgs,
+} from './OfflineCreatePackOptions';
 import OfflineCreatePackOptions, {
-  OfflineCreatePackOptionsArgs,
+  type OfflineCreatePackOptionsArgs,
 } from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';