@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.10

package/javascript/components/FillExtrusionLayer.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { FillExtrusionLayerStyleProps } from "../utils/MaplibreStyles";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNFillExtrusionLayer";
+
+export interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: FillExtrusionLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<FillExtrusionLayerProps, "style">,
+    NativeBaseProps {}
+
+const RCTMLNFillExtrusionLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
+ */
+const FillExtrusionLayer: React.FC<FillExtrusionLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: FillExtrusionLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    FillExtrusionLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNFillExtrusionLayer ref={setNativeLayer} {...baseProps} />;
+};
+
+export default FillExtrusionLayer;

package/javascript/components/FillLayer.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { FillLayerStyleProps } from "../utils/MaplibreStyles";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNFillLayer";
+
+export interface FillLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: FillLayerStyleProps;
+}
+
+interface NativeProps extends Omit<FillLayerProps, "style">, NativeBaseProps {}
+
+const RCTMLNFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
+ */
+const FillLayer: React.FC<FillLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: FillLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    FillLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNFillLayer ref={setNativeLayer} {...baseProps} />;
+};
+
+export default FillLayer;

package/javascript/components/HeadingIndicator.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from "react";
+
+import SymbolLayer from "./SymbolLayer";
+// @ts-ignore
+import headingIcon from "../../assets/heading.png";
+import BaseProps from "../types/BaseProps";
+
+const style = {
+  iconImage: headingIcon,
+  iconAllowOverlap: true,
+  iconPitchAlignment: "map",
+  iconRotationAlignment: "map",
+} as const;
+
+interface HeadingIndicatorProps extends BaseProps {
+  heading?: number;
+}
+
+const HeadingIndicator = ({ heading }: HeadingIndicatorProps): ReactElement => (
+  <SymbolLayer
+    key="mapboxUserLocationHeadingIndicator"
+    id="mapboxUserLocationHeadingIndicator"
+    belowLayerID="mapboxUserLocationWhiteCircle"
+    style={{
+      iconRotate: heading,
+      ...style,
+    }}
+  />
+);
+
+export default HeadingIndicator;

package/javascript/components/HeatmapLayer.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { HeatmapLayerStyleProps } from "../utils/MaplibreStyles";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNHeatmapLayer";
+
+export interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: HeatmapLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<HeatmapLayerProps, "style">,
+    NativeBaseProps {}
+
+const RCTMLNHeatmapLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+/**
+ * HeatmapLayer is a style layer that renders one or more filled circles on the map.
+ */
+const HeatmapLayer: React.FC<HeatmapLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: HeatmapLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    HeatmapLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNHeatmapLayer ref={setNativeLayer} {...baseProps} />;
+};
+
+export default HeatmapLayer;

package/javascript/components/ImageSource.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement } from "react";
+import { requireNativeComponent } from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import BaseProps from "../types/BaseProps";
+import {
+  cloneReactChildrenWithProps,
+  isNumber,
+  resolveImagePath,
+} from "../utils";
+
+export const NATIVE_MODULE_NAME = "RCTMLNImageSource";
+
+export interface ImageSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL to the source image.
+   * Gifs are currently not supported.
+   */
+  url?: number | string;
+  /**
+   * The top left, top right, bottom right, and bottom left coordinates for the image.
+   */
+  coordinates?: [
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+  ];
+
+  children?: ReactElement | ReactElement[];
+}
+
+type NativeProps = ImageSourceProps;
+
+const RCTMLNImageSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * 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
+ */
+const ImageSource: React.FC<ImageSourceProps> = (props: ImageSourceProps) => {
+  const { setNativeRef } = useAbstractSource<NativeProps>();
+
+  const _getURL = (): string | undefined => {
+    return isNumber(props.url) ? resolveImagePath(props.url) : props.url;
+  };
+
+  if (!props.url || !props.coordinates || !props.coordinates.length) {
+    return null;
+  }
+
+  const allProps = {
+    ...props,
+    url: _getURL(),
+  };
+
+  return (
+    <RCTMLNImageSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(allProps.children, {
+        sourceID: allProps.id,
+      })}
+    </RCTMLNImageSource>
+  );
+};
+
+export default ImageSource;

package/javascript/components/Images.tsx

