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

package/javascript/components/VectorSource.tsx

@@ -1,25 +1,23 @@
-import {FilterExpression} from '../utils/MaplibreStyles';
-import {cloneReactChildrenWithProps, isFunction, isAndroid} from '../utils';
-import {getFilter} from '../utils/filterUtils';
-import {copyPropertiesAsDeprecated} from '../utils/deprecation';
-import BaseProps from '../types/BaseProps';
-import OnPressEvent from '../types/OnPressEvent';
-
-import AbstractSource from './AbstractSource';
-import NativeBridgeComponent from './NativeBridgeComponent';
-
-import React, {Component, ReactNode} from 'react';
+import { featureCollection } from "@turf/helpers";
+import React, { memo, useImperativeHandle } from "react";
 import {
-  NativeMethods,
   NativeModules,
   NativeSyntheticEvent,
   requireNativeComponent,
-} from 'react-native';
-import {featureCollection} from '@turf/helpers';
+} from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import useNativeBridge from "../hooks/useNativeBridge";
+import BaseProps from "../types/BaseProps";
+import OnPressEvent from "../types/OnPressEvent";
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
+import { FilterExpression } from "../utils/MaplibreStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+export const NATIVE_MODULE_NAME = "RCTMLNVectorSource";
 
 interface VectorSourceProps extends BaseProps {
   /**
@@ -85,123 +83,136 @@ interface VectorSourceProps extends BaseProps {
 
 type NativeProps = VectorSourceProps;
 
+const RCTMLNVectorSource =
+  requireNativeComponent<VectorSourceProps>(NATIVE_MODULE_NAME);
+
 /**
  * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format 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.
  */
-class VectorSource extends NativeBridgeComponent(
-  AbstractSource<VectorSourceProps, NativeProps>,
-  NATIVE_MODULE_NAME,
-) {
-  static defaultProps = {
-    id: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  constructor(props: VectorSourceProps) {
-    super(props);
-  }
-
-  _setNativeRef(
-    nativeRef: (Component<NativeProps> & Readonly<NativeMethods>) | null,
-  ): void {
-    if (nativeRef) {
-      this.setNativeRef(nativeRef);
-      super._runPendingNativeCommands(nativeRef);
-    }
-  }
-
-  /**
-   * Returns all features that match the query parameters regardless of whether or not the feature is
-   * currently rendered on the map. The domain of the query includes all currently-loaded vector tiles
-   * and GeoJSON source tiles. This function does not check tiles outside of the visible viewport.
-   *
-   * @example
-   * vectorSource.features(['id1', 'id2'])
-   *
-   * @param  {Array=} layerIDs - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
-   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-   * @return {GeoJSON.FeatureCollection}
-   */
-  async features(
-    layerIDs = [],
-    filter?: FilterExpression,
-  ): Promise<GeoJSON.FeatureCollection> {
-    if (!this._nativeRef) {
-      return featureCollection([]);
-    }
-    const res: {data: string | GeoJSON.FeatureCollection} =
-      await this._runNativeCommand('features', this._nativeRef, [
-        [[layerIDs, getFilter(filter)]],
-      ]);
-
-    if (isAndroid()) {
-      return JSON.parse(res?.data as string);
-    }
-
-    return res.data as GeoJSON.FeatureCollection;
-  }
-
-  onPress(event: NativeSyntheticEvent<{payload: OnPressEvent}>): void {
-    const {onPress} = this.props;
-
-    if (!onPress) {
-      return;
-    }
-    const {
-      nativeEvent: {
-        payload: {features, coordinates, point},
-      },
-    } = event;
-    let newEvent = {
-      features,
-      coordinates,
-      point,
-    };
-    newEvent = copyPropertiesAsDeprecated(
-      event,
-      newEvent,
-      (key: string) => {
-        console.warn(
-          `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
-        );
-      },
+const VectorSource = memo(
+  React.forwardRef(
+    (
       {
-        nativeEvent: (origNativeEvent: OnPressEvent) => ({
-          ...origNativeEvent,
-          payload: features[0],
-        }),
-      },
-    );
-
-    onPress(newEvent);
-  }
-
-  render(): ReactNode {
-    const props = {
-      id: this.props.id,
-      url: this.props.url,
-      tileUrlTemplates: this.props.tileUrlTemplates,
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      tms: this.props.tms,
-      attribution: this.props.attribution,
-      hitbox: this.props.hitbox,
-      hasPressListener: isFunction(this.props.onPress),
-      onMapboxVectorSourcePress: this.onPress.bind(this),
-      onPress: undefined,
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
-    };
-    return (
-      <RCTMGLVectorSource ref={this.setNativeRef} {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMGLVectorSource>
-    );
-  }
-}
+        id = MapLibreGL.StyleSource.DefaultSourceID,
+        ...props
+      }: VectorSourceProps,
+      ref,
+    ) => {
+      // * exposes the methods of the function component so we don't break projects that depend on calling this methods
+      useImperativeHandle(ref, () => ({
+        /**
+         * Returns all features that match the query parameters regardless of whether or not the feature is
+         * currently rendered on the map. The domain of the query includes all currently-loaded vector tiles
+         * and GeoJSON source tiles. This function does not check tiles outside of the visible viewport.
+         *
+         * @example
+         * vectorSource.features(['id1', 'id2'])
+         *
+         * @param  {Array=} layerIDs - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
+         * @param  {Array=} filter - an optional filter statement to filter the returned Features.
+         * @return {GeoJSON.FeatureCollection}
+         */
+        features,
+        onPress,
+      }));
+
+      const {
+        _runNativeCommand,
+        //  _runPendingNativeCommands,
+        _onAndroidCallback,
+      } = useNativeBridge(NATIVE_MODULE_NAME);
+      const { setNativeRef, _nativeRef } = useAbstractSource<NativeProps>();
+
+      // const _setNativeRef = (
+      //   nativeRef: (Component<NativeProps> & Readonly<NativeMethods>) | null,
+      // ): void => {
+      //   if (nativeRef) {
+      //     setNativeRef(nativeRef);
+      //     _runPendingNativeCommands(nativeRef);
+      //   }
+      // };
+
+      const features = async (
+        layerIDs = [],
+        filter?: FilterExpression,
+      ): Promise<GeoJSON.FeatureCollection> => {
+        if (!_nativeRef) {
+          return featureCollection([]);
+        }
+        const res: { data: string | GeoJSON.FeatureCollection } =
+          await _runNativeCommand("features", _nativeRef, [
+            [[layerIDs, getFilter(filter)]],
+          ]);
+
+        if (isAndroid()) {
+          return JSON.parse(res?.data as string);
+        }
+
+        return res.data as GeoJSON.FeatureCollection;
+      };
+
+      const onPress = (
+        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
+      ): void => {
+        const { onPress } = props;
+
+        if (!onPress) {
+          return;
+        }
+        const {
+          nativeEvent: {
+            payload: { features, coordinates, point },
+          },
+        } = event;
+        let newEvent = {
+          features,
+          coordinates,
+          point,
+        };
+        newEvent = copyPropertiesAsDeprecated(
+          event,
+          newEvent,
+          (key: string) => {
+            console.warn(
+              `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
+            );
+          },
+          {
+            nativeEvent: (origNativeEvent: OnPressEvent) => ({
+              ...origNativeEvent,
+              payload: features[0],
+            }),
+          },
+        );
 
-const RCTMGLVectorSource =
-  requireNativeComponent<VectorSourceProps>(NATIVE_MODULE_NAME);
+        onPress(newEvent);
+      };
+
+      const allProps = {
+        id,
+        url: props.url,
+        tileUrlTemplates: props.tileUrlTemplates,
+        minZoomLevel: props.minZoomLevel,
+        maxZoomLevel: props.maxZoomLevel,
+        tms: props.tms,
+        attribution: props.attribution,
+        hitbox: props.hitbox,
+        hasPressListener: isFunction(props.onPress),
+        onMapboxVectorSourcePress: onPress,
+        onPress: undefined,
+        onAndroidCallback: isAndroid() ? _onAndroidCallback : undefined,
+      };
+
+      return (
+        <RCTMLNVectorSource ref={setNativeRef} {...allProps}>
+          {cloneReactChildrenWithProps(props.children, {
+            sourceID: id,
+          })}
+        </RCTMLNVectorSource>
+      );
+    },
+  ),
+);
 
 export default VectorSource;

