@maplibre/maplibre-react-native 11.0.0-alpha.2 → 11.0.0-alpha.21

package/src/components/Images.tsx

@@ -1,6 +1,8 @@
-import { type ReactNode } from "react";
+import { type ReactNode, useMemo } from "react";
 import {
   Image,
+  type ImageRequireSource,
+  type ImageResolvedAssetSource,
   type ImageSourcePropType,
   type ImageURISource,
   type NativeSyntheticEvent,
@@ -11,29 +13,21 @@ import { type BaseProps } from "../types/BaseProps";
 
 export const NATIVE_MODULE_NAME = "MLRNImages";
 
-export type ImageEntry = string | ImageSourcePropType;
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+type XOR<T, U> = T | U extends object
+  ? (Without<T, U> & U) | (Without<U, T> & T)
+  : T | U;
 
-function _isUrlOrPath(value: ImageEntry): boolean {
-  return (
-    (typeof value === "string" || value instanceof String) &&
-    (value.startsWith("file://") ||
-      value.startsWith("http://") ||
-      value.startsWith("https://") ||
-      value.startsWith("data:") ||
-      value.startsWith("asset://") ||
-      value.startsWith("/"))
-  );
-}
+export type ImageSourceWithSdf = {
+  source: ImageSourcePropType;
+  sdf?: boolean;
+};
 
-function _isImageSourcePropType(
-  value: ImageEntry,
-): value is ImageSourcePropType {
-  if (typeof value === "number" || value instanceof Number) {
-    return true;
-  }
-  const valueAsSource = value as ImageURISource;
-  return !!valueAsSource.uri && typeof valueAsSource.uri === "string";
-}
+export type ImageEntry =
+  | string
+  | ImageRequireSource
+  | ImageURISource[]
+  | XOR<ImageURISource, ImageSourceWithSdf>;
 
 interface ImagesProps extends BaseProps {
   /**
@@ -59,7 +53,7 @@ interface ImagesProps extends BaseProps {
 }
 
 /**
- * Images defines the images used in Symbol etc layers
+ * Images defines the images used in Symbol layers
  */
 export const Images = ({
   images,
@@ -68,56 +62,55 @@ export const Images = ({
   id,
   children,
 }: ImagesProps) => {
-  const _getImages = (): {
-    images?: { [key: string]: ImageEntry };
-    nativeImages?: ImageEntry[];
-  } => {
-    if (!images && !nativeAssetImages) {
-      return {};
-    }
-
-    const imagesResult: { [key: string]: ImageEntry } = {};
-    let nativeImages: ImageEntry[] = [];
+  const props = useMemo(() => {
+    const getImages = (): {
+      images?: { [key: string]: ImageEntry };
+      nativeImages?: ImageEntry[];
+    } => {
+      if (!images && !nativeAssetImages) {
+        return {};
+      }
 
-    if (images) {
-      const imageNames = Object.keys(images);
-      for (const imageName of imageNames) {
-        const value = images[imageName];
-        if (value && _isUrlOrPath(value)) {
-          imagesResult[imageName] = value;
-        } else if (value && _isImageSourcePropType(value)) {
-          const res = Image.resolveAssetSource(value);
-          if (res && res.uri) {
-            imagesResult[imageName] = res;
+      const imagesResult: {
+        [key: string]: string | (ImageResolvedAssetSource & { sdf?: boolean });
+      } = {};
+
+      if (images) {
+        Object.entries(images).forEach(([imageName, value]) => {
+          if (typeof value === "string") {
+            imagesResult[imageName] = value;
+          } else if (
+            typeof value === "object" &&
+            "source" in value &&
+            value.source
+          ) {
+            imagesResult[imageName] = {
+              ...Image.resolveAssetSource(value.source),
+              sdf: value.sdf,
+            };
+          } else {
+            imagesResult[imageName] = Image.resolveAssetSource(value);
           }
-        }
+        });
       }
-    }
 
-    if (nativeAssetImages) {
-      nativeImages = nativeAssetImages;
-    }
+      return imagesResult;
+    };
 
     return {
-      images: imagesResult,
-      nativeImages,
+      id,
+      hasOnImageMissing: !!onImageMissing,
+      onImageMissing: (
+        event: NativeSyntheticEvent<{ payload: { imageKey: string } }>,
+      ): void => {
+        if (onImageMissing) {
+          onImageMissing(event.nativeEvent.payload.imageKey);
+        }
+      },
+      images: getImages(),
+      nativeImages: nativeAssetImages ?? [],
     };
-  };
-
-  const _onImageMissing = (
-    event: NativeSyntheticEvent<{ payload: { imageKey: string } }>,
-  ): void => {
-    if (onImageMissing) {
-      onImageMissing(event.nativeEvent.payload.imageKey);
-    }
-  };
-
-  const props = {
-    id,
-    hasOnImageMissing: !!onImageMissing,
-    onImageMissing: _onImageMissing,
-    ..._getImages(),
-  };
+  }, [id, onImageMissing, images, nativeAssetImages]);
 
   return <MLRNImages {...props}>{children}</MLRNImages>;
 };

package/src/components/annotations/Annotation.tsx

@@ -0,0 +1,149 @@
+import {
+  forwardRef,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+import {
+  Animated as RNAnimated,
+  Easing,
+  type NativeSyntheticEvent,
+} from "react-native";
+
+import type { BaseProps } from "../../types/BaseProps";
+import { type SymbolLayerStyle } from "../../types/MapLibreRNStyles";
+import { type PressEventWithFeatures } from "../../types/PressEvent";
+import { Animated } from "../../utils/animated/Animated";
+import { AnimatedPoint } from "../../utils/animated/AnimatedPoint";
+import { SymbolLayer } from "../layers/SymbolLayer";
+
+interface AnnotationProps extends BaseProps {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?: (x: number) => number;
+  coordinates?: number[];
+  onPress?: (event: NativeSyntheticEvent<PressEventWithFeatures>) => void;
+  children?: ReactNode;
+  style?: SymbolLayerStyle;
+  icon?: string | number | object;
+}
+
+type Shape = AnimatedPoint | GeoJSON.Point;
+
+function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
+  const lng = props.coordinates?.[0] || 0;
+  const lat = props.coordinates?.[1] || 0;
+  const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
+
+  if (props.animated) {
+    return new AnimatedPoint(point);
+  }
+
+  return point;
+}
+
+function isShapeAnimated(shape: Shape): shape is AnimatedPoint {
+  return shape instanceof AnimatedPoint;
+}
+
+interface AnnotationRef {
+  symbolStyle: SymbolLayerStyle | undefined;
+}
+
+export const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
+  (
+    {
+      animated = false,
+      animationDuration = 1000,
+      animationEasingFunction = Easing.linear,
+      ...otherProps
+    }: AnnotationProps,
+    ref,
+  ) => {
+    const props = {
+      ...otherProps,
+      animated,
+      animationDuration,
+      animationEasingFunction,
+    };
+
+    useImperativeHandle(
+      ref,
+      (): AnnotationRef => ({
+        symbolStyle,
+      }),
+    );
+
+    const [shape, setShape] = useState<Shape | null>(getShapeFromProps(props));
+
+    // this will run useEffect only when actual coordinates values change
+    const coordinateDeps = props.coordinates?.join(",");
+
+    useEffect(() => {
+      if (!Array.isArray(props.coordinates)) {
+        setShape(null);
+        return;
+      }
+
+      if (shape && isShapeAnimated(shape)) {
+        shape.stopAnimation();
+
+        shape
+          .timing({
+            coordinates: props.coordinates,
+            easing: animationEasingFunction,
+            duration: animationDuration,
+          })
+          .start();
+
+        return;
+      }
+
+      if (!shape || !isShapeAnimated(shape)) {
+        const newShape = getShapeFromProps(props);
+        setShape(newShape);
+      }
+    }, [coordinateDeps]);
+
+    if (!props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+    const symbolStyle: SymbolLayerStyle | undefined = props.icon
+      ? {
+          ...props.style,
+          iconImage: typeof props.icon === "string" ? props.icon : undefined,
+        }
+      : undefined;
+
+    if (symbolStyle) {
+      children.push(
+        <SymbolLayer id={`${props.id}-symbol`} style={symbolStyle} />,
+      );
+    }
+
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        children.push(...props.children);
+      } else {
+        children.push(props.children);
+      }
+    }
+
+    return (
+      <Animated.ShapeSource
+        id={props.id}
+        testID={props.testID}
+        onPress={props.onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
+        {children}
+      </Animated.ShapeSource>
+    );
+  },
+);
+
+Annotation.displayName = "Annotation";

package/src/components/annotations/MarkerView.tsx

@@ -0,0 +1,86 @@
+import { point } from "@turf/helpers";
+import { type ReactElement, useMemo } from "react";
+import { Platform, requireNativeComponent, type ViewProps } from "react-native";
+
+import { PointAnnotation } from "./PointAnnotation";
+import { toJSONString } from "../../utils";
+
+export const NATIVE_MODULE_NAME = "MLRNMarkerView";
+
+interface MarkerViewProps extends ViewProps {
+  /**
+   * The center point (specified as a map coordinate) of the marker.
+   * See also #anchor.
+   */
+  coordinate: number[];
+  /**
+   * Specifies the anchor being set on a particular point of the annotation.
+   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+   * Note this is only for custom annotations not the default pin view.
+   * Defaults to the center of the view.
+   */
+  anchor?: {
+    /**
+     * `x` of anchor
+     */
+    x: number;
+    /**
+     * `y` of anchor
+     */
+    y: number;
+  };
+  allowOverlap?: boolean;
+  isSelected?: boolean;
+  /**
+   * Expects one child - can be container with multiple elements
+   */
+  children: ReactElement;
+}
+
+interface NativeProps extends ViewProps {
+  coordinate: string | undefined;
+  anchor: { x: number; y: number };
+  allowOverlap: boolean;
+  isSelected: boolean;
+}
+
+/**
+ * MarkerView allows you to place a interactive react native marker to the map.
+ *
+ * If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
+ * .
+ * This is based on [MakerView plugin](https://github.com/maplibre/maplibre-plugins-android/tree/main/plugin-markerview) on Android
+ * and PointAnnotation on iOS.
+ */
+export const MarkerView = ({
+  anchor = { x: 0.5, y: 0.5 },
+  allowOverlap = false,
+  isSelected = false,
+  ...rest
+}: MarkerViewProps) => {
+  const props = { anchor, allowOverlap, isSelected, ...rest };
+  const coordinate = props.coordinate
+    ? toJSONString(point(props.coordinate))
+    : undefined;
+
+  const idForPointAnnotation = useMemo(() => {
+    lastId = lastId + 1;
+    return `MV-${lastId}`;
+  }, []);
+
+  if (Platform.OS === "ios") {
+    return <PointAnnotation id={idForPointAnnotation} {...props} />;
+  }
+
+  const propsToSend = {
+    ...props,
+    coordinate,
+  };
+
+  return <MLRNMarkerView {...propsToSend}>{props.children}</MLRNMarkerView>;
+};
+
+let lastId = 0;
+
+const MLRNMarkerView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/annotations/PointAnnotation.tsx

@@ -0,0 +1,244 @@
+import { point } from "@turf/helpers";
+import {
+  Component,
+  type SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ReactElement,
+} from "react";
+import {
+  Platform,
+  StyleSheet,
+  type ViewProps,
+  requireNativeComponent,
+} from "react-native";
+
+import { useNativeBridge, type RNMLEvent } from "../../hooks/useNativeBridge";
+import { isFunction, toJSONString } from "../../utils";
+
+export const NATIVE_MODULE_NAME = "MLRNPointAnnotation";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+  },
+});
+
+type FeaturePayload = GeoJSON.Feature<
+  GeoJSON.Point,
+  {
+    screenPointX: number;
+    screenPointY: number;
+  }
+>;
+
+export interface PointAnnotationProps {
+  /**
+   * A string that uniquely identifies the annotation
+   */
+  id: string;
+  /**
+   * The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS.
+   */
+  title?: string;
+  /**
+   * The string containing the annotation’s snippet(subtitle). Not displayed in the default callout.
+   */
+  snippet?: string;
+  /**
+   * Manually selects/deselects annotation
+   */
+  selected?: boolean;
+  /**
+   * Enable or disable dragging. Defaults to false.
+   */
+  draggable?: boolean;
+  /**
+   * The center point (specified as a map coordinate) of the annotation.
+   */
+  coordinate: number[];
+  /**
+   * Specifies the anchor being set on a particular point of the annotation.
+   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+   * Note this is only for custom annotations not the default pin view.
+   * Defaults to the center of the view.
+   */
+  anchor?: {
+    /**
+     * See anchor
+     */
+    x: number;
+    /**
+     * See anchor
+     */
+    y: number;
+  };
+  /**
+   * This callback is fired once this annotation is selected. Returns a Feature as the first param.
+   */
+  onSelected?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired once this annotation is deselected.
+   */
+  onDeselected?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired once this annotation has started being dragged.
+   */
+  onDragStart?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired once this annotation has stopped being dragged.
+   */
+  onDragEnd?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired while this annotation is being dragged.
+   */
+  onDrag?: (payload: FeaturePayload) => void;
+
+  /**
+   * Expects one child, and an optional callout can be added as well
+   */
+  children: ReactElement | [ReactElement, ReactElement];
+
+  style?: ViewProps["style"];
+}
+
+interface NativeProps extends Omit<PointAnnotationProps, "coordinate"> {
+  coordinate?: string;
+}
+
+export interface PointAnnotationRef {
+  refresh(): void;
+}
+
+/**
+ * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
+ *
+ * Consider using ShapeSource and SymbolLayer instead, if you have many points, and you have static images,
+ * they'll offer much better performance.
+ *
+ * If you need interactive views please use MarkerView,
+ * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
+ */
+export const PointAnnotation = forwardRef<
+  PointAnnotationRef,
+  PointAnnotationProps
+>(
+  (
+    {
+      anchor = { x: 0.5, y: 0.5 },
+      draggable = false,
+      ...props
+    }: PointAnnotationProps,
+    ref,
+  ) => {
+    useImperativeHandle(
+      ref,
+      (): PointAnnotationRef => ({
+        /**
+         * On android point annotation is rendered offscreen with a canvas into an image.
+         * To rerender the image from the current state of the view call refresh.
+         * Call this for example from Image#onLoad.
+         */
+        refresh,
+      }),
+    );
+
+    const { _runNativeCommand, _runPendingNativeCommands } =
+      useNativeBridge(NATIVE_MODULE_NAME);
+    const _nativeRef = useRef<Component<NativeProps>>(null);
+
+    function refresh(): void {
+      if (Platform.OS === "android") {
+        _runNativeCommand("refresh", _nativeRef.current, []);
+      }
+    }
+
+    function _onSelected(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onSelected)) {
+        props.onSelected(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDeselected(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDeselected)) {
+        props.onDeselected(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDragStart(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDragStart)) {
+        props.onDragStart(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDrag(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDrag)) {
+        props.onDrag(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDragEnd(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDragEnd)) {
+        props.onDragEnd(e.nativeEvent.payload);
+      }
+    }
+
+    function _getCoordinate(): string | undefined {
+      if (!props.coordinate) {
+        return undefined;
+      }
+      return toJSONString(point(props.coordinate));
+    }
+
+    const _setNativeRef = (nativeRef: Component<NativeProps> | null): void => {
+      _nativeRef.current = nativeRef;
+      _runPendingNativeCommands(nativeRef);
+    };
+
+    const nativeProps = {
+      ...props,
+      anchor,
+      draggable,
+      ref: (nativeRef: Component<NativeProps> | null) =>
+        _setNativeRef(nativeRef),
+      id: props.id,
+      title: props.title,
+      snippet: props.snippet,
+      selected: props.selected,
+      style: [props.style, styles.container],
+      onMapboxPointAnnotationSelected: _onSelected,
+      onMapboxPointAnnotationDeselected: _onDeselected,
+      onMapboxPointAnnotationDragStart: _onDragStart,
+      onMapboxPointAnnotationDrag: _onDrag,
+      onMapboxPointAnnotationDragEnd: _onDragEnd,
+      coordinate: _getCoordinate(),
+    };
+
+    return (
+      <MLRNPointAnnotation {...nativeProps}>
+        {props.children}
+      </MLRNPointAnnotation>
+    );
+  },
+);
+
+// eslint complains about it
+// not sure why only in this component
+PointAnnotation.displayName = "PointAnnotation";
+
+const MLRNPointAnnotation =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);