@maplibre/maplibre-react-native 10.2.1 → 10.4.0

package/src/components/Images.tsx

@@ -1,39 +1,35 @@
-import { type ReactNode } from "react";
+import { type ReactNode, useMemo } from "react";
 import {
   Image,
+  type ImageResolvedAssetSource,
   type ImageSourcePropType,
-  type ImageURISource,
   type NativeSyntheticEvent,
   requireNativeComponent,
 } from "react-native";
+import type {
+  ImageRequireSource,
+  ImageURISource,
+} from "react-native/Libraries/Image/ImageSource";
 
 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 +55,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 +64,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/types/MapLibreRNStyles.ts

@@ -301,11 +301,11 @@ export interface LineLayerStyle {
    */
   lineBlurTransition?: Transition;
   /**
-   * Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. Also note that zoomDependent expressions will be evaluated only at integer zoom levels.
+   * Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. ZoomDependent expressions will be evaluated only at integer zoom levels. The only way to create an array value is using `["literal", [...]]`; arrays cannot be read from or derived from feature properties.
    *
    * @disabledBy linePattern
    */
-  lineDasharray?: Value<number[], ["zoom"]>;
+  lineDasharray?: Value<number[], ["zoom", "feature"]>;
 
   /**
    * The transition affecting any changes to this layer’s lineDasharray property.
@@ -463,7 +463,7 @@ export interface SymbolLayerStyle {
    */
   textField?: Value<FormattedString, ["zoom", "feature"]>;
   /**
-   * Font stack to use for displaying text.
+   * Fonts to use for displaying text. If the `glyphs` root property is specified, this array is joined together and interpreted as a font stack name. Otherwise, it is interpreted as a cascading fallback list of local font names.
    *
    * @requires textField
    */
@@ -1048,7 +1048,7 @@ export interface HillshadeLayerStyle {
    */
   visibility?: "visible" | "none";
   /**
-   * The direction of the light source used to generate the hillshading with 0 as the top of the viewport if `hillshadeIlluminationAnchor` is set to `viewport` and due north if `hillshadeIlluminationAnchor` is set to `map`.
+   * The direction of the light source(s) used to generate the hillshading with 0 as the top of the viewport if `hillshadeIlluminationAnchor` is set to `viewport` and due north if `hillshadeIlluminationAnchor` is set to `map`. Only when `hillshadeMethod` is set to `multidirectional` can you specify multiple light sources.
    */
   hillshadeIlluminationDirection?: Value<number, ["zoom"]>;
   /**
@@ -1065,7 +1065,7 @@ export interface HillshadeLayerStyle {
    */
   hillshadeExaggerationTransition?: Transition;
   /**
-   * The shading color of areas that face away from the light source.
+   * The shading color of areas that face away from the light source(s). Only when `hillshadeMethod` is set to `multidirectional` can you specify multiple light sources.
    */
   hillshadeShadowColor?: Value<string, ["zoom"]>;
 
@@ -1074,7 +1074,7 @@ export interface HillshadeLayerStyle {
    */
   hillshadeShadowColorTransition?: Transition;
   /**
-   * The shading color of areas that faces towards the light source.
+   * The shading color of areas that faces towards the light source(s). Only when `hillshadeMethod` is set to `multidirectional` can you specify multiple light sources.
    */
   hillshadeHighlightColor?: Value<string, ["zoom"]>;