@maplibre/maplibre-react-native 10.0.0-alpha.9 → 10.0.0-beta.2

package/javascript/components/MarkerView.tsx

@@ -1,88 +0,0 @@
-import React, { ReactElement, useMemo } from "react";
-import { Platform, requireNativeComponent, ViewProps } from "react-native";
-
-import PointAnnotation from "./PointAnnotation";
-import { toJSONString } from "../utils";
-import { makePoint } from "../utils/geoUtils";
-
-export const NATIVE_MODULE_NAME = "RCTMLNMarkerView";
-
-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: React.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://docs.mapbox.com/android/plugins/overview/markerview/) on Android
- * and PointAnnotation on iOS.
- */
-const MarkerView = (props: MarkerViewProps): ReactElement => {
-  const coordinate = props.coordinate
-    ? toJSONString(makePoint(props.coordinate))
-    : undefined;
-
-  const idForPointAnnotation = useMemo(() => {
-    MarkerView.lastId = MarkerView.lastId + 1;
-    return `MV-${MarkerView.lastId}`;
-  }, []);
-
-  if (Platform.OS === "ios") {
-    return <PointAnnotation id={idForPointAnnotation} {...props} />;
-  }
-
-  const propsToSend = {
-    ...props,
-    coordinate,
-  };
-
-  return <RCTMLNMarkerView {...propsToSend}>{props.children}</RCTMLNMarkerView>;
-};
-
-MarkerView.lastId = 0;
-MarkerView.defaultProps = {
-  anchor: { x: 0.5, y: 0.5 },
-  allowOverlap: false,
-  isSelected: false,
-};
-
-const RCTMLNMarkerView =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default MarkerView;

package/javascript/components/NativeUserLocation.tsx

@@ -1,31 +0,0 @@
-import React, { ReactElement } from "react";
-import { requireNativeComponent } from "react-native";
-
-const NATIVE_MODULE_NAME = "RCTMLNNativeUserLocation";
-
-interface NativeUserLocationProps {
-  /**
-   * Android render mode.
-   *
-   *  - normal: just a circle
-   *  - compass: triangle with heading
-   *  - gps: large arrow
-   *
-   * @platform android
-   */
-  androidRenderMode?: "normal" | "compass" | "gps";
-  /**
-   * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
-   *
-   * @platform ios
-   */
-  iosShowsUserHeadingIndicator?: boolean;
-}
-
-const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => {
-  return <RCTMLNNativeUserLocation {...props} />;
-};
-
-const RCTMLNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
-
-export default NativeUserLocation;

package/javascript/components/PointAnnotation.tsx

@@ -1,245 +0,0 @@
-import React, {
-  Component,
-  SyntheticEvent,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  ReactElement,
-} from "react";
-import {
-  Platform,
-  StyleSheet,
-  ViewProps,
-  requireNativeComponent,
-} from "react-native";
-
-import useNativeBridge, { RNMLEvent } from "../hooks/useNativeBridge";
-import { isFunction, toJSONString } from "../utils";
-import { makePoint } from "../utils/geoUtils";
-
-export const NATIVE_MODULE_NAME = "RCTMLNPointAnnotation";
-
-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
-   * @type {[type]}
-   */
-  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: React.ReactElement | [React.ReactElement, React.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 interctive views please use MarkerView,
- * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
- */
-const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
-  (
-    {
-      anchor = { x: 0.5, y: 0.5 },
-      draggable = false,
-      ...props
-    }: PointAnnotationProps,
-    ref,
-  ): ReactElement => {
-    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(makePoint(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 (
-      <RCTMLNPointAnnotation {...nativeProps}>
-        {props.children}
-      </RCTMLNPointAnnotation>
-    );
-  },
-);
-
-// eslint complains about it
-// not sure why only in this component
-PointAnnotation.displayName = "PointAnnotation";
-
-const RCTMLNPointAnnotation =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default PointAnnotation;

package/javascript/components/RasterLayer.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { NativeModules, requireNativeComponent } from "react-native";
-
-import useAbstractLayer, {
-  BaseLayerProps,
-  NativeBaseProps,
-} from "../hooks/useAbstractLayer";
-import BaseProps from "../types/BaseProps";
-import { RasterLayerStyleProps } from "../utils/MaplibreStyles";
-
-const MapLibreGL = NativeModules.MLNModule;
-
-export const NATIVE_MODULE_NAME = "RCTMLNRasterLayer";
-
-export interface RasterLayerProps extends BaseProps, BaseLayerProps {
-  /**
-   * Customizable style attributes
-   */
-  style?: RasterLayerStyleProps;
-}
-
-interface NativeProps
-  extends Omit<RasterLayerProps, "style">,
-    NativeBaseProps {}
-
-const RCTMLNRasterLayer =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-const RasterLayer: React.FC<RasterLayerProps> = ({
-  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
-  ...props
-}: RasterLayerProps) => {
-  const { baseProps, setNativeLayer } = useAbstractLayer<
-    RasterLayerProps,
-    NativeProps
-  >({
-    ...props,
-    sourceID,
-  });
-
-  return <RCTMLNRasterLayer ref={setNativeLayer} {...baseProps} />;
-};
-
-export default RasterLayer;

package/javascript/components/RasterSource.tsx

@@ -1,114 +0,0 @@
-import React from "react";
-import { NativeModules, requireNativeComponent } from "react-native";
-
-import useAbstractSource from "../hooks/useAbstractSource";
-import useOnce from "../hooks/useOnce";
-import BaseProps from "../types/BaseProps";
-import { cloneReactChildrenWithProps } from "../utils";
-
-const MapLibreGL = NativeModules.MLNModule;
-
-export const NATIVE_MODULE_NAME = "RCTMLNRasterSource";
-
-const isTileTemplateUrl = (url?: string): url is string =>
-  !!url &&
-  (url.includes("{z}") || url.includes("{bbox-") || url.includes("{quadkey}"));
-
-interface RasterSourceProps extends BaseProps {
-  /**
-   * A string that uniquely identifies the source.
-   */
-  id: string;
-  /**
-   * 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/raster-tiles/{z}/{x}/{y}.png
-   */
-  tileUrlTemplates?: 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
-   * maxZoomLevel, if specified. The default value for this option is 0.
-   */
-  minZoomLevel?: 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
-   * minZoomLevel, if specified. The default value for this option is 22.
-   */
-  maxZoomLevel?: number;
-  /**
-   * Size of the map tiles.
-   * Mapbox urls default to 256, all others default to 512.
-   */
-  tileSize?: number;
-  /**
-   * Influences the y direction of the tile coordinates. (tms inverts y axis)
-   */
-  tms?: boolean;
-  /**
-   * 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?: React.ReactElement | React.ReactElement[];
-}
-
-type NativeProps = RasterSourceProps;
-
-const RCTMLNRasterSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-/**
- * 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.
- */
-const RasterSource: React.FC<RasterSourceProps> = ({
-  id = MapLibreGL.StyleSource.DefaultSourceID,
-  ...props
-}: RasterSourceProps) => {
-  useOnce(() => {
-    if (props.url && props.tileUrlTemplates) {
-      console.warn(
-        `RasterSource 'url' property contains a Tile URL Template, but is intended for a StyleJSON URL. Please migrate your VectorSource to use: \`tileUrlTemplates=["${props.url}"]\` instead.`,
-      );
-    }
-  });
-
-  const { setNativeRef } = useAbstractSource<NativeProps>();
-
-  let { url, tileUrlTemplates } = props;
-
-  // Swapping url for tileUrlTemplates to provide backward compatiblity
-  // when RasterSource supported only tile url as url prop
-  if (isTileTemplateUrl(url)) {
-    tileUrlTemplates = [url];
-    url = undefined;
-  }
-  const allProps = {
-    ...props,
-    id,
-    url,
-    tileUrlTemplates,
-    minZoomLevel: props.minZoomLevel,
-    maxZoomLevel: props.maxZoomLevel,
-    tileSize: props.tileSize,
-    tms: props.tms,
-    attribution: props.attribution,
-  };
-
-  return (
-    <RCTMLNRasterSource ref={setNativeRef} {...allProps}>
-      {cloneReactChildrenWithProps(props.children, {
-        sourceID: id,
-      })}
-    </RCTMLNRasterSource>
-  );
-};
-
-export default RasterSource;