@maplibre/maplibre-react-native 10.0.0-alpha.8 → 10.0.0-beta.1

package/src/hooks/useNativeBridge.ts

@@ -0,0 +1,125 @@
+import { Component, type SyntheticEvent, useRef } from "react";
+
+import { runNativeCommand, isAndroid, type 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/src/hooks/useNativeRef.ts

@@ -0,0 +1,14 @@
+import { Component, useRef } from "react";
+import { type NativeMethods } from "react-native";
+
+export 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/src/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/src/index.ts

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

package/src/modules/location/locationManager.ts

@@ -0,0 +1,161 @@
+import {
+  NativeModules,
+  NativeEventEmitter,
+  type EmitterSubscription,
+} from "react-native";
+
+const MapLibreRN = NativeModules.MLRNModule;
+const MLRNLocationModule = NativeModules.MLRNLocationModule;
+
+export const LocationModuleEventEmitter = new NativeEventEmitter(
+  MLRNLocationModule,
+);
+
+/**
+ * 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 MLRNLocationModule.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) {
+      MLRNLocationModule.start(displacement);
+
+      this.subscription = LocationModuleEventEmitter.addListener(
+        MapLibreRN.LocationCallbackName.Update,
+        this.onUpdate,
+      );
+
+      this._isListening = true;
+    }
+  }
+
+  stop(): void {
+    MLRNLocationModule.stop();
+
+    if (this._isListening) {
+      this.subscription?.remove();
+    }
+
+    this._isListening = false;
+  }
+
+  setMinDisplacement(minDisplacement: number): void {
+    MLRNLocationModule.setMinDisplacement(minDisplacement);
+  }
+
+  onUpdate(location: Location): void {
+    this._lastKnownLocation = location;
+
+    this._listeners.forEach((l) => l(location));
+  }
+}
+
+export default new LocationManager();

package/src/modules/offline/OfflineCreatePackOptions.ts

@@ -0,0 +1,55 @@
+import { makeNativeBounds } from "../../utils/makeNativeBounds";
+
+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 = makeNativeBounds(...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");
+    }
+  }
+
+  _makeMetadata(metadata?: Record<string, any>): string {
+    return JSON.stringify({
+      ...metadata,
+      name: this.name,
+    });
+  }
+}
+
+export default OfflineCreatePackOptions;

package/src/modules/offline/OfflinePack.ts

@@ -0,0 +1,56 @@
+import { NativeModules } from "react-native";
+
+import OfflineCreatePackOptions from "./OfflineCreatePackOptions";
+
+const MLRNOfflineModule = NativeModules.MLRNOfflineModule;
+
+export 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 MLRNOfflineModule.getPackStatus(this.name);
+  }
+
+  resume(): Promise<void> {
+    return MLRNOfflineModule.resumePackDownload(this.name);
+  }
+
+  pause(): Promise<void> {
+    return MLRNOfflineModule.pausePackDownload(this.name);
+  }
+}
+
+export default OfflinePack;