@maplibre/maplibre-react-native 11.0.0-alpha.26 → 11.0.0-alpha.28

package/src/components/sources/shape-source/ShapeSource.tsx

@@ -0,0 +1,235 @@
+import {
+  Component,
+  type ComponentProps,
+  forwardRef,
+  memo,
+  type ReactNode,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import { type NativeMethods, type NativeSyntheticEvent } from "react-native";
+
+import NativeShapeSourceModule from "./NativeShapeSourceModule";
+import ShapeSourceNativeComponent from "./ShapeSourceNativeComponent";
+import { useFrozenId } from "../../../hooks/useFrozenId";
+import { type BaseProps } from "../../../types/BaseProps";
+import {
+  type ExpressionField,
+  type FilterExpression,
+} from "../../../types/MapLibreRNStyles";
+import type { PressEventWithFeatures } from "../../../types/PressEventWithFeatures";
+import type { ViewPadding } from "../../../types/ViewPadding";
+import { cloneReactChildrenWithProps } from "../../../utils";
+import { findNodeHandle } from "../../../utils/findNodeHandle";
+
+export interface ShapeSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id?: string;
+
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
+   *
+   * The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection.
+   */
+  data: string | GeoJSON.GeoJSON;
+
+  /**
+   * Enables clustering on the source for point shapes.
+   */
+  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.
+   */
+  clusterRadius?: number;
+
+  /**
+   * 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 level,
+   * the shapes are not clustered.
+   */
+  clusterMaxZoom?: number;
+
+  /**
+   * 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
+   *
+   * @example `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
+   *
+   */
+  clusterProperties?: { [propertyName: string]: ExpressionField };
+
+  /**
+   * 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.
+   */
+  buffer?: number;
+
+  /**
+   * Douglas-Peucker simplification tolerance applied to geometries
+   *
+   * Higher means simpler geometries and faster performance.
+   *
+   * @default 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.
+   */
+  lineMetrics?: boolean;
+
+  /**
+   * 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.
+   */
+  onPress?: (event: NativeSyntheticEvent<PressEventWithFeatures>) => void;
+
+  /**
+   * Overrides the default touch hitbox (44 x 44 pixels) for the source layers
+   */
+  hitbox?: ViewPadding;
+
+  children?: ReactNode;
+}
+
+export interface ShapeSourceRef {
+  /**
+   * Get all features from the source that match the filter, regardless of visibility
+   *
+   * @example
+   * shapeSource.features()
+   *
+   * @param filter Optional filter statement to filter the returned features
+   */
+  getData(filter?: FilterExpression): Promise<GeoJSON.FeatureCollection>;
+
+  /**
+   * Returns the zoom needed to expand the cluster.
+   *
+   * @example
+   * const zoom = await shapeSource.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 shapeSource.getClusterLeaves(clusterId, limit, offset);
+   *
+   * @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).
+   */
+  getClusterLeaves(
+    clusterId: number,
+    limit: number,
+    offset: number,
+  ): Promise<GeoJSON.Feature[]>;
+
+  /**
+   * Returns the FeatureCollection from the cluster (on the next zoom level).
+   *
+   * @example
+   * const collection = await shapeSource.getClusterChildren(clusterId);
+   *
+   * @param  clusterId - The feature cluster to expand.
+   */
+  getClusterChildren(clusterId: number): Promise<GeoJSON.Feature[]>;
+}
+
+/**
+ * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
+ * The shape may be a url or a GeoJSON object
+ */
+export const ShapeSource = memo(
+  forwardRef<ShapeSourceRef, ShapeSourceProps>(
+    ({ id, data, ...props }, ref) => {
+      const nativeRef = useRef<
+        Component<ComponentProps<typeof ShapeSourceNativeComponent>> &
+          Readonly<NativeMethods>
+      >(null);
+
+      const frozenId = useFrozenId(id);
+
+      useImperativeHandle(ref, () => ({
+        getData: async (filter) => {
+          return NativeShapeSourceModule.getData(
+            findNodeHandle(nativeRef.current),
+            filter,
+          );
+        },
+
+        getClusterExpansionZoom: async (clusterId) => {
+          return NativeShapeSourceModule.getClusterExpansionZoom(
+            findNodeHandle(nativeRef.current),
+            clusterId,
+          );
+        },
+
+        getClusterLeaves: async (
+          clusterId: number,
+          limit: number,
+          offset: number,
+        ) => {
+          return NativeShapeSourceModule.getClusterLeaves(
+            findNodeHandle(nativeRef.current),
+            clusterId,
+            limit,
+            offset,
+          );
+        },
+
+        getClusterChildren: async (clusterId: number) => {
+          return NativeShapeSourceModule.getClusterChildren(
+            findNodeHandle(nativeRef.current),
+            clusterId,
+          );
+        },
+      }));
+
+      return (
+        <ShapeSourceNativeComponent
+          ref={nativeRef}
+          id={frozenId}
+          data={typeof data === "string" ? data : JSON.stringify(data)}
+          hasOnPress={!!props.onPress}
+          {...props}
+        >
+          {cloneReactChildrenWithProps(props.children, {
+            sourceID: frozenId,
+          })}
+        </ShapeSourceNativeComponent>
+      );
+    },
+  ),
+);