package/javascript/components/annotations/Annotation.tsx

@@ -1,11 +1,16 @@
-import SymbolLayer from '../SymbolLayer';
-import Animated from '../../utils/animated/Animated';
-import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
-import OnPressEvent from '../../types/OnPressEvent';
-import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
-
-import React, {ReactElement} from 'react';
-import {Animated as RNAnimated, Easing} from 'react-native';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+} from "react";
+import { Animated as RNAnimated, Easing } from "react-native";
+
+import OnPressEvent from "../../types/OnPressEvent";
+import { SymbolLayerStyleProps } from "../../utils/MaplibreStyles";
+import { AnimatedShapeSource } from "../../utils/animated/Animated";
+import AnimatedMapPoint from "../../utils/animated/AnimatedPoint";
+import SymbolLayer from "../SymbolLayer";
 
 interface AnnotationProps {
   id: string;
@@ -19,116 +24,141 @@ interface AnnotationProps {
   icon?: string | number | object;
 }
 
-type AnnotationState = {
-  shape: AnimatedMapPoint | GeoJSON.Point | null;
-};
+type Shape = AnimatedMapPoint | 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 AnimatedMapPoint(point);
+  }
 
-class Annotation extends React.Component<AnnotationProps, AnnotationState> {
-  static defaultProps = {
-    animated: false,
-    animationDuration: 1000,
-    animationEasingFunction: Easing.linear,
-  };
+  return point;
+}
 
