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

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
    */
@@ -94,6 +93,12 @@ interface UserLocationProps {
    * Minimum amount of movement before GPS location is updated in meters
    */
   minDisplacement?: number;
+  /**
+   * Android only. Set max FPS at which location animators can output updates. Use this setting to limit animation rate of the location puck on higher zoom levels to decrease the stress on the device's CPU which can directly improve battery life, without sacrificing UX.
+   *
+   * @platform android
+   */
+  androidPreferredFramesPerSecond?: number;
   /**
    * Custom location icon of type mapbox-gl-native components
    *
@@ -109,168 +114,184 @@ 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,
+        androidPreferredFramesPerSecond,
+        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,
+          androidPreferredFramesPerSecond,
+        };
 
-  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;