@maplibre/maplibre-react-native 11.0.0-beta.8 → 11.0.0

package/src/components/map/MapViewNativeComponent.ts

@@ -57,7 +57,9 @@ export interface NativeProps extends ViewProps {
   preferredFramesPerSecond?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
 
   dragPan?: CodegenTypes.WithDefault<boolean, true>;
-  touchAndDoubleTapZoom?: CodegenTypes.WithDefault<boolean, true>;
+  touchZoom?: CodegenTypes.WithDefault<boolean, true>;
+  doubleTapZoom?: CodegenTypes.WithDefault<boolean, true>;
+  doubleTapHoldZoom?: CodegenTypes.WithDefault<boolean, true>;
   touchRotate?: CodegenTypes.WithDefault<boolean, true>;
   touchPitch?: CodegenTypes.WithDefault<boolean, true>;
 
@@ -73,6 +75,9 @@ export interface NativeProps extends ViewProps {
   compassPosition?: NativeOrnamentViewPosition;
   compassHiddenFacingNorth?: CodegenTypes.WithDefault<boolean, true>;
 
+  scaleBar?: CodegenTypes.WithDefault<boolean, false>;
+  scaleBarPosition?: NativeOrnamentViewPosition;
+
   onPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
   onLongPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
 

package/src/components/sources/geojson-source/GeoJSONSource.tsx

@@ -5,9 +5,9 @@ import type {
 import {
   Component,
   type ComponentProps,
-  forwardRef,
   memo,
   type ReactNode,
+  type Ref,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -17,42 +17,43 @@ import GeoJSONSourceNativeComponent from "./GeoJSONSourceNativeComponent";
 import NativeGeoJSONSourceModule from "./NativeGeoJSONSourceModule";
 import { useFrozenId } from "../../../hooks/useFrozenId";
 import { type BaseProps } from "../../../types/BaseProps";
-import type { PressableSourceProps } from "../../../types/sources/PressableSourceProps";
+import type { PressableSourceProps } from "../../../types/PressableSourceProps";
 import { cloneReactChildrenWithProps } from "../../../utils";
 import { findNodeHandle } from "../../../utils/findNodeHandle";
 import { getNativeFilter } from "../../../utils/getNativeFilter";
 
 export interface GeoJSONSourceRef {
   /**
-   * Get all features from the source that match the filter, regardless of visibility
+   * Get all features from the source that match the filter, regardless of
+   * visibility
+   *
+   * @param filter - Optional filter statement to filter the returned features
    *
    * @example
    * const data = await geoJSONSourceRef.current?.getData(clusterId);
-   *
-   * @param filter Optional filter statement to filter the returned features
    */
   getData(filter?: FilterSpecification): Promise<GeoJSON.FeatureCollection>;
 
   /**
    * Returns the zoom needed to expand the cluster.
    *
+   * @param clusterId - The feature cluster to expand.
+   * @returns Zoom level at which the cluster expands
+   *
    * @example
    * const zoom = await geoJSONSourceRef.current?.getClusterExpansionZoom(clusterId);
-   *
-   * @param clusterId The feature cluster to expand.
-   * @return Zoom level at which the cluster expands
    */
   getClusterExpansionZoom(clusterId: number): Promise<number>;
 
   /**
    * Returns the FeatureCollection from the cluster.
    *
-   * @example
-   * const collection = await geoJSONSourceRef.current?.getClusterLeaves(clusterId, limit, offset);
-   *
-   * @param clusterId The feature cluster to expand.
+   * @param clusterId - The feature cluster to expand.
    * @param limit - The number of points to return.
    * @param offset - The amount of points to skip (for pagination).
+   *
+   * @example
+   * const collection = await geoJSONSourceRef.current?.getClusterLeaves(clusterId, limit, offset);
    */
   getClusterLeaves(
     clusterId: number,
@@ -63,10 +64,10 @@ export interface GeoJSONSourceRef {
   /**
    * Returns the FeatureCollection from the cluster (on the next zoom level).
    *
+   * @param clusterId - The feature cluster to expand.
+   *
    * @example
    * const collection = await geoJSONSourceRef.current?.getClusterChildren(clusterId);
-   *
-   * @param  clusterId - The feature cluster to expand.
    */
   getClusterChildren(clusterId: number): Promise<GeoJSON.Feature[]>;
 }
@@ -79,7 +80,8 @@ export interface GeoJSONSourceProps extends BaseProps, PressableSourceProps {
 
   /**
    * Can be provided as one of:
-   * - An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle
+   * - An HTTP(S) URL, absolute file URL, or local file URL relative to the current
+   *   application’s resource bundle
    * - Any valid GeoJSON object
    */
   data: string | GeoJSON.GeoJSON;
@@ -90,51 +92,49 @@ export interface GeoJSONSourceProps extends BaseProps, PressableSourceProps {
   cluster?: boolean;
 
   /**
-   * Specifies the radius of each cluster if clustering is enabled.
-   * A value of 512 produces a radius equal to the width of a tile.
-   * The default value is 50.
+   * Specifies the radius of each cluster if clustering is enabled. A value of 512
+   * produces a radius equal to the width of a tile. The default value is 50.
    */
   clusterRadius?: number;
 
   /**
-   * Specifies minimum number of points to form a cluster if clustering is enabled.
-   * The default value is 2.
+   * Specifies minimum number of points to form a cluster if clustering is
+   * enabled. The default value is 2.
    */
   clusterMinPoints?: number;
 
   /**
-   * Specifies the maximum zoom level at which to cluster points if clustering is enabled.
-   * Defaults to one zoom level less than the value of maxzoom so that, at the maximum zoom,
-   * the data is not clustered.
+   * Specifies the maximum zoom level at which to cluster points if clustering is
+   * enabled. Defaults to one zoom level less than the value of maxzoom so that,
+   * at the maximum zoom, the data is not clustered.
    */
   clusterMaxZoom?: number;
 
   /**
-   * Specifies custom properties on the generated clusters if clustering
-   * is enabled, aggregating values from clustered points.
+   * Specifies custom properties on the generated clusters if clustering is
+   * enabled, aggregating values from clustered points.
    *
-   * Has the form `{ "property_name": [operator, map_expression]}`, where
-   *  `operator` is a custom reduce expression that references a special `["accumulated"]` value -
-   *   it accumulates the property value from clusters/points the cluster contains
-   *  `map_expression` produces the value of a single point
+   * Has the form `{ "property_name": [operator, map_expression]}` , where
+   * `operator` is a custom reduce expression that references a special
+   * `["accumulated"]` value - it accumulates the property value from
+   * clusters/points the cluster contains `map_expression` produces the value of a
+   * single point
    *
    * @example `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
-   *
    */
   clusterProperties?: GeoJSONSourceSpecification["clusterProperties"];
 
   /**
-   * Specifies the maximum zoom level at which to create vector tiles.
-   * A greater value produces greater detail at high zoom levels.
-   * The default value is 18.
+   * Specifies the maximum zoom level at which to create vector tiles. A greater
+   * value produces greater detail at high zoom levels. The default value is 18.
    */
   maxzoom?: number;
 
   /**
-   * Specifies the size of the tile buffer on each side.
-   * A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
-   * Larger values produce fewer rendering artifacts near tile edges and slower performance.
-   * The default value is 128.
+   * Specifies the size of the tile buffer on each side. A value of 0 produces no
+   * buffer. A value of 512 produces a buffer as wide as the tile itself. Larger
+   * values produce fewer rendering artifacts near tile edges and slower
+   * performance. The default value is 128.
    */
   buffer?: number;
 
@@ -143,83 +143,85 @@ export interface GeoJSONSourceProps extends BaseProps, PressableSourceProps {
    *
    * Higher means simpler geometries and faster performance.
    *
-   * @default 0.375
+   * @defaultValue 0.375
    */
   tolerance?: number;
 
   /**
-   * Whether to calculate line distance metrics.
-   * This is required for line layers that specify lineGradient values.
-   * The default value is false.
+   * Whether to calculate line distance metrics. This is required for line layers
+   * that specify lineGradient values. The default value is false.
    */
   lineMetrics?: boolean;
 
   children?: ReactNode;
+
+  /**
+   * Ref to access GeoJSONSource methods.
+   */
+  ref?: Ref<GeoJSONSourceRef>;
 }
 
 /**
- * GeoJSONSource is a map content source that supplies GeoJSON to be shown on the map.
- * The data may be provided as an url or a GeoJSON object.
+ * GeoJSONSource is a map content source that supplies GeoJSON to be shown on
+ * the map. The data may be provided as an url or a GeoJSON object.
  */
 export const GeoJSONSource = memo(
-  forwardRef<GeoJSONSourceRef, GeoJSONSourceProps>(
-    ({ id, data, ...props }, ref) => {
-      const nativeRef = useRef<
-        Component<ComponentProps<typeof GeoJSONSourceNativeComponent>> &
-          ReactNativeElement
-      >(null);
-
-      const frozenId = useFrozenId(id);
-
-      useImperativeHandle(ref, () => ({
-        getData: async (filter) => {
-          return NativeGeoJSONSourceModule.getData(
-            findNodeHandle(nativeRef.current),
-            getNativeFilter(filter),
-          );
-        },
-
-        getClusterExpansionZoom: async (clusterId) => {
-          return NativeGeoJSONSourceModule.getClusterExpansionZoom(
-            findNodeHandle(nativeRef.current),
-            clusterId,
-          );
-        },
-
-        getClusterLeaves: async (
-          clusterId: number,
-          limit: number,
-          offset: number,
-        ) => {
-          return NativeGeoJSONSourceModule.getClusterLeaves(
-            findNodeHandle(nativeRef.current),
-            clusterId,
-            limit,
-            offset,
-          );
-        },
-
-        getClusterChildren: async (clusterId: number) => {
-          return NativeGeoJSONSourceModule.getClusterChildren(
-            findNodeHandle(nativeRef.current),
-            clusterId,
-          );
-        },
-      }));
-
-      return (
-        <GeoJSONSourceNativeComponent
-          ref={nativeRef}
-          id={frozenId}
-          data={typeof data === "string" ? data : JSON.stringify(data)}
-          hasOnPress={!!props.onPress}
-          {...props}
-        >
-          {cloneReactChildrenWithProps(props.children, {
-            source: frozenId,
-          })}
-        </GeoJSONSourceNativeComponent>
-      );
-    },
-  ),
+  ({ id, data, ref, ...props }: GeoJSONSourceProps) => {
+    const nativeRef = useRef<
+      Component<ComponentProps<typeof GeoJSONSourceNativeComponent>> &
+        ReactNativeElement
+    >(null);
+
+    const frozenId = useFrozenId(id);
+
+    useImperativeHandle(ref, () => ({
+      getData: async (filter) => {
+        return NativeGeoJSONSourceModule.getData(
+          findNodeHandle(nativeRef.current),
+          getNativeFilter(filter),
+        );
+      },
+
+      getClusterExpansionZoom: async (clusterId) => {
+        return NativeGeoJSONSourceModule.getClusterExpansionZoom(
+          findNodeHandle(nativeRef.current),
+          clusterId,
+        );
+      },
+
+      getClusterLeaves: async (
+        clusterId: number,
+        limit: number,
+        offset: number,
+      ) => {
+        return NativeGeoJSONSourceModule.getClusterLeaves(
+          findNodeHandle(nativeRef.current),
+          clusterId,
+          limit,
+          offset,
+        );
+      },
+
+      getClusterChildren: async (clusterId: number) => {
+        return NativeGeoJSONSourceModule.getClusterChildren(
+          findNodeHandle(nativeRef.current),
+          clusterId,
+        );
+      },
+    }));
+
+    return (
+      <GeoJSONSourceNativeComponent
+        ref={nativeRef}
+        id={frozenId}
+        data={typeof data === "string" ? data : JSON.stringify(data)}
+        hasOnPress={!!props.onPress}
+        {...props}
+      >
+        {cloneReactChildrenWithProps(props.children, {
+          source: frozenId,
+        })}
+      </GeoJSONSourceNativeComponent>
+    );
+  },
 );

package/src/components/sources/image-source/ImageSource.tsx

@@ -23,7 +23,8 @@ export interface ImageSourceProps extends BaseProps {
   url: string | number;
 
   /**
-   * The top left, top right, bottom right, and bottom left coordinates for the image.
+   * The top left, top right, bottom right, and bottom left coordinates for the
+   * image.
    */
   coordinates: [
     topLeft: LngLat,
@@ -36,8 +37,9 @@ export interface ImageSourceProps extends BaseProps {
 }
 
 /**
- * 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
+ * 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
  */
 export const ImageSource = memo(({ id, url, ...props }: ImageSourceProps) => {
   const frozenId = useFrozenId(id);

package/src/components/sources/raster-source/RasterSource.tsx

@@ -12,47 +12,51 @@ export interface RasterSourceProps extends BaseProps {
   id?: string;
 
   /**
-   * A URL to a TileJSON configuration file describing the source's contents and other metadata.
+   * 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.
+   * An array of tile URL templates. If multiple endpoints are specified, clients
+   * may use any combination of endpoints.
+   *
    * @example "https://example.com/raster-tiles/{z}/{x}/{y}.png"
    */
   tiles?: 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
-   * maxzoom, if specified. The default value for this option is 0.
+   * 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 maxzoom, if specified. The default value for this option is 0.
    */
   minzoom?: 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
-   * minzoom, if specified. The default value for this option is 22.
+   * 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 minzoom, if specified. The default value for this option is 22.
    */
   maxzoom?: number;
 
   /**
    * Size of the map tiles.
    *
-   * @default 512
+   * @defaultValue 512
    */
   tileSize?: number;
 
   /**
    * Influences the y direction of the tile coordinates. (tms inverts y-axis)
    *
-   * @default "xyz"
+   * @defaultValue "xyz"
    */
   scheme?: "xyz" | "tms";
 
   /**
-   * 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.
+   * 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;
 
@@ -60,9 +64,10 @@ export interface RasterSourceProps extends BaseProps {
 }
 
 /**
- * RasterSource is a map content source that supplies raster image tiles 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.
+ * RasterSource is a map content source that supplies raster image tiles 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.
  */
 export const RasterSource = memo(({ id, ...props }: RasterSourceProps) => {
   const frozenId = useFrozenId(id);

package/src/components/sources/vector-source/VectorSource.tsx

@@ -2,9 +2,9 @@ import type { FilterSpecification } from "@maplibre/maplibre-gl-style-spec";
 import {
   Component,
   type ComponentProps,
-  forwardRef,
   memo,
   type ReactNode,
+  type Ref,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -14,22 +14,22 @@ import NativeVectorSourceModule from "./NativeVectorSourceModule";
 import VectorSourceNativeComponent from "./VectorSourceNativeComponent";
 import { useFrozenId } from "../../../hooks/useFrozenId";
 import { type BaseProps } from "../../../types/BaseProps";
-import type { PressableSourceProps } from "../../../types/sources/PressableSourceProps";
+import type { PressableSourceProps } from "../../../types/PressableSourceProps";
 import { cloneReactChildrenWithProps } from "../../../utils";
 import { findNodeHandle } from "../../../utils/findNodeHandle";
 import { getNativeFilter } from "../../../utils/getNativeFilter";
 
 export interface VectorSourceRef {
   /**
-   * 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.
+   * Returns all features that match the query parameters regardless of whether
+   * 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 the visible viewport.
    *
    * @example
-   * vectorSource.features(['id1', 'id2'])
-   *
-   * @param  options.sourceLayer - 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  options.filter - an optional filter statement to filter the returned Features.
+   * ```ts
+   * vectorSource.querySourceFeatures({ sourceLayer: "some-source-layer" });
+   * ```
    */
   querySourceFeatures(options: {
     sourceLayer: string;
@@ -44,86 +44,94 @@ export interface VectorSourceProps extends BaseProps, PressableSourceProps {
   id?: string;
 
   /**
-   * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
+   * 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
+   * An array of tile URL templates. If multiple endpoints are specified, clients
+   * may use any combination of endpoints. Common format should be:
+   * `https://example.com/vector-tiles/{z}/{x}/{y}.pbf` .
    */
   tiles?: 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
-   * maxzoom, if specified. The default value for this option is 0.
+   * 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 maxzoom, if specified. The default value for this option is 0.
    */
   minzoom?: 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
-   * minzoom, if specified. The default value for this option is 22.
+   * 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 minzoom, if specified. The default value for this option is 22.
    */
   maxzoom?: number;
 
   /**
    * Influences the y direction of the tile coordinates. (tms inverts y-axis)
    *
-   * @default "xyz"
+   * @defaultValue "xyz"
    */
   scheme?: "xyz" | "tms";
 
   /**
-   * 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.
+   * 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;
 
   children?: ReactNode;
+
+  /**
+   * Ref to access VectorSource methods.
+   */
+  ref?: Ref<VectorSourceRef>;
 }
 
 /**
- * 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.
+ * 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.
  */
-export const VectorSource = memo(
-  forwardRef<VectorSourceRef, VectorSourceProps>(({ id, ...props }, ref) => {
-    const nativeRef = useRef<
-      Component<ComponentProps<typeof VectorSourceNativeComponent>> &
-        ReactNativeElement
-    >(null);
+export const VectorSource = memo(({ id, ref, ...props }: VectorSourceProps) => {
+  const nativeRef = useRef<
+    Component<ComponentProps<typeof VectorSourceNativeComponent>> &
+      ReactNativeElement
+  >(null);
 
-    const frozenId = useFrozenId(id);
+  const frozenId = useFrozenId(id);
 
-    useImperativeHandle(ref, () => ({
-      querySourceFeatures: async ({
+  useImperativeHandle(ref, () => ({
+    querySourceFeatures: async ({
+      sourceLayer,
+      filter,
+    }: {
+      sourceLayer: string;
+      filter?: FilterSpecification;
+    }): Promise<GeoJSON.Feature[]> => {
+      return NativeVectorSourceModule.querySourceFeatures(
+        findNodeHandle(nativeRef.current),
         sourceLayer,
-        filter,
-      }: {
-        sourceLayer: string;
-        filter?: FilterSpecification;
-      }): Promise<GeoJSON.Feature[]> => {
-        return NativeVectorSourceModule.querySourceFeatures(
-          findNodeHandle(nativeRef.current),
-          sourceLayer,
-          getNativeFilter(filter) as string[],
-        );
-      },
-    }));
+        getNativeFilter(filter) as string[],
+      );
+    },
+  }));
 
-    return (
-      <VectorSourceNativeComponent
-        ref={nativeRef}
-        id={frozenId}
-        hasOnPress={!!props.onPress}
-        {...props}
-      >
-        {cloneReactChildrenWithProps(props.children, {
-          source: frozenId,
-        })}
-      </VectorSourceNativeComponent>
-    );
-  }),
-);
+  return (
+    <VectorSourceNativeComponent
+      ref={nativeRef}
+      id={frozenId}
+      hasOnPress={!!props.onPress}
+      {...props}
+    >
+      {cloneReactChildrenWithProps(props.children, {
+        source: frozenId,
+      })}
+    </VectorSourceNativeComponent>
+  );
+});

package/src/components/user-location/NativeUserLocation.tsx

@@ -5,20 +5,23 @@ interface NativeUserLocationProps extends BaseProps {
   /**
    * Rendering mode
    *
-   *  - "default": Renders only a puck
-   *  - "heading": Renders a puck with triangle indicating device heading based on compass
-   *  - "course": Android renders an arrow indicating device heading based on GPS course, iOS behaves like mode="heading"
+   * - "default": Renders only a puck
+   * - "heading": Renders a puck with triangle indicating device heading based on
+   *   compass
+   * - "course": Android renders an arrow indicating device heading based on GPS
+   *   course, iOS behaves like mode="heading"
    *
-   * @default "default"
+   * @defaultValue "default"
    */
   mode?: "default" | "heading" | "course";
 
   /**
    * Limit the maximum frames per second for location updates on Android
    *
-   * Use this setting to limit animation rate of the location puck to decrease the stress on the device's CPU which could improve battery life.
+   * Use this setting to limit animation rate of the location puck to decrease the
+   * stress on the device's CPU which could improve battery life.
    *
-   * @platform android
+   * @platform Android
    */
   androidPreferredFramesPerSecond?: number;
 }