@maplibre/maplibre-react-native 10.0.0-alpha.1 → 10.0.0-alpha.11

package/javascript/components/UserLocation.tsx

@@ -1,31 +1,30 @@
-import locationManager, {Location} from '../modules/location/locationManager';
-import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
+import React, { ReactElement, useEffect, useImperativeHandle } from "react";
 
-import Annotation from './annotations/Annotation';
-import CircleLayer from './CircleLayer';
-import HeadingIndicator from './HeadingIndicator';
-import NativeUserLocation from './NativeUserLocation';
+import CircleLayer from "./CircleLayer";
+import HeadingIndicator from "./HeadingIndicator";
+import NativeUserLocation from "./NativeUserLocation";
+import Annotation from "./annotations/Annotation";
+import locationManager, { Location } from "../modules/location/locationManager";
+import { CircleLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-
-const mapboxBlue = 'rgba(51, 181, 229, 100)';
+const mapboxBlue = "rgba(51, 181, 229, 100)";
 
 const layerStyles: Record<string, CircleLayerStyleProps> = {
   pluse: {
     circleRadius: 15,
     circleColor: mapboxBlue,
     circleOpacity: 0.2,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
   background: {
     circleRadius: 9,
-    circleColor: '#fff',
-    circlePitchAlignment: 'map',
+    circleColor: "#fff",
+    circlePitchAlignment: "map",
   },
   foreground: {
     circleRadius: 6,
     circleColor: mapboxBlue,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
 };
 
@@ -50,7 +49,7 @@ export const normalIcon = (
     style={layerStyles.foreground}
   />,
   ...(showsUserHeadingIndicator && heading
-    ? [HeadingIndicator({heading})]
+    ? [HeadingIndicator({ heading })]
     : []),
 ];
 
@@ -63,7 +62,7 @@ interface UserLocationProps {
    * Which render mode to use.
    * Can either be `normal` or `native`
    */
-  renderMode?: 'normal' | 'native';
+  renderMode?: "normal" | "native";
   /**
    * native/android only render mode
    *
@@ -73,7 +72,7 @@ interface UserLocationProps {
    *
    * @platform android
    */
-  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  androidRenderMode?: "normal" | "compass" | "gps";
   /**
    * Whether location icon is visible
    */
@@ -109,168 +108,182 @@ interface UserLocationState {
 }
 
 export enum UserLocationRenderMode {
-  Native = 'native',
-  Normal = 'normal',
+  Native = "native",
+  Normal = "normal",
 }
 
-class UserLocation extends React.Component<
-  UserLocationProps,
-  UserLocationState
-> {
-  static defaultProps = {
-    animated: true,
-    visible: true,
-    showsUserHeadingIndicator: false,
-    minDisplacement: 0,
-    renderMode: 'normal',
-  };
-
-  constructor(props: UserLocationProps) {
-    super(props);
-
-    this.state = {
-      shouldShowUserLocation: false,
-    };
-
-    this._onLocationUpdate = this._onLocationUpdate.bind(this);
-  }
-
-  // required as #setLocationManager attempts to setState
-  // after component unmount
-  _isMounted: boolean | null = null;
-
-  renderMode: UserLocationRenderMode | undefined;
-  locationManagerRunning = false;
-
-  async componentDidMount(): Promise<void> {
-    this._isMounted = true;
+export interface UserLocationRef {
+  setLocationManager: (props: { running: boolean }) => Promise<void>;
+  needsLocationManagerRunning: () => boolean;
+  _onLocationUpdate: (location: Location | null) => void;
+}
 
-    await this.setLocationManager({
-      running: this.needsLocationManagerRunning(),
-    });
+const UserLocation = React.memo(
+  React.forwardRef<UserLocationRef, UserLocationProps>(
+    (
+      {
+        animated = true,
+        visible = true,
+        showsUserHeadingIndicator = false,
+        minDisplacement = 0,
+        renderMode = "normal",
+        androidRenderMode,
+        children,
+        onUpdate,
+        onPress,
+      }: UserLocationProps,
+      ref,
+    ) => {
+      const _isMounted = React.useRef<boolean | null>(null);
+      const locationManagerRunning = React.useRef<boolean>(false);
+
+      const [userLocationState, setUserLocationState] =
+        React.useState<UserLocationState>({
+          shouldShowUserLocation: false,
+        });
+
+      useImperativeHandle(
+        ref,
+        (): UserLocationRef => ({
+          /**
+           * Whether to start or stop listening to the locationManager
+           *
+           * Notice, that listening will start automatically when
+           * either `onUpdate` or `visible` are set
+           *
+           * @async
+           * @param {Object} running - Object with key `running` and `boolean` value
+           * @return {Promise<void>}
+           */
+          setLocationManager,
+          /**
+           *
+           * If locationManager should be running
+           *
+           * @return {boolean}
+           */
+          needsLocationManagerRunning,
+          _onLocationUpdate,
+        }),
+      );
+
+      useEffect(() => {
+        _isMounted.current = true;
+
+        setLocationManager({
+          running: needsLocationManagerRunning(),
+        }).then(() => {
+          if (renderMode === UserLocationRenderMode.Native) {
+            return;
+          }
+
+          locationManager.setMinDisplacement(minDisplacement ?? 0);
+        });
+
+        return (): void => {
+          _isMounted.current = false;
+          setLocationManager({ running: false });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      useEffect(() => {
+        locationManager.setMinDisplacement(minDisplacement ?? 0);
+      }, [minDisplacement]);
+
+      useEffect(() => {
+        if (!_isMounted.current) {
+          return;
+        }
+
+        setLocationManager({
+          running: needsLocationManagerRunning(),
+        });
+      });
+
+      async function setLocationManager({
+        running,
+      }: {
+        running: boolean;
+      }): Promise<void> {
+        if (locationManagerRunning.current !== running) {
+          locationManagerRunning.current = running;
+
+          if (running) {
+            locationManager.addListener(_onLocationUpdate);
+            const location = await locationManager.getLastKnownLocation();
+            _onLocationUpdate(location);
+          } else {
+            locationManager.removeListener(_onLocationUpdate);
+          }
+        }
+      }
 
-    if (this.renderMode === UserLocationRenderMode.Native) {
-      return;
-    }
+      function needsLocationManagerRunning(): boolean {
+        return !!(
+          !!onUpdate ||
+          (renderMode === UserLocationRenderMode.Normal && visible)
+        );
+      }
 
-    locationManager.setMinDisplacement(this.props.minDisplacement ?? 0);
-  }
+      function _onLocationUpdate(location: Location | null): void {
+        if (!_isMounted.current || !location) {
+          return;
+        }
+
+        let coordinates;
+        let heading;
+
+        if (location && location.coords) {
+          const { longitude, latitude } = location.coords;
+          heading = location.coords.heading;
+          coordinates = [longitude, latitude];
+        }
+
+        setUserLocationState({
+          ...userLocationState,
+          coordinates,
+          heading,
+        });
+
+        if (onUpdate) {
+          onUpdate(location);
+        }
+      }
 
-  async componentDidUpdate(prevProps: UserLocationProps): Promise<void> {
-    await this.setLocationManager({
-      running: this.needsLocationManagerRunning(),
-    });
+      if (!visible) {
+        return null;
+      }
 
-    if (this.props.minDisplacement !== prevProps.minDisplacement) {
-      locationManager.setMinDisplacement(this.props.minDisplacement ?? 0);
-    }
-  }
+      if (renderMode === UserLocationRenderMode.Native) {
+        const props = {
+          androidRenderMode,
+          iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
+        };
 
-  async componentWillUnmount(): Promise<void> {
-    this._isMounted = false;
-    await this.setLocationManager({running: false});
-  }
+        return <NativeUserLocation {...props} />;
+      }
 
-  /**
-   * Whether to start or stop listening to the locationManager
-   *
-   * Notice, that listening will start automatically when
-   * either `onUpdate` or `visible` are set
-   *
-   * @async
-   * @param {Object} running - Object with key `running` and `boolean` value
-   * @return {Promise<void>}
-   */
-  async setLocationManager({running}: {running: boolean}): Promise<void> {
-    if (this.locationManagerRunning !== running) {
-      this.locationManagerRunning = running;
-      if (running) {
-        locationManager.addListener(this._onLocationUpdate);
-        const location = await locationManager.getLastKnownLocation();
-        this._onLocationUpdate(location);
-      } else {
-        locationManager.removeListener(this._onLocationUpdate);
+      if (!userLocationState.coordinates) {
+        return null;
       }
-    }
-  }
 
-  /**
-   *
-   * If locationManager should be running
-   *
-   * @return {boolean}
-   */
-  needsLocationManagerRunning(): boolean {
-    return !!(
-      !!this.props.onUpdate ||
-      (this.props.renderMode === UserLocationRenderMode.Normal &&
-        this.props.visible)
-    );
-  }
-
-  _onLocationUpdate(location: Location | null): void {
-    if (!this._isMounted || !location) {
-      return;
-    }
-    let coordinates;
-    let heading;
-
-    if (location && location.coords) {
-      const {longitude, latitude} = location.coords;
-      heading = location.coords.heading;
-      coordinates = [longitude, latitude];
-    }
-
-    this.setState({
-      coordinates,
-      heading,
-    });
-
-    if (this.props.onUpdate) {
-      this.props.onUpdate(location);
-    }
-  }
-
-  _renderNative(): ReactElement {
-    const {androidRenderMode, showsUserHeadingIndicator} = this.props;
-
-    const props = {
-      androidRenderMode,
-      iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
-    };
-    return <NativeUserLocation {...props} />;
-  }
-
-  render(): ReactElement | null {
-    const {heading, coordinates} = this.state;
-    const {children, visible, showsUserHeadingIndicator, onPress, animated} =
-      this.props;
-
-    if (!visible) {
-      return null;
-    }
-
-    if (this.props.renderMode === UserLocationRenderMode.Native) {
-      return this._renderNative();
-    }
-
-    if (!coordinates) {
-      return null;
-    }
-
-    return (
-      <Annotation
-        animated={animated}
-        id="mapboxUserLocation"
-        onPress={onPress}
-        coordinates={coordinates}
-        style={{
-          iconRotate: heading,
-        }}>
-        {children || normalIcon(showsUserHeadingIndicator, heading)}
-      </Annotation>
-    );
-  }
-}
+      return (
+        <Annotation
+          animated={animated}
+          id="mapboxUserLocation"
+          onPress={onPress}
+          coordinates={userLocationState.coordinates}
+          style={{
+            iconRotate: userLocationState.heading,
+          }}
+        >
+          {children ||
+            normalIcon(showsUserHeadingIndicator, userLocationState.heading)}
+        </Annotation>
+      );
+    },
+  ),
+);
 
 export default UserLocation;

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;