@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.10

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,
+  };
+}

package/javascript/hooks/useAbstractSource.ts

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+import { NativeMethods } from "react-native";
+
+export default function useAbstractSource<NativePropsType extends object>(): {
+  _nativeRef:
+    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | undefined;
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void;
+  setNativeProps: (nativeProps: NativePropsType) => void;
+} {
+  const _nativeRef = useRef<
+    (React.Component<NativePropsType> & Readonly<NativeMethods>) | undefined
+  >(undefined);
+
+  const setNativeRef = (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ): void => {
+    _nativeRef.current = instance;
+  };
+
+  const setNativeProps = (newProps: NativePropsType): void => {
+    if (_nativeRef.current) {
+      _nativeRef.current.setNativeProps(newProps);
+    }
+  };
+
+  return {
+    _nativeRef: _nativeRef.current,
+    setNativeRef,
+    setNativeProps,
+  };
+}

package/javascript/hooks/useNativeBridge.ts

@@ -0,0 +1,125 @@
+import React, { Component, SyntheticEvent, useRef } from "react";
+
+import { runNativeCommand, isAndroid, NativeArg } from "../utils";
+
+export type RNMLEvent<PayloadType = { [key: string]: string }> = {
+  payload: PayloadType;
+  type: string;
+};
+
+let callbackIncrement = 0;
+
+type UseNativeBridge = {
+  _nativeModuleName: string;
+  _onAndroidCallback: (e: SyntheticEvent<Element, RNMLEvent>) => void;
+  _callbackMap: React.MutableRefObject<Map<string, any>>;
+  _preRefMapMethodQueue: React.MutableRefObject<any[]>;
+  _addAddAndroidCallback: <ReturnType>(
+    id: string,
+    resolve: (value: ReturnType) => void,
+    reject: (error: Error) => void,
+  ) => void;
+  _removeAndroidCallback: (id: string) => void;
+  _runPendingNativeCommands: <RefType extends Component>(
+    nativeRef: RefType | null | undefined,
+  ) => Promise<void>;
+  _runNativeCommand: <RefType extends Component, ReturnType = NativeArg>(
+    methodName: string,
+    nativeRef: RefType | undefined | null,
+    args?: NativeArg[],
+  ) => Promise<ReturnType>;
+};
+
+const useNativeBridge: (moduleName: string) => UseNativeBridge = (
+  _nativeModuleName: string,
+) => {
+  const _callbackMap = useRef<Map<string, any>>(new Map());
+  const _preRefMapMethodQueue = useRef<any[]>([]);
+
+  const _addAddAndroidCallback = <ReturnType>(
+    id: string,
+    resolve: (value: ReturnType) => void,
+    reject: (error: Error) => void,
+  ): void => {
+    _callbackMap.current.set(id, { resolve, reject });
+  };
+
+  const _removeAndroidCallback = (id: string): void => {
+    _callbackMap.current.delete(id);
+  };
+
+  const _onAndroidCallback = (e: SyntheticEvent<Element, RNMLEvent>): void => {
+    const callbackID = e.nativeEvent.type;
+    const callback = _callbackMap.current.get(callbackID);
+
+    if (!callback) {
+      return;
+    }
+
+    _callbackMap.current.delete(callbackID);
+    const { payload } = e.nativeEvent;
+    if (payload.error) {
+      callback.reject.call(null, new Error(payload.error));
+    } else {
+      callback.resolve.call(null, payload);
+    }
+  };
+
+  const _runPendingNativeCommands = async <RefType extends Component>(
+    nativeRef: RefType | null | undefined,
+  ): Promise<void> => {
+    if (nativeRef) {
+      while (_preRefMapMethodQueue.current.length > 0) {
+        const item = _preRefMapMethodQueue.current.pop();
+
+        if (item && item.method && item.resolver) {
+          const res = await _runNativeCommand(
+            item.method.name,
+            nativeRef,
+            item.method.args,
+          );
+          item.resolver(res);
+        }
+      }
+    }
+  };
+
+  const _runNativeCommand = <RefType extends Component, ReturnType = NativeArg>(
+    methodName: string,
+    nativeRef: RefType | undefined | null,
+    args: NativeArg[] = [],
+  ): Promise<ReturnType> => {
+    if (!nativeRef) {
+      return new Promise((resolve) => {
+        _preRefMapMethodQueue.current.push({
+          method: { name: methodName, args },
+          resolver: resolve,
+        });
+      });
+    }
+
+    if (isAndroid()) {
+      return new Promise((resolve, reject) => {
+        callbackIncrement += 1;
+        const callbackID = `${methodName}_${callbackIncrement}`;
+        _addAddAndroidCallback(callbackID, resolve, reject);
+        args.unshift(callbackID);
+        runNativeCommand(_nativeModuleName, methodName, nativeRef, args);
+      });
+    }
+    return runNativeCommand(_nativeModuleName, methodName, nativeRef, args);
+  };
+
+  return {
+    _nativeModuleName,
+    _onAndroidCallback,
+    _callbackMap,
+    _preRefMapMethodQueue,
+    _addAddAndroidCallback,
+    _removeAndroidCallback,
+    _runPendingNativeCommands,
+    _runNativeCommand,
+  };
+};
+
+export default useNativeBridge;

package/javascript/hooks/useNativeRef.ts

@@ -0,0 +1,13 @@
+import React, { Component, useRef } from "react";
+import { NativeMethods } from "react-native";
+
+type NativeRef<NativeProps> = Component<NativeProps> & Readonly<NativeMethods>;
+
+/**
+ * Separate  module which allows to be mocked in tests.
+ */
+export function useNativeRef<NativeProps = object>(): React.RefObject<
+  NativeRef<NativeProps>
+> {
+  return useRef<NativeRef<NativeProps>>(null);
+}

package/javascript/hooks/useOnce.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+const useOnce: (callback: () => void) => void = (callback: () => void) => {
+  const once = useRef(false);
+
+  if (!once.current) {
+    once.current = true;
+    callback();
+  }
+};
+
+export default useOnce;

package/javascript/index.ts

@@ -0,0 +1,4 @@
+import * as Maplibre from "./Maplibre";
+export * from "./Maplibre";
+
+export default Maplibre;

package/javascript/modules/location/locationManager.ts

@@ -0,0 +1,162 @@
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EmitterSubscription,
+} from "react-native";
+
+const MapLibreGL = NativeModules.MLNModule;
+const MapLibreGLLocationManager = NativeModules.MLNLocationModule;
+
+export const LocationModuleEventEmitter = new NativeEventEmitter(
+  MapLibreGLLocationManager,
+);
+
+/**
+ * Location sent by locationManager
+ */
+export interface Location {
+  coords: Coordinates;
+  timestamp?: number;
+}
+
+/**
+ * Coorinates sent by locationManager
+ */
+interface Coordinates {
+  /**
+   * The heading (measured in degrees) relative to true north.
+   * Heading is used to describe the direction the device is pointing to (the value of the compass).
+   * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
+   * and will be corrected in a future update.
+   */
+  heading?: number;
+
+  /**
+   * The direction in which the device is traveling, measured in degrees and relative to due north.
+   * The course refers to the direction the device is actually moving (not the same as heading).
+   */
+  course?: number;
+
+  /**
+   * The instantaneous speed of the device, measured in meters per second.
+   */
+  speed?: number;
+
+  /**
+   * The latitude in degrees.
+   */
+  latitude: number;
+
+  /**
+   * The longitude in degrees.
+   */
+  longitude: number;
+
+  /**
+   * The radius of uncertainty for the location, measured in meters.
+   */
+  accuracy?: number;
+
+  /**
+   * The altitude, measured in meters.
+   */
+  altitude?: number;
+}
+
+class LocationManager {
+  _listeners: ((location: Location) => void)[];
+  _lastKnownLocation: Location | null;
+  _isListening: boolean;
+  subscription: EmitterSubscription | null;
+
+  constructor() {
+    this._listeners = [];
+    this._lastKnownLocation = null;
+    this._isListening = false;
+    this.onUpdate = this.onUpdate.bind(this);
+    this.subscription = null;
+  }
+
+  async getLastKnownLocation(): Promise<Location | null> {
+    if (!this._lastKnownLocation) {
+      let lastKnownLocation;
+
+      // as location can be brittle it might happen,
+      // that we get an exception from native land
+      // let's silently catch it and simply log out
+      // instead of throwing an exception
+      try {
+        lastKnownLocation =
+          await MapLibreGLLocationManager.getLastKnownLocation();
+      } catch (error) {
+        console.log("locationManager Error: ", error);
+      }
+
+      if (!this._lastKnownLocation && lastKnownLocation) {
+        this._lastKnownLocation = lastKnownLocation;
+      }
+    }
+
+    return this._lastKnownLocation;
+  }
+
+  addListener(listener: (location: Location) => void): void {
+    if (!this._isListening) {
+      this.start();
+    }
+    if (!this._listeners.includes(listener)) {
+      this._listeners.push(listener);
+
+      if (this._lastKnownLocation) {
+        listener(this._lastKnownLocation);
+      }
+    }
+  }
+
+  removeListener(listener: (location: Location) => void): void {
+    this._listeners = this._listeners.filter((l) => l !== listener);
+    if (this._listeners.length === 0) {
+      this.stop();
+    }
+  }
+
+  removeAllListeners(): void {
+    this._listeners = [];
+    this.stop();
+  }
+
+  start(displacement = 0): void {
+    if (!this._isListening) {
+      MapLibreGLLocationManager.start(displacement);
+
+      this.subscription = LocationModuleEventEmitter.addListener(
+        MapLibreGL.LocationCallbackName.Update,
+        this.onUpdate,
+      );
+
+      this._isListening = true;
+    }
+  }
+
+  stop(): void {
+    MapLibreGLLocationManager.stop();
+
+    if (this._isListening) {
+      this.subscription?.remove();
+    }
+
+    this._isListening = false;
+  }
+
+  setMinDisplacement(minDisplacement: number): void {
+    MapLibreGLLocationManager.setMinDisplacement(minDisplacement);
+  }
+
+  onUpdate(location: Location): void {
+    this._lastKnownLocation = location;
+
+    this._listeners.forEach((l) => l(location));
+  }
+}
+
+export default new LocationManager();

package/javascript/modules/offline/OfflineCreatePackOptions.ts

@@ -0,0 +1,62 @@
+import { toJSONString } from "../../utils";
+import { makeLatLngBounds } from "../../utils/geoUtils";
+
+export interface OfflineCreatePackInputOptions {
+  name: string;
+  styleURL: string;
+  bounds: [GeoJSON.Position, GeoJSON.Position];
+  minZoom?: number;
+  maxZoom?: number;
+  metadata?: Record<string, any>;
+}
+
+class OfflineCreatePackOptions {
+  name: string;
+  styleURL: string;
+  bounds: string;
+  minZoom?: number;
+  maxZoom?: number;
+  metadata: string;
+
+  constructor(options: OfflineCreatePackInputOptions) {
+    this._assert(options);
+
+    this.name = options.name;
+    this.styleURL = options.styleURL;
+    this.bounds = this._makeLatLngBounds(options.bounds);
+    this.minZoom = options.minZoom;
+    this.maxZoom = options.maxZoom;
+    this.metadata = this._makeMetadata(options.metadata);
+  }
+
+  _assert(options: OfflineCreatePackInputOptions): void {
+    if (!options.styleURL) {
+      throw new Error(
+        "Style URL must be provided for creating an offline pack",
+      );
+    }
+
+    if (!options.name) {
+      throw new Error("Name must be provided for creating an offline pack");
+    }
+
+    if (!options.bounds) {
+      throw new Error("Bounds must be provided for creating an offline pack");
+    }
+  }
+
+  _makeLatLngBounds(bounds: [GeoJSON.Position, GeoJSON.Position]): string {
+    const ne = bounds[0];
+    const sw = bounds[1];
+    return toJSONString(makeLatLngBounds(ne, sw));
+  }
+
+  _makeMetadata(metadata?: Record<string, any>): string {
+    return JSON.stringify({
+      ...metadata,
+      name: this.name,
+    });
+  }
+}
+
+export default OfflineCreatePackOptions;

package/javascript/modules/offline/OfflinePack.ts

@@ -0,0 +1,56 @@
+import { NativeModules } from "react-native";
+
+import OfflineCreatePackOptions from "./OfflineCreatePackOptions";
+
+const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
+
+type OfflinePackStatus = {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceCount: number;
+  completedResourceSize: number;
+  completedTileSize: number;
+  completedTileCount: number;
+  requiredResourceCount: number;
+};
+
+class OfflinePack {
+  private pack: OfflineCreatePackOptions;
+  private _metadata: Record<string, any> | null;
+
+  constructor(pack: OfflineCreatePackOptions) {
+    this.pack = pack;
+    this._metadata = null;
+  }
+
+  get name(): string | null {
+    const { metadata } = this;
+    return metadata && metadata.name;
+  }
+
+  get bounds(): string {
+    return this.pack.bounds;
+  }
+
+  get metadata(): Record<string, any> | null {
+    if (!this._metadata && this.pack.metadata) {
+      this._metadata = JSON.parse(this.pack.metadata);
+    }
+    return this._metadata;
+  }
+
+  status(): Promise<OfflinePackStatus> {
+    return MapLibreGLOfflineManager.getPackStatus(this.name);
+  }
+
+  resume(): Promise<void> {
+    return MapLibreGLOfflineManager.resumePackDownload(this.name);
+  }
+
+  pause(): Promise<void> {
+    return MapLibreGLOfflineManager.pausePackDownload(this.name);
+  }
+}
+
+export default OfflinePack;