@@ -0,0 +1,134 @@
+import React, { ReactElement } from "react";
+import {
+  requireNativeComponent,
+  Image,
+  NativeSyntheticEvent,
+  ImageSourcePropType,
+  ImageURISource,
+} from "react-native";
+
+import { SHAPE_SOURCE_NATIVE_ASSETS_KEY } from "./ShapeSource";
+import BaseProps from "../types/BaseProps";
+
+export const NATIVE_MODULE_NAME = "RCTMLNImages";
+
+export type ImageEntry = string | ImageSourcePropType;
+
+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("/"))
+  );
+}
+
+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";
+}
+
+interface ImagesProps extends BaseProps {
+  /**
+   * Specifies the external images in key-value pairs required for the shape source.
+   * Keys are names - see iconImage expressions, values can be either urls-s objects
+   * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
+   */
+  images?: { [key: string]: ImageEntry };
+  /**
+   * If you have an asset under Image.xcassets on iOS and the drawables directory on android
+   * you can specify an array of string names with assets as the key `['pin']`.
+   */
+  nativeAssetImages?: string[];
+  /**
+   * Gets called when a Layer is trying to render an image whose key is not present in
+   * any of the `Images` component of the Map.
+   */
+  onImageMissing?(imageKey: string): void;
+  id?: string;
+  children: ReactElement;
+}
+
+/**
+ * Images defines the images used in Symbol etc layers
+ */
+const Images = ({
+  images,
+  nativeAssetImages,
+  onImageMissing,
+  id,
+  children,
+}: ImagesProps): ReactElement => {
+  const _getImages = (): {
+    images?: { [key: string]: ImageEntry };
+    nativeImages?: ImageEntry[];
+  } => {
+    if (!images && !nativeAssetImages) {
+      return {};
+    }
+
+    const imagesResult: { [key: string]: ImageEntry } = {};
+    let nativeImages: ImageEntry[] = [];
+
+    if (images) {
+      const imageNames = Object.keys(images);
+      for (const imageName of imageNames) {
+        const value = images[imageName];
+        if (
+          imageName === SHAPE_SOURCE_NATIVE_ASSETS_KEY &&
+          Array.isArray(value)
+        ) {
+          console.warn(
+            `Use of ${SHAPE_SOURCE_NATIVE_ASSETS_KEY} in Images#images is deprecated please use Images#nativeAssetImages`,
+          );
+          nativeImages = value;
+        } else if (_isUrlOrPath(value)) {
+          imagesResult[imageName] = value;
+        } else if (_isImageSourcePropType(value)) {
+          const res = Image.resolveAssetSource(value);
+          if (res && res.uri) {
+            imagesResult[imageName] = res;
+          }
+        }
+      }
+    }
+
+    if (nativeAssetImages) {
+      nativeImages = nativeAssetImages;
+    }
+
+    return {
+      images: imagesResult,
+      nativeImages,
+    };
+  };
+
+  const _onImageMissing = (
+    event: NativeSyntheticEvent<{ payload: { imageKey: string } }>,
+  ): void => {
+    if (onImageMissing) {
+      onImageMissing(event.nativeEvent.payload.imageKey);
+    }
+  };
+
+  const props = {
+    id,
+    hasOnImageMissing: !!onImageMissing,
+    onImageMissing: _onImageMissing,
+    ..._getImages(),
+  };
+
+  return <RCTMLNImages {...props}>{children}</RCTMLNImages>;
+};
+
+const RCTMLNImages = requireNativeComponent(NATIVE_MODULE_NAME);
+
+export default Images;

package/javascript/components/Light.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { requireNativeComponent } from "react-native";
+
+import useAbstractLayer, { BaseLayerProps } from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { LightLayerStyleProps } from "../utils/MaplibreStyles";
+import { StyleValue } from "../utils/StyleValue";
+
+export const NATIVE_MODULE_NAME = "RCTMLNLight";
+
+interface LightProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: LightLayerStyleProps;
+}
+
+interface NativeProps extends Omit<LightProps, "style"> {
+  reactStyle?: { [key: string]: StyleValue };
+}
+
+const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * Light represents the light source for extruded geometries
+ */
+const Light: React.FC<LightProps> = (props: LightProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    LightProps,
+    NativeProps
+  >({
+    ...props,
+  });
+
+  return (
+    <RCTMLNLight ref={setNativeLayer} testID="rctmlnLight" {...baseProps} />
+  );
+};
+
+export default Light;

package/javascript/components/LineLayer.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { LineLayerStyleProps } from "../utils/MaplibreStyles";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNLineLayer";
+
+export interface LineLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: LineLayerStyleProps;
+}
+
+interface NativeProps extends Omit<LineLayerProps, "style">, NativeBaseProps {}
+
+const RCTMLNLineLayer =
+  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
+
+/**
+ * LineLayer is a style layer that renders one or more stroked polylines on the map.
+ */
+const LineLayer: React.FC<LineLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: LineLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    LineLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNLineLayer ref={setNativeLayer} {...baseProps} />;
+};
+
+export default LineLayer;