@maplibre/maplibre-react-native 10.0.0-alpha.6 → 10.0.0-alpha.8

package/javascript/components/SymbolLayer.tsx

@@ -1,7 +1,9 @@
 import {type SymbolLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
-
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
 import React, {ReactElement} from 'react';
 import {View, NativeModules, requireNativeComponent} from 'react-native';
@@ -10,7 +12,7 @@ const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNSymbolLayer';
 
-interface SymbolLayerProps extends BaseProps, BaseLayerProps {
+export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -27,46 +29,50 @@ interface NativeProps extends Omit<SymbolLayerProps, 'style'>, NativeBaseProps {
   snapshot: boolean;
 }
 
+const RCTMLNSymbolLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
-class SymbolLayer extends AbstractLayer<SymbolLayerProps, NativeBaseProps> {
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  _shouldSnapshot(): boolean {
+const SymbolLayer: React.FC<SymbolLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: SymbolLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    SymbolLayerProps,
+    NativeBaseProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  const _shouldSnapshot = (): boolean => {
     let isSnapshot = false;
 
-    if (React.Children.count(this.props.children) <= 0) {
+    if (React.Children.count(props.children) <= 0) {
       return isSnapshot;
     }
 
-    React.Children.forEach(this.props.children, child => {
+    React.Children.forEach(props.children, child => {
       if (child?.type === View) {
         isSnapshot = true;
       }
     });
 
     return isSnapshot;
-  }
-
-  render(): ReactElement {
-    const props = {
-      ...this.baseProps,
-      snapshot: this._shouldSnapshot(),
-      sourceLayerID: this.props.sourceLayerID,
-    };
+  };
 
-    return (
-      <RCTMLNSymbolLayer ref={this.setNativeLayer} {...props}>
-        {this.props.children}
-      </RCTMLNSymbolLayer>
-    );
-  }
-}
+  const updatedProps = {
+    ...baseProps,
+    snapshot: _shouldSnapshot(),
+  };
 
-const RCTMLNSymbolLayer =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+  return (
+    <RCTMLNSymbolLayer ref={setNativeLayer} {...updatedProps}>
+      {props.children}
+    </RCTMLNSymbolLayer>
+  );
+};
 
 export default SymbolLayer;

package/javascript/components/UserLocation.tsx

@@ -6,7 +6,7 @@ import CircleLayer from './CircleLayer';
 import HeadingIndicator from './HeadingIndicator';
 import NativeUserLocation from './NativeUserLocation';
 
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useEffect, useImperativeHandle} from 'react';
 
 const mapboxBlue = 'rgba(51, 181, 229, 100)';
 
@@ -113,164 +113,177 @@ export enum UserLocationRenderMode {
   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

@@ -4,13 +4,11 @@ import {getFilter} from '../utils/filterUtils';
 import {copyPropertiesAsDeprecated} from '../utils/deprecation';
 import BaseProps from '../types/BaseProps';
 import OnPressEvent from '../types/OnPressEvent';
+import useAbstractSource from '../hooks/useAbstractSource';
+import useNativeBridge from '../hooks/useNativeBridge';
 
-import AbstractSource from './AbstractSource';
-import NativeBridgeComponent from './NativeBridgeComponent';
-
-import React, {Component, ReactNode} from 'react';
+import React, {memo, useImperativeHandle} from 'react';
 import {
-  NativeMethods,
   NativeModules,
   NativeSyntheticEvent,
   requireNativeComponent,
@@ -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 (
-      <RCTMLNVectorSource ref={this.setNativeRef} {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMLNVectorSource>
-    );
-  }
-}
+        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 RCTMLNVectorSource =
-  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;