package/src/components/sources/shape-source/ShapeSourceNativeComponent.ts

@@ -0,0 +1,48 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../../types/codegen/UnsafeMixed";
+
+type NativeHitbox = {
+  top?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  right?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  bottom?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  left?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+};
+
+type NativePressEvent = {
+  lngLat: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
+  point: UnsafeMixed<[x: CodegenTypes.Double, y: CodegenTypes.Double]>;
+  features: UnsafeMixed<GeoJSON.Feature[]>;
+};
+
+export interface NativeProps extends ViewProps {
+  id: string;
+  data: string;
+
+  maxzoom?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  buffer?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  tolerance?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  lineMetrics?: CodegenTypes.WithDefault<boolean, false>;
+
+  cluster?: CodegenTypes.WithDefault<boolean, false>;
+  clusterRadius?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  clusterMaxZoom?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  clusterMinPoints?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  clusterProperties?: UnsafeMixed<object>;
+
+  hitbox?: NativeHitbox;
+  hasOnPress: boolean;
+
+  onPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNShapeSource",
+) as HostComponent<NativeProps>;

package/src/hooks/useAbstractLayer.ts

@@ -9,7 +9,7 @@ import {
   type FilterExpression,
 } from "../types/MapLibreRNStyles";
 import { type StyleValue, transformStyle } from "../utils/StyleValue";
-import { getFilter } from "../utils/filterUtils";
+import { getFilter } from "../utils/getFilter";
 
 export interface BaseLayerProps {
   /**

package/src/hooks/useFrozenId.ts

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+let generatedIdCounter = 0;
+
+export function useFrozenId(id?: string) {
+  const [frozenId] = useState(id ? id : `shape-source-${generatedIdCounter++}`);
+
+  if (id && id !== frozenId) {
+    throw new Error("Source id cannot be changed");
+  }
+
+  return frozenId;
+}

package/src/index.ts

@@ -35,8 +35,8 @@ export { NativeUserLocation } from "./components/user-location/NativeUserLocatio
 export { useCurrentPosition } from "./hooks/useCurrentPosition";
 
 export { VectorSource } from "./components/sources/VectorSource";
-export { ShapeSource } from "./components/sources/ShapeSource";
-export type { ShapeSourceRef } from "./components/sources/ShapeSource";
+export { ShapeSource } from "./components/sources/shape-source/ShapeSource";
+export type { ShapeSourceRef } from "./components/sources/shape-source/ShapeSource";
 export { RasterSource } from "./components/sources/RasterSource";
 export { ImageSource } from "./components/sources/ImageSource";
 export { Images } from "./components/Images";
@@ -80,7 +80,8 @@ export type {
 } from "./types/MapLibreRNStyles";
 export type { PixelPoint } from "./types/PixelPoint";
 export type { PixelPointBounds } from "./types/PixelPointBounds";
-export type { PressEvent, PressEventWithFeatures } from "./types/PressEvent";
+export type { PressEvent } from "./types/PressEvent";
+export type { PressEventWithFeatures } from "./types/PressEventWithFeatures";
 export type { ViewPadding } from "./types/ViewPadding";
 
 export { Animated } from "./utils/animated/Animated";

package/src/modules/snapshot/SnapshotOptions.ts

@@ -6,8 +6,9 @@ import { toJSONString } from "../../utils";
 
 const MLRNModule = NativeModules.MLRNModule;
 
-export interface SnapshotInputOptions
-  extends Partial<Omit<SnapshotJsonOptions, "centerCoordinate" | "bounds">> {
+export interface SnapshotInputOptions extends Partial<
+  Omit<SnapshotJsonOptions, "centerCoordinate" | "bounds">
+> {
   centerCoordinate?: GeoJSON.Position;
   bounds?: GeoJSON.Position[];
 }

package/src/types/MapLibreRNStyles.ts

@@ -115,7 +115,7 @@ export type ExpressionField =
   | ExpressionField[]
   | { [key: string]: ExpressionField };
 
-export type Expression = readonly [ExpressionName, ...ExpressionField[]];
+export type Expression = [ExpressionName, ...ExpressionField[]];
 
 export type FilterExpression = Expression;
 

package/src/types/PressEvent.ts

@@ -12,7 +12,3 @@ export interface PressEvent {
    */
   point: PixelPoint;
 }
-
-export interface PressEventWithFeatures extends PressEvent {
-  features: GeoJSON.Feature[];
-}

package/src/types/PressEventWithFeatures.ts

@@ -0,0 +1,5 @@
+import type { PressEvent } from "./PressEvent";
+
+export interface PressEventWithFeatures extends PressEvent {
+  features: GeoJSON.Feature[];
+}

package/src/utils/animated/AbstractAnimatedCoordinates.ts

@@ -1,16 +1,7 @@
 import { Animated } from "react-native";
 
-// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
 
-if (__DEV__) {
-  if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
-    console.error(
-      "AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class",
-    );
-  }
-}
-
 export type AnimatedCoordinates = [number, number];
 
 const defaultConfig = {

package/src/utils/animated/Animated.ts

@@ -1,3 +1,4 @@
+import type { ComponentProps, ComponentType } from "react";
 import { Animated as RNAnimated } from "react-native";
 
 import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
@@ -12,14 +13,20 @@ import { LineLayer } from "../../components/layers/LineLayer";
 import { RasterLayer } from "../../components/layers/RasterLayer";
 import { SymbolLayer } from "../../components/layers/SymbolLayer";
 import { ImageSource } from "../../components/sources/ImageSource";
-import { ShapeSource } from "../../components/sources/ShapeSource";
+import { ShapeSource } from "../../components/sources/shape-source/ShapeSource";
 
 export const Animated = {
-  // sources
-  ShapeSource: RNAnimated.createAnimatedComponent(ShapeSource),
+  // Sources
+  ShapeSource: RNAnimated.createAnimatedComponent(
+    ShapeSource as unknown as ComponentType<
+      Omit<ComponentProps<typeof ShapeSource>, "data"> & {
+        data: string | GeoJSON.GeoJSON | AnimatedShape;
+      }
+    >,
+  ),
   ImageSource: RNAnimated.createAnimatedComponent(ImageSource),
 
-  // layers
+  // Layers
   FillLayer: RNAnimated.createAnimatedComponent(FillLayer),
   FillExtrusionLayer: RNAnimated.createAnimatedComponent(FillExtrusionLayer),
   LineLayer: RNAnimated.createAnimatedComponent(LineLayer),
@@ -28,7 +35,7 @@ export const Animated = {
   RasterLayer: RNAnimated.createAnimatedComponent(RasterLayer),
   BackgroundLayer: RNAnimated.createAnimatedComponent(BackgroundLayer),
 
-  // values
+  // Values
   CoordinatesArray: AnimatedCoordinatesArray,
   RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
   Shape: AnimatedShape,

package/src/utils/animated/AnimatedExtractCoordinateFromArray.ts

@@ -3,17 +3,8 @@ import { Animated } from "react-native";
 import type { AnimatedCoordinates } from "./AbstractAnimatedCoordinates";
 import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
 
-// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
 
-if (__DEV__) {
-  if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
-    console.error(
-      "AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class",
-    );
-  }
-}
-
 export class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
   _array: AnimatedRouteCoordinatesArray;
 

package/src/utils/animated/AnimatedPoint.ts

@@ -1,7 +1,5 @@
 import { Animated } from "react-native";
 
-// Used react-native-maps as a reference
-// https://github.com/react-community/react-native-maps/blob/master/lib/components/AnimatedRegion.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
 
 const DEFAULT_COORD = [0, 0];

package/src/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -16,9 +16,9 @@ import {
 
 interface AnimatedRouteToValue {
   end: /**
-   * Animate to this point on the coordinates array
-   */
-  | { point: Coord | AnimatedCoordinates }
+     * Animate to this point on the coordinates array
+     */
+    | { point: Coord | AnimatedCoordinates }
     /**
      * Animate to this length of the coordinates array
      */

package/src/utils/animated/AnimatedShape.ts

@@ -1,22 +1,11 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-
 import { Animated } from "react-native";
 
 import type { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
 import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray";
 import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
 
-// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
 
-if (__DEV__) {
-  if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
-    console.error(
-      "AnimatedShape could not obtain AnimatedWithChildren base class",
-    );
-  }
-}
-
 type Shape =
   | {
       type: "Point";
@@ -34,7 +23,7 @@ type Shape =
  * https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
  *
  * @example
- * <AnimatedShapeSource ... shape={new AnimatedShape({type:'LineString', coordinates: animatedCoords})} />
+ * <AnimatedShapeSource ... data={new AnimatedShape({type:'LineString', coordinates: animatedCoords})} />
  */
 export class AnimatedShape extends AnimatedWithChildren {
   constructor(shape: Shape) {
@@ -47,8 +36,7 @@ export class AnimatedShape extends AnimatedWithChildren {
       return value.map((i) => this._walkShapeAndGetValues(i));
     }
 
-    // @ts-expect-error Animated.Node is not exported
-    if (value instanceof Animated.Node) {
+    if (value instanceof AnimatedWithChildren) {
       return (value as any).__getValue();
     }
 
@@ -75,12 +63,13 @@ export class AnimatedShape extends AnimatedWithChildren {
     return shape;
   }
 
-  // @ts-expect-error Animated.Node is not exported
-  _walkAndProcess(value: any, cb: (value: Animated.Node) => void): void {
+  _walkAndProcess(
+    value: any,
+    cb: (value: Animated.AnimatedNode) => void,
+  ): void {
     if (Array.isArray(value)) {
       value.forEach((i) => this._walkAndProcess(i, cb));
-      // @ts-expect-error Animated.Node is not exported
-    } else if (value instanceof Animated.Node) {
+    } else if (value instanceof AnimatedWithChildren) {
       cb(value);
     } else if (typeof value === "object") {
       for (const key in value) {

package/src/utils/findNodeHandle.ts

@@ -0,0 +1,14 @@
+import { Component } from "react";
+import { findNodeHandle as rnFindNodeHandle } from "react-native";
+
+export const findNodeHandle = (ref: Component | null) => {
+  const nodeHandle = rnFindNodeHandle(ref);
+
+  if (nodeHandle === null) {
+    throw new Error(
+      "NativeComponent ref is null, wait for the map being initialized",
+    );
+  }
+
+  return nodeHandle;
+};

package/src/utils/{filterUtils.ts → getFilter.ts}

@@ -1,7 +1,7 @@
 import { type FilterExpression } from "../types/MapLibreRNStyles";
 
-export function getFilter(filter: FilterExpression | undefined): string[] {
-  if (!Array.isArray(filter) || filter.length === 0) {
+export function getFilter(filter: FilterExpression | undefined): any[] {
+  if (!Array.isArray(filter)) {
     return [];
   }
 

package/src/utils/index.ts

@@ -1,4 +1,10 @@
-import { Children, cloneElement, Component, type ReactElement } from "react";
+import {
+  Children,
+  cloneElement,
+  Component,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import {
   Image,
   NativeModules,
@@ -74,22 +80,16 @@ export function runNativeCommand<ReturnType = NativeArg>(
 }
 
 export function cloneReactChildrenWithProps(
-  children: Parameters<typeof Children.map>[0],
+  children: ReactNode,
   propsToAdd: { [key: string]: string } = {},
-): ReactElement[] | undefined {
+): ReactElement[] | null {
   if (!children) {
-    return undefined;
+    return null;
   }
 
-  let foundChildren = null;
-
-  if (!Array.isArray(children)) {
-    foundChildren = [children];
-  } else {
-    foundChildren = children;
-  }
+  const foundChildren = Array.isArray(children) ? children : [children];
+  const filteredChildren = foundChildren.filter((child) => !!child);
 
-  const filteredChildren = foundChildren.filter((child) => !!child); // filter out falsy children, since some can be null
   return Children.map(filteredChildren, (child) =>
     cloneElement(child, propsToAdd),
   );