-  constructor(props: AnnotationProps) {
-    super(props);
+function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint {
+  return shape instanceof AnimatedMapPoint;
+}
 
-    const shape = this._getShapeFromProps(props);
+interface AnnotationRef {
+  onPress(event: OnPressEvent): void;
+  symbolStyle: SymbolLayerStyleProps | undefined;
+}
 
-    this.state = {
-      shape: props.animated ? new AnimatedMapPoint(shape) : shape,
+const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
+  (
+    {
+      animated = false,
+      animationDuration = 1000,
+      animationEasingFunction = Easing.linear,
+      ...otherProps
+    }: AnnotationProps,
+    ref,
+  ) => {
+    const props = {
+      ...otherProps,
+      animated,
+      animationDuration,
+      animationEasingFunction,
     };
 
-    this.onPress = this.onPress.bind(this);
-  }
+    useImperativeHandle(
+      ref,
+      (): AnnotationRef => ({
+        onPress,
+        symbolStyle,
+      }),
+    );
 
-  componentDidUpdate(prevProps: AnnotationProps): void {
-    if (!Array.isArray(this.props.coordinates)) {
-      this.setState({shape: null});
-      return;
-    }
+    const [shape, setShape] = React.useState<Shape | null>(
+      getShapeFromProps(props),
+    );
 
-    const hasCoordChanged =
-      prevProps.coordinates?.[0] !== this.props.coordinates?.[0] ||
-      prevProps.coordinates?.[1] !== this.props.coordinates?.[1];
+    // this will run useEffect only when actual coordinates values change
+    const coordinateDeps = props.coordinates?.join(",");
 
-    if (!hasCoordChanged) {
-      return;
-    }
+    useEffect(() => {
+      if (!Array.isArray(props.coordinates)) {
+        setShape(null);
+        return;
+      }
 
-    if (this.props.animated && this.state.shape) {
-      // flush current animations
-      (this.state.shape as AnimatedMapPoint).stopAnimation();
-
-      (this.state.shape as AnimatedMapPoint)
-        .timing({
-          coordinates: this.props.coordinates,
-          easing: this.props.animationEasingFunction,
-          duration: this.props.animationDuration,
-        })
-        .start();
-    } else if (!this.state.shape || !this.props.animated) {
-      const shape = this._getShapeFromProps();
-
-      this.setState({
-        shape: this.props.animated ? new AnimatedMapPoint(shape) : shape,
-      });
-    }
-  }
+      if (shape && isShapeAnimated(shape)) {
+        shape.stopAnimation();
 
-  onPress(event: OnPressEvent): void {
-    if (this.props.onPress) {
-      this.props.onPress(event);
-    }
-  }
+        shape
+          .timing({
+            coordinates: props.coordinates,
+            easing: animationEasingFunction,
+            duration: animationDuration,
+          })
+          .start();
 
-  _getShapeFromProps(props: Partial<AnnotationProps> = {}): GeoJSON.Point {
-    const lng = props.coordinates?.[0] || 0;
-    const lat = props.coordinates?.[1] || 0;
-    return {type: 'Point', coordinates: [lng, lat]};
-  }
+        return;
+      }
+
+      if (!shape || !isShapeAnimated(shape)) {
+        const newShape = getShapeFromProps(props);
+        setShape(newShape);
+      }
+    }, [coordinateDeps]);
+
+    const onPressProp = props.onPress;
 
-  get symbolStyle(): SymbolLayerStyleProps | undefined {
-    if (!this.props.icon) {
-      return undefined;
+    const _onPress = useCallback(
+      (event: OnPressEvent) => {
+        if (onPressProp) {
+          onPressProp(event);
+        }
+      },
+      [onPressProp],
+    );
+
+    // This function is needed to correctly generate Annotation.md doc
+    function onPress(event: OnPressEvent): void {
+      _onPress(event);
     }
-    return Object.assign({}, this.props.style, {
-      iconImage: this.props.icon,
-    });
-  }
 
-  render(): ReactElement | null {
-    if (!this.props.coordinates) {
+    if (!props.coordinates) {
       return null;
     }
 
     const children = [];
-
-    if (this.symbolStyle) {
+    const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
+      ? {
+          ...props.style,
+          iconImage: typeof props.icon === "string" ? props.icon : undefined,
+        }
+      : undefined;
+
+    if (symbolStyle) {
       children.push(
-        <SymbolLayer id={`${this.props.id}-symbol`} style={this.symbolStyle} />,
+        <SymbolLayer id={`${props.id}-symbol`} style={symbolStyle} />,
       );
     }
 
-    if (this.props.children) {
-      if (Array.isArray(this.props.children)) {
-        children.push(...this.props.children);
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        children.push(...props.children);
       } else {
-        children.push(this.props.children);
+        children.push(props.children);
       }
     }
 
     return (
-      <Animated.ShapeSource
-        id={this.props.id}
-        onPress={this.onPress}
-        shape={
-          this.state.shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>
-        }>
+      <AnimatedShapeSource
+        id={props.id}
+        onPress={_onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
         {children}
-      </Animated.ShapeSource>
+      </AnimatedShapeSource>
     );
-  }
-}
+  },
+);
+
+Annotation.displayName = "Annotation";
 
 export default Annotation;

package/javascript/hooks/useAbstractLayer.ts

@@ -0,0 +1,127 @@
+import React, { useMemo, useRef } from "react";
+import { processColor, NativeMethods } from "react-native";
+
+import BaseProps from "../types/BaseProps";
+import {
+  AllLayerStyleProps,
+  ExpressionField,
+  ExpressionName,
+  FilterExpression,
+} from "../utils/MaplibreStyles";
+import { StyleValue, transformStyle } from "../utils/StyleValue";
+import { getFilter } from "../utils/filterUtils";
+
+export interface BaseLayerProps {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+  filter?: FilterExpression;
+  /**
+   * Customizable style attributes
+   */
+  style?: AllLayerStyleProps;
+}
+
+export interface NativeBaseProps {
+  reactStyle?: { [key: string]: StyleValue };
+}
+
+export default function useAbstractLayer<
+  Props extends BaseProps,
+  NativeProps extends NativeBaseProps,
+>(
+  props: Props & BaseLayerProps,
+): {
+  baseProps: Props & BaseLayerProps;
+  setNativeLayer: (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ) => void;
+  getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
+  setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
+} {
+  const nativeLayer = useRef<
+    (React.Component<NativeProps> & Readonly<NativeMethods>) | null
+  >(null);
+
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      id: props.id,
+      sourceID: props.sourceID,
+      reactStyle: transformStyle(props.style),
+      minZoomLevel: props.minZoomLevel,
+      maxZoomLevel: props.maxZoomLevel,
+      aboveLayerID: props.aboveLayerID,
+      belowLayerID: props.belowLayerID,
+      layerIndex: props.layerIndex,
+      filter: getFilter(props.filter) as [ExpressionName, ...ExpressionField[]],
+      style: undefined,
+    };
+  }, [props]);
+
+  const setNativeLayer = (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ): void => {
+    nativeLayer.current = instance;
+  };
+
+  const getStyleTypeFormatter = (
+    styleType: string,
+  ): typeof processColor | undefined => {
+    return styleType === "color" ? processColor : undefined;
+  };
+
+  const setNativeProps = (nativeProps: { [key: string]: unknown }): void => {
+    if (nativeLayer.current) {
+      let propsToPass = nativeProps;
+      if (nativeProps.style) {
+        propsToPass = {
+          ...nativeProps,
+          reactStyle: transformStyle(props.style),
+        };
+      }
+      nativeLayer.current.setNativeProps(propsToPass);
+    }
+  };
+
+  return {
+    baseProps,
+    setNativeLayer,
+    getStyleTypeFormatter,
+    setNativeProps,
+  };
+}