@maplibre/maplibre-react-native 11.0.0-alpha.1 → 11.0.0-alpha.10

package/src/components/user-location/UserLocation.tsx

@@ -0,0 +1,268 @@
+import {
+  forwardRef,
+  memo,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+import { NativeUserLocation } from "./NativeUserLocation";
+import { UserLocationPuck } from "./UserLocationPuck";
+import {
+  type Location,
+  LocationManager,
+} from "../../modules/location/LocationManager";
+import { Annotation } from "../annotations/Annotation";
+
+const USER_LOCATION_SOURCE_ID = "mlrn-user-location";
+
+interface UserLocationProps {
+  /**
+   * Whether location icon is animated between updates
+   */
+  animated?: boolean;
+  /**
+   * Which render mode to use.
+   * Can either be `normal` or `native`
+   */
+  renderMode?: "normal" | "native";
+  /**
+   * native/android only render mode
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @platform android
+   */
+  androidRenderMode?: "normal" | "compass" | "gps";
+  /**
+   * Whether location icon is visible
+   */
+  visible?: boolean;
+  /**
+   * Callback that is triggered on location icon press
+   */
+  onPress?: () => void;
+  /**
+   * Callback that is triggered on location update
+   */
+  onUpdate?: (location: Location) => void;
+  /**
+   * Show or hide small arrow which indicates direction the device is pointing relative to north.
+   */
+  showsUserHeadingIndicator?: boolean;
+  /**
+   * 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
+   *
+   * NOTE: Forking maintainer does not understand the above comment.
+   */
+  children?: ReactNode;
+}
+
+interface UserLocationState {
+  shouldShowUserLocation: boolean;
+  coordinates?: number[];
+  heading?: number;
+}
+
+export enum UserLocationRenderMode {
+  Native = "native",
+  Normal = "normal",
+}
+
+export interface UserLocationRef {
+  setLocationManager: (props: { running: boolean }) => Promise<void>;
+  needsLocationManagerRunning: () => boolean;
+  _onLocationUpdate: (location: Location | null) => void;
+}
+
+export const UserLocation = memo(
+  forwardRef<UserLocationRef, UserLocationProps>(
+    (
+      {
+        animated = true,
+        visible = true,
+        showsUserHeadingIndicator = false,
+        minDisplacement = 0,
+        renderMode = "normal",
+        androidRenderMode,
+        androidPreferredFramesPerSecond,
+        children,
+        onUpdate,
+        onPress,
+      }: UserLocationProps,
+      ref,
+    ) => {
+      const _isMounted = useRef<boolean | null>(null);
+      const locationManagerRunning = useRef<boolean>(false);
+
+      const [userLocationState, setUserLocationState] =
+        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 {{running: boolean}} 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);
+          }
+        }
+      }
+
+      function needsLocationManagerRunning(): boolean {
+        return !!(
+          !!onUpdate ||
+          (renderMode === UserLocationRenderMode.Normal && visible)
+        );
+      }
+
+      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);
+        }
+      }
+
+      if (!visible) {
+        return null;
+      }
+
+      if (renderMode === UserLocationRenderMode.Native) {
+        const props = {
+          androidRenderMode,
+          iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
+          androidPreferredFramesPerSecond,
+        };
+
+        return <NativeUserLocation {...props} />;
+      }
+
+      if (!userLocationState.coordinates) {
+        return null;
+      }
+
+      return (
+        <Annotation
+          animated={animated}
+          id={USER_LOCATION_SOURCE_ID}
+          onPress={onPress}
+          coordinates={userLocationState.coordinates}
+          style={{
+            iconRotate: userLocationState.heading,
+          }}
+        >
+          {children || (
+            <UserLocationPuck
+              sourceID={USER_LOCATION_SOURCE_ID}
+              heading={
+                showsUserHeadingIndicator
+                  ? userLocationState.heading
+                  : undefined
+              }
+            />
+          )}
+        </Annotation>
+      );
+    },
+  ),
+);

package/src/components/user-location/UserLocationPuck.tsx

@@ -0,0 +1,62 @@
+import { memo } from "react";
+
+import { UserLocationPuckHeading } from "./UserLocationPuckHeading";
+import type { BaseProps } from "../../types/BaseProps";
+import type { CircleLayerStyle } from "../../types/MapLibreRNStyles";
+import { CircleLayer } from "../layers/CircleLayer";
+
+const blue = "#33B5E5";
+
+const layerStyles: Record<"pulse" | "white" | "blue", CircleLayerStyle> = {
+  pulse: {
+    circleRadius: 15,
+    circleColor: blue,
+    circleOpacity: 0.2,
+    circlePitchAlignment: "map",
+  },
+  white: {
+    circleRadius: 9,
+    circleColor: "#fff",
+    circlePitchAlignment: "map",
+  },
+  blue: {
+    circleRadius: 6,
+    circleColor: blue,
+    circlePitchAlignment: "map",
+  },
+};
+
+interface UserLocationPuckProps extends BaseProps {
+  sourceID: string;
+  heading?: number;
+  belowLayerID?: string;
+}
+
+export const UserLocationPuck = memo(
+  ({ sourceID, heading }: UserLocationPuckProps) => (
+    <>
+      <CircleLayer
+        id="mlrn-user-location-puck-pulse"
+        sourceID={sourceID}
+        style={layerStyles.pulse}
+      />
+      <CircleLayer
+        id="mlrn-user-location-puck-white"
+        sourceID={sourceID}
+        style={layerStyles.white}
+      />
+      <CircleLayer
+        id="mlrn-user-location-puck-blue"
+        sourceID={sourceID}
+        style={layerStyles.blue}
+      />
+      {typeof heading === "number" && (
+        <UserLocationPuckHeading
+          sourceID={sourceID}
+          belowLayerID="mlrn-user-location-puck-white"
+          heading={heading}
+        />
+      )}
+    </>
+  ),
+);

package/src/components/user-location/UserLocationPuckHeading.tsx

@@ -0,0 +1,33 @@
+import { memo } from "react";
+
+import headingIcon from "../../assets/heading.png";
+import { type BaseProps } from "../../types/BaseProps";
+import type { SymbolLayerStyle } from "../../types/MapLibreRNStyles";
+import { SymbolLayer } from "../layers/SymbolLayer";
+
+const layerStyle: SymbolLayerStyle = {
+  iconImage: headingIcon,
+  iconAllowOverlap: true,
+  iconPitchAlignment: "map",
+  iconRotationAlignment: "map",
+};
+
+interface UserLocationPuckHeadingProps extends BaseProps {
+  sourceID: string;
+  belowLayerID?: string;
+  heading: number;
+}
+
+export const UserLocationPuckHeading = memo(
+  ({ sourceID, belowLayerID, heading }: UserLocationPuckHeadingProps) => (
+    <SymbolLayer
+      id="mlrn-user-location-puck-heading"
+      sourceID={sourceID}
+      belowLayerID={belowLayerID}
+      style={{
+        iconRotate: heading,
+        ...layerStyle,
+      }}
+    />
+  ),
+);

package/src/index.ts

@@ -1,7 +1,86 @@
-import * as MapLibreRN from "./MapLibreRN";
-export * from "./MapLibreRN";
+export * from "./MLRNModule";
 
-/**
- * @deprecated Use named imports or `import * as MapLibreRN` instead
- */
-export default MapLibreRN;
+export {
+  type CameraOptions,
+  type CameraEasing,
+  type CameraAnimationOptions,
+  type CameraCenterOptions,
+  type CameraBoundsOptions,
+  type CameraCenterStop,
+  type CameraBoundsStop,
+  type CameraStop,
+  type InitialViewState,
+  type CameraRef,
+  type TrackUserLocation,
+  type TrackUserLocationChangeEvent,
+  type CameraProps,
+  Camera,
+} from "./components/camera/Camera";
+
+export {
+  MapView,
+  type MapViewRef,
+  type ViewState,
+  type ViewStateChangeEvent,
+} from "./components/map-view/MapView";
+
+export { Light } from "./components/Light";
+export { PointAnnotation } from "./components/annotations/PointAnnotation";
+export type { PointAnnotationRef } from "./components/annotations/PointAnnotation";
+export { Annotation } from "./components/annotations/Annotation";
+export { Callout } from "./components/annotations/Callout";
+export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions";
+export {
+  UserLocation,
+  UserLocationRenderMode,
+} from "./components/user-location/UserLocation";
+export type { UserLocationRef } from "./components/user-location/UserLocation";
+export { VectorSource } from "./components/sources/VectorSource";
+export { ShapeSource } from "./components/sources/ShapeSource";
+export type { ShapeSourceRef } from "./components/sources/ShapeSource";
+export { RasterSource } from "./components/sources/RasterSource";
+export { ImageSource } from "./components/sources/ImageSource";
+export { Images } from "./components/Images";
+export { FillLayer } from "./components/layers/FillLayer";
+export { FillExtrusionLayer } from "./components/layers/FillExtrusionLayer";
+export { HeatmapLayer } from "./components/layers/HeatmapLayer";
+export { LineLayer } from "./components/layers/LineLayer";
+export { CircleLayer } from "./components/layers/CircleLayer";
+export { SymbolLayer } from "./components/layers/SymbolLayer";
+export { RasterLayer } from "./components/layers/RasterLayer";
+export { BackgroundLayer } from "./components/layers/BackgroundLayer";
+export { MarkerView } from "./components/annotations/MarkerView";
+
+export {
+  LocationManager,
+  type Location,
+} from "./modules/location/LocationManager";
+export { OfflineManager } from "./modules/offline/OfflineManager";
+export type { OfflinePackError } from "./modules/offline/OfflineManager";
+export type { OfflinePackStatus } from "./modules/offline/OfflinePack";
+export { OfflinePack } from "./modules/offline/OfflinePack";
+export { OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions";
+export { SnapshotManager } from "./modules/snapshot/SnapshotManager";
+export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions";
+
+export type { Bounds } from "./types/Bounds";
+export type {
+  FillLayerStyle,
+  LineLayerStyle,
+  SymbolLayerStyle,
+  CircleLayerStyle,
+  HeatmapLayerStyle,
+  FillExtrusionLayerStyle,
+  RasterLayerStyle,
+  HillshadeLayerStyle,
+  BackgroundLayerStyle,
+  LightLayerStyle,
+  Expression,
+} from "./types/MapLibreRNStyles";
+export type { PressEvent, PressEventWithFeatures } from "./types/PressEvent";
+export type { ViewPadding } from "./types/ViewPadding";
+
+export { Animated } from "./utils/animated/Animated";
+export { Logger, type LogLevel } from "./modules/Logger";
+
+export type { MapLibrePluginProps } from "./plugin/MapLibrePluginProps";

package/src/modules/Logger.ts

@@ -0,0 +1,127 @@
+import {
+  type EmitterSubscription,
+  NativeEventEmitter,
+  NativeModules,
+} from "react-native";
+const MLRNLogging = NativeModules.MLRNLogging;
+
+/**
+ * Supported log levels
+ */
+export type LogLevel = "error" | "warning" | "info" | "debug" | "verbose";
+
+interface Log {
+  message: string;
+  level: LogLevel;
+  tag?: string;
+}
+
+/**
+ * This callback is displayed as part of the Requester class.
+ * @param {object} log
+ * @param {string} log.message - the message of the log
+ * @param {string} log.level - log level
+ * @param {string} log.tag - optional tag used on android
+ */
+type LogCallback = (log: Log) => boolean;
+
+export class Logger {
+  static instance: Logger | null = null;
+
+  static sharedInstance(): Logger {
+    if (this.instance === null) {
+      this.instance = new Logger();
+    }
+    return this.instance;
+  }
+
+  private loggerEmitter: NativeEventEmitter;
+  private startedCount: number;
+  private logCallback: LogCallback | null;
+  private subscription: EmitterSubscription | null;
+
+  constructor() {
+    this.loggerEmitter = new NativeEventEmitter(MLRNLogging);
+    this.startedCount = 0;
+    this.logCallback = null;
+    this.subscription = null;
+  }
+
+  /**
+   * Set custom logger function
+   *
+   * @param logCallback - callback taking a log object as param. If callback return falsy value then default logging
+   * will take place.
+   */
+  static setLogCallback(logCallback: LogCallback): void {
+    this.sharedInstance().setLogCallback(logCallback);
+  }
+
+  /**
+   * Set custom logger function
+   *
+   * @param logCallback - callback taking a log object as param. If callback return falsy value then default logging
+   * will take place.
+   */
+  setLogCallback(logCallback: LogCallback): void {
+    this.logCallback = logCallback;
+  }
+
+  static setLogLevel(level: LogLevel): void {
+    MLRNLogging.setLogLevel(level);
+  }
+
+  start(): void {
+    if (this.startedCount === 0) {
+      this.subscribe();
+    }
+    this.startedCount += 1;
+  }
+
+  stop(): void {
+    this.startedCount -= 1;
+    if (this.startedCount === 0) {
+      this.unsubscribe();
+    }
+  }
+
+  subscribe(): void {
+    this.subscription = this.loggerEmitter.addListener("LogEvent", (log) => {
+      this.onLog(log);
+    });
+  }
+
+  unsubscribe(): void {
+    if (this.subscription) {
+      this.subscription.remove();
+      this.subscription = null;
+    }
+  }
+
+  effectiveLevel({ level, message, tag }: Log): LogLevel {
+    if (level === "warning") {
+      if (
+        tag === "Mbgl-HttpRequest" &&
+        message.startsWith("Request failed due to a permanent error: Canceled")
+      ) {
+        // this seems to happening too much to show a warning every time
+        return "info";
+      }
+    }
+    return level;
+  }
+
+  onLog(log: Log): void {
+    if (!this.logCallback || !this.logCallback(log)) {
+      const { message } = log;
+      const level = this.effectiveLevel(log);
+      if (level === "error") {
+        console.error("MapLibre error", message, log);
+      } else if (level === "warning") {
+        console.warn("MapLibre warning", message, log);
+      } else {
+        console.log(`MapLibre [${level}]`, message, log);
+      }
+    }
+  }
+}

package/src/modules/snapshot/NativeSnapshotModule.ts

@@ -20,5 +20,4 @@ export interface Spec extends TurboModule {
   takeSnap(options: SnapshotJsonOptions): Promise<string>;
 }
 
-export const NativeSnapshotModule =
-  TurboModuleRegistry.getEnforcing<Spec>("MLRNSnapshotModule");
+export default TurboModuleRegistry.getEnforcing<Spec>("MLRNSnapshotModule");

package/src/modules/snapshot/SnapshotManager.ts

@@ -1,4 +1,4 @@
-import { NativeSnapshotModule } from "./NativeSnapshotModule";
+import NativeSnapshotModule from "./NativeSnapshotModule";
 import { type SnapshotInputOptions, SnapshotOptions } from "./SnapshotOptions";
 
 /**

package/src/types/Bounds.ts

@@ -0,0 +1 @@
+export type Bounds = [west: number, south: number, east: number, north: number];

package/src/types/MapLibreRNStyles.ts

@@ -301,11 +301,11 @@ export interface LineLayerStyle {
    */
   lineBlurTransition?: Transition;
   /**
-   * Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. Also note that zoomDependent expressions will be evaluated only at integer zoom levels.
+   * Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. ZoomDependent expressions will be evaluated only at integer zoom levels. The only way to create an array value is using `["literal", [...]]`; arrays cannot be read from or derived from feature properties.
    *
    * @disabledBy linePattern
    */
-  lineDasharray?: Value<number[], ["zoom"]>;
+  lineDasharray?: Value<number[], ["zoom", "feature"]>;
 
   /**
    * The transition affecting any changes to this layer’s lineDasharray property.
@@ -463,7 +463,7 @@ export interface SymbolLayerStyle {
    */
   textField?: Value<FormattedString, ["zoom", "feature"]>;
   /**
-   * Font stack to use for displaying text.
+   * Fonts to use for displaying text. If the `glyphs` root property is specified, this array is joined together and interpreted as a font stack name. Otherwise, it is interpreted as a cascading fallback list of local font names.
    *
    * @requires textField
    */
@@ -1048,7 +1048,7 @@ export interface HillshadeLayerStyle {
    */
   visibility?: "visible" | "none";
   /**
-   * The direction of the light source used to generate the hillshading with 0 as the top of the viewport if `hillshadeIlluminationAnchor` is set to `viewport` and due north if `hillshadeIlluminationAnchor` is set to `map`.
+   * The direction of the light source(s) used to generate the hillshading with 0 as the top of the viewport if `hillshadeIlluminationAnchor` is set to `viewport` and due north if `hillshadeIlluminationAnchor` is set to `map`. Only when `hillshadeMethod` is set to `multidirectional` can you specify multiple light sources.
    */
   hillshadeIlluminationDirection?: Value<number, ["zoom"]>;
   /**
@@ -1065,7 +1065,7 @@ export interface HillshadeLayerStyle {
    */
   hillshadeExaggerationTransition?: Transition;
   /**
-   * The shading color of areas that face away from the light source.
+   * The shading color of areas that face away from the light source(s). Only when `hillshadeMethod` is set to `multidirectional` can you specify multiple light sources.
    */
   hillshadeShadowColor?: Value<string, ["zoom"]>;
 
@@ -1074,7 +1074,7 @@ export interface HillshadeLayerStyle {
    */
   hillshadeShadowColorTransition?: Transition;
   /**
-   * The shading color of areas that faces towards the light source.
+   * The shading color of areas that faces towards the light source(s). Only when `hillshadeMethod` is set to `multidirectional` can you specify multiple light sources.
    */
   hillshadeHighlightColor?: Value<string, ["zoom"]>;
 

package/src/types/PressEvent.ts

@@ -0,0 +1,19 @@
+export interface PressEvent {
+  longitude: number;
+
+  latitude: number;
+
+  /**
+   * Touch origin X coordinate inside touchable area (relative to the element).
+   */
+  locationX: number;
+
+  /**
+   * Touch origin Y coordinate inside touchable area (relative to the element).
+   */
+  locationY: number;
+}
+
+export interface PressEventWithFeatures extends PressEvent {
+  features: GeoJSON.Feature[];
+}

package/src/types/ViewPadding.ts

@@ -0,0 +1,6 @@
+export type ViewPadding = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};

package/src/types/codegen/UnsafeMixed.ts

@@ -0,0 +1,9 @@
+/**
+ * This type makes it possible to us strict types in TypeScript while being
+ * loose on native.
+ *
+ * RN codegen specifies `type UnsafeMixed = unknown` mapping to folly::dynamic.
+ * During codegen only the name of the type is analyzed, making it possible to
+ * override their type this way.
+ */
+export type UnsafeMixed<T> = T;