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

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

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

package/javascript/modules/location/locationManager.ts

@@ -2,10 +2,10 @@ import {
   NativeModules,
   NativeEventEmitter,
   EmitterSubscription,
-} from 'react-native';
+} from "react-native";
 
-const MapLibreGL = NativeModules.MGLModule;
-const MapLibreGLLocationManager = NativeModules.MGLLocationModule;
+const MapLibreGL = NativeModules.MLNModule;
+const MapLibreGLLocationManager = NativeModules.MLNLocationModule;
 
 export const LocationModuleEventEmitter = new NativeEventEmitter(
   MapLibreGLLocationManager,
@@ -89,7 +89,7 @@ class LocationManager {
         lastKnownLocation =
           await MapLibreGLLocationManager.getLastKnownLocation();
       } catch (error) {
-        console.log('locationManager Error: ', error);
+        console.log("locationManager Error: ", error);
       }
 
       if (!this._lastKnownLocation && lastKnownLocation) {
@@ -114,7 +114,7 @@ class LocationManager {
   }
 
   removeListener(listener: (location: Location) => void): void {
-    this._listeners = this._listeners.filter(l => l !== listener);
+    this._listeners = this._listeners.filter((l) => l !== listener);
     if (this._listeners.length === 0) {
       this.stop();
     }
@@ -155,7 +155,7 @@ class LocationManager {
   onUpdate(location: Location): void {
     this._lastKnownLocation = location;
 
-    this._listeners.forEach(l => l(location));
+    this._listeners.forEach((l) => l(location));
   }
 }
 

package/javascript/modules/offline/OfflineCreatePackOptions.ts

@@ -1,5 +1,5 @@
-import {makeLatLngBounds} from '../../utils/geoUtils';
-import {toJSONString} from '../../utils';
+import { toJSONString } from "../../utils";
+import { makeLatLngBounds } from "../../utils/geoUtils";
 
 export interface OfflineCreatePackInputOptions {
   name: string;
@@ -32,16 +32,16 @@ class OfflineCreatePackOptions {
   _assert(options: OfflineCreatePackInputOptions): void {
     if (!options.styleURL) {
       throw new Error(
-        'Style URL must be provided for creating an offline pack',
+        "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');
+      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');
+      throw new Error("Bounds must be provided for creating an offline pack");
     }
   }
 

package/javascript/modules/offline/OfflinePack.ts

@@ -1,10 +1,10 @@
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import OfflineCreatePackOptions from "./OfflineCreatePackOptions";
 
-const MapLibreGLOfflineManager = NativeModules.MGLOfflineModule;
+const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
 
-type OfflinePackStatus = {
+export type OfflinePackStatus = {
   name: string;
   state: number;
   percentage: number;
@@ -25,7 +25,7 @@ class OfflinePack {
   }
 
   get name(): string | null {
-    const {metadata} = this;
+    const { metadata } = this;
     return metadata && metadata.name;
   }
 

package/javascript/modules/offline/offlineManager.ts

@@ -1,18 +1,17 @@
-import {isUndefined, isFunction, isAndroid} from '../../utils';
-
-import OfflineCreatePackOptions, {
-  OfflineCreatePackInputOptions,
-} from './OfflineCreatePackOptions';
-import OfflinePack from './OfflinePack';
-
 import {
   NativeModules,
   NativeEventEmitter,
   EventSubscription,
-} from 'react-native';
+} from "react-native";
+
+import OfflineCreatePackOptions, {
+  OfflineCreatePackInputOptions,
+} from "./OfflineCreatePackOptions";
+import OfflinePack from "./OfflinePack";
+import { isUndefined, isFunction, isAndroid } from "../../utils";
 
-const MapLibreGL = NativeModules.MGLModule;
-const MapLibreGLOfflineManager = NativeModules.MGLOfflineModule;
+const MapLibreGL = NativeModules.MLNModule;
+const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
 export const OfflineModuleEventEmitter = new NativeEventEmitter(
   MapLibreGLOfflineManager,
 );
@@ -232,7 +231,7 @@ class OfflineManager {
   async getPacks(): Promise<OfflinePack[]> {
     await this._initialize();
     return Object.keys(this._offlinePacks).map(
-      name => this._offlinePacks[name],
+      (name) => this._offlinePacks[name],
     );
   }
 
@@ -340,7 +339,7 @@ class OfflineManager {
         // manually set a listener, since listeners are only set on create flow
         await MapLibreGLOfflineManager.setPackObserver(packName);
       } catch (e) {
-        console.log('Unable to set pack observer', e);
+        console.log("Unable to set pack observer", e);
       }
     }
   }
@@ -393,7 +392,7 @@ class OfflineManager {
   }
 
   _onProgress(e: ProgressEvent): void {
-    const {name, state} = e.payload;
+    const { name, state } = e.payload;
 
     if (!this._hasListeners(name, this._progressListeners)) {
       return;
@@ -409,7 +408,7 @@ class OfflineManager {
   }
 
   _onError(e: ErrorEvent): void {
-    const {name} = e.payload;
+    const { name } = e.payload;
 
     if (!this._hasListeners(name, this._errorListeners)) {
       return;

package/javascript/modules/snapshot/SnapshotOptions.ts

@@ -1,9 +1,9 @@
-import {toJSONString} from '../../utils';
-import {makePoint, makeFeatureCollection} from '../../utils/geoUtils';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import { toJSONString } from "../../utils";
+import { makePoint, makeFeatureCollection } from "../../utils/geoUtils";
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
 export interface SnapshotInputOptions {
   centerCoordinate?: GeoJSON.Position;
@@ -46,7 +46,7 @@ export class SnapshotOptions {
   constructor(options: SnapshotInputOptions) {
     if (!options.centerCoordinate && !options.bounds) {
       throw new Error(
-        'Center coordinate or bounds must be supplied in order to take a snapshot',
+        "Center coordinate or bounds must be supplied in order to take a snapshot",
       );
     }
 

package/javascript/modules/snapshot/snapshotManager.ts

@@ -1,8 +1,8 @@
-import SnapshotOptions, {SnapshotInputOptions} from './SnapshotOptions';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import SnapshotOptions, { SnapshotInputOptions } from "./SnapshotOptions";
 
-const MapLibreGLSnapshotManger = NativeModules.MGLSnapshotModule;
+const MapLibreGLSnapshotManger = NativeModules.MLNSnapshotModule;
 
 /**
  * The snapshotManager generates static raster images of the map.

package/javascript/requestAndroidLocationPermissions.ts

@@ -1,6 +1,6 @@
-import {isAndroid} from './utils';
+import { Permission, PermissionsAndroid } from "react-native";
 
-import {Permission, PermissionsAndroid} from 'react-native';
+import { isAndroid } from "./utils";
 
 export async function requestAndroidLocationPermissions(): Promise<boolean> {
   if (isAndroid()) {
@@ -25,5 +25,5 @@ export async function requestAndroidLocationPermissions(): Promise<boolean> {
     return false;
   }
 
-  throw new Error('You should only call this method on Android!');
+  throw new Error("You should only call this method on Android!");
 }

package/javascript/types/OnPressEvent.ts

@@ -1,5 +1,5 @@
 interface OnPressEvent {
-  features: Array<GeoJSON.Feature>;
+  features: GeoJSON.Feature[];
   coordinates: {
     latitude: number;
     longitude: number;

package/javascript/types/index.ts

@@ -1,7 +1,11 @@
-import {SyntheticEvent} from 'react';
+import { SyntheticEvent } from "react";
 
 export type MaplibreGLEvent<
   T extends string,
   P = GeoJSON.Feature,
   V = Element,
-> = SyntheticEvent<V, {type: T; payload: P}>;
+> = SyntheticEvent<V, { type: T; payload: P }>;
+
+export enum StyleURL {
+  Default = "https://demotiles.maplibre.org/style.json",
+}

package/javascript/utils/BridgeValue.ts

@@ -1,20 +1,20 @@
-import {isBoolean, isNumber, isString} from './index';
+import { isBoolean, isNumber, isString } from "./index";
 
 export type RawValueType =
   | string
   | number
   | boolean
   | RawValueType[]
-  | {[key: string]: RawValueType};
+  | { [key: string]: RawValueType };
 
 export type StyleValueJSON =
-  | {type: 'boolean'; value: boolean}
-  | {type: 'number'; value: number}
-  | {type: 'string'; value: string}
-  | {type: 'hashmap'; value: object}
-  | {type: 'array'; value: unknown[]};
+  | { type: "boolean"; value: boolean }
+  | { type: "number"; value: number }
+  | { type: "string"; value: string }
+  | { type: "hashmap"; value: object }
+  | { type: "array"; value: unknown[] };
 
-type StyleValueTypes = 'boolean' | 'number' | 'string' | 'hashmap' | 'array';
+type StyleValueTypes = "boolean" | "number" | "string" | "hashmap" | "array";
 
 export default class BridgeValue {
   rawValue: RawValueType;
@@ -25,19 +25,19 @@ export default class BridgeValue {
 
   get type(): StyleValueTypes {
     if (Array.isArray(this.rawValue)) {
-      return 'array';
+      return "array";
     }
     if (isBoolean(this.rawValue)) {
-      return 'boolean';
+      return "boolean";
     }
     if (isNumber(this.rawValue)) {
-      return 'number';
+      return "number";
     }
     if (isString(this.rawValue)) {
-      return 'string';
+      return "string";
     }
-    if (this.rawValue && typeof this.rawValue === 'object') {
-      return 'hashmap';
+    if (this.rawValue && typeof this.rawValue === "object") {
+      return "hashmap";
     }
     throw new Error(
       `[type - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
@@ -48,20 +48,20 @@ export default class BridgeValue {
     | [StyleValueJSON, StyleValueJSON][]
     | StyleValueJSON[]
     | RawValueType {
-    const {type} = this;
+    const { type } = this;
 
     let value;
 
-    if (type === 'array') {
+    if (type === "array") {
       value = [];
 
       for (const innerRawValue of this.rawValue as RawValueType[]) {
         const bridgeValue = new BridgeValue(innerRawValue);
         value.push(bridgeValue.toJSON());
       }
-    } else if (type === 'hashmap') {
+    } else if (type === "hashmap") {
       value = [];
-      const rawValue = this.rawValue as {[key: string]: RawValueType};
+      const rawValue = this.rawValue as { [key: string]: RawValueType };
       const stringKeys = Object.keys(this.rawValue);
       for (const stringKey of stringKeys) {
         value.push([
@@ -69,7 +69,7 @@ export default class BridgeValue {
           new BridgeValue(rawValue[stringKey]).toJSON(),
         ] as [StyleValueJSON, StyleValueJSON]);
       }
-    } else if (type === 'boolean' || type === 'number' || type === 'string') {
+    } else if (type === "boolean" || type === "number" || type === "string") {
       value = this.rawValue;
     } else {
       throw new Error(
@@ -84,7 +84,7 @@ export default class BridgeValue {
     return {
       type: this.type,
       value:
-        typeof formatter === 'function' ? formatter(this.value) : this.value,
+        typeof formatter === "function" ? formatter(this.value) : this.value,
     } as StyleValueJSON;
   }
 }

package/javascript/utils/Logger.ts

@@ -2,10 +2,10 @@ import {
   EmitterSubscription,
   NativeEventEmitter,
   NativeModules,
-} from 'react-native';
-const {MGLLogging} = NativeModules;
+} from "react-native";
+const { MLNLogging } = NativeModules;
 
-export type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
+export type LogLevel = "error" | "warning" | "info" | "debug" | "verbose";
 interface Log {
   message: string;
   level: LogLevel;
@@ -30,7 +30,7 @@ class Logger {
   private subscription: EmitterSubscription | null;
 
   constructor() {
-    this.loggerEmitter = new NativeEventEmitter(MGLLogging);
+    this.loggerEmitter = new NativeEventEmitter(MLNLogging);
     this.startedCount = 0;
     this.logCallback = null;
     this.subscription = null;
@@ -68,7 +68,7 @@ class Logger {
    * @param {LogLevel} level
    */
   static setLogLevel(level: LogLevel): void {
-    MGLLogging.setLogLevel(level);
+    MLNLogging.setLogLevel(level);
   }
 
   /**
@@ -90,7 +90,7 @@ class Logger {
   }
 
   subscribe(): void {
-    this.subscription = this.loggerEmitter.addListener('LogEvent', log => {
+    this.subscription = this.loggerEmitter.addListener("LogEvent", (log) => {
       this.onLog(log);
     });
   }
@@ -102,14 +102,14 @@ class Logger {
     }
   }
 
-  effectiveLevel({level, message, tag}: Log): LogLevel {
-    if (level === 'warning') {
+  effectiveLevel({ level, message, tag }: Log): LogLevel {
+    if (level === "warning") {
       if (
-        tag === 'Mbgl-HttpRequest' &&
-        message.startsWith('Request failed due to a permanent error: Canceled')
+        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 "info";
       }
     }
     return level;
@@ -117,14 +117,14 @@ class Logger {
 
   onLog(log: Log): void {
     if (!this.logCallback || !this.logCallback(log)) {
-      const {message} = log;
+      const { message } = log;
       const level = this.effectiveLevel(log);
-      if (level === 'error') {
-        console.error('Mapbox error', message, log);
-      } else if (level === 'warning') {
-        console.warn('Mapbox warning', message, log);
+      if (level === "error") {
+        console.error("MapLibre error", message, log);
+      } else if (level === "warning") {
+        console.warn("MapLibre warning", message, log);
       } else {
-        console.log(`Mapbox [${level}]`, message, log);
+        console.log(`MapLibre [${level}]`, message, log);
       }
     }
   }