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

package/javascript/modules/snapshot/{SnapshotOptions.js → SnapshotOptions.ts}

@@ -5,15 +5,52 @@ import {NativeModules} from 'react-native';
 
 const MapLibreGL = NativeModules.MGLModule;
 
-class SnapshotOptions {
-  constructor(options = {}) {
+export interface SnapshotInputOptions {
+  centerCoordinate?: GeoJSON.Position;
+  bounds?: GeoJSON.Position[];
+  styleURL?: string;
+  heading?: number;
+  pitch?: number;
+  zoomLevel?: number;
+  width?: number;
+  height?: number;
+  writeToDisk?: boolean;
+  withLogo?: boolean;
+}
+
+interface SnapshotJsonOptions {
+  centerCoordinate?: string;
+  bounds?: string;
+  styleURL: string;
+  heading: number;
+  pitch: number;
+  zoomLevel: number;
+  width: number;
+  height: number;
+  writeToDisk: boolean;
+  withLogo: boolean;
+}
+
+export class SnapshotOptions {
+  centerCoordinate?: string;
+  bounds?: string;
+  styleURL: string;
+  heading: number;
+  pitch: number;
+  zoomLevel: number;
+  width: number;
+  height: number;
+  writeToDisk: boolean;
+  withLogo: boolean;
+
+  constructor(options: SnapshotInputOptions) {
     if (!options.centerCoordinate && !options.bounds) {
       throw new Error(
         'Center coordinate or bounds must be supplied in order to take a snapshot',
       );
     }
 
-    this.styleURL = options.styleURL || MapLibreGL.StyleURL.Street;
+    this.styleURL = options.styleURL || MapLibreGL.StyleURL.Default;
     this.heading = options.heading || 0.0;
     this.pitch = options.pitch || 0.0;
     this.zoomLevel = options.zoomLevel || 16.0;
@@ -33,7 +70,7 @@ class SnapshotOptions {
     }
   }
 
-  toJSON() {
+  toJSON(): SnapshotJsonOptions {
     return {
       styleURL: this.styleURL,
       heading: this.heading,
@@ -48,12 +85,12 @@ class SnapshotOptions {
     };
   }
 
-  _createCenterCoordPoint(centerCoordinate) {
+  _createCenterCoordPoint(centerCoordinate: GeoJSON.Position): string {
     const point = makePoint(centerCoordinate);
     return toJSONString(point);
   }
 
-  _createBoundsCollection(bounds) {
+  _createBoundsCollection(bounds: GeoJSON.Position[]): string {
     const features = [];
 
     for (const bound of bounds) {

package/javascript/modules/snapshot/{snapshotManager.js → snapshotManager.ts}

@@ -1,4 +1,4 @@
-import SnapshotOptions from './SnapshotOptions';
+import SnapshotOptions, {SnapshotInputOptions} from './SnapshotOptions';
 
 import {NativeModules} from 'react-native';
 
@@ -23,7 +23,7 @@ class SnapshotManager {
    *   zoomLevel: 12,
    *   pitch: 30,
    *   heading: 20,
-   *   styleURL: MapLibreGL.StyleURL.Dark,
+   *   styleURL: MapLibreGL.StyleURL.Default,
    *   writeToDisk: true, // Create a temporary file
    * });
    *
@@ -35,7 +35,7 @@ class SnapshotManager {
    *   zoomLevel: 12,
    *   pitch: 30,
    *   heading: 20,
-   *   styleURL: MapLibreGL.StyleURL.Dark,
+   *   styleURL: MapLibreGL.StyleURL.Default,
    *   withLogo: false, // Disable Mapbox logo (Android only)
    * });
    *
@@ -44,13 +44,13 @@ class SnapshotManager {
    *   bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
    *   width: width,
    *   height: height,
-   *   styleURL: MapLibreGL.StyleURL.Dark,
+   *   styleURL: MapLibreGL.StyleURL.Default,
    * });
    *
    * @param  {SnapshotOptions}  options Snapshot options for create a static image of the base map
    * @return {Promise}
    */
-  async takeSnap(options = {}) {
+  async takeSnap(options: SnapshotInputOptions = {}): Promise<string> {
     const snapshotOptions = new SnapshotOptions(options);
 
     const uri = await MapLibreGLSnapshotManger.takeSnap(snapshotOptions);

package/javascript/requestAndroidLocationPermissions.ts

@@ -0,0 +1,29 @@
+import {isAndroid} from './utils';
+
+import {Permission, PermissionsAndroid} from 'react-native';
+
+export async function requestAndroidLocationPermissions(): Promise<boolean> {
+  if (isAndroid()) {
+    const res = await PermissionsAndroid.requestMultiple([
+      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
+    ]);
+
+    if (!res) {
+      return false;
+    }
+
+    const permissions: string[] = Object.keys(res);
+    for (const permission of permissions) {
+      if (
+        res[permission as Permission] === PermissionsAndroid.RESULTS.GRANTED
+      ) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  throw new Error('You should only call this method on Android!');
+}

package/javascript/types/BaseProps.ts

@@ -0,0 +1,5 @@
+interface BaseProps {
+  testID?: string;
+}
+
+export default BaseProps;

package/javascript/types/OnPressEvent.ts

@@ -0,0 +1,13 @@
+interface OnPressEvent {
+  features: Array<GeoJSON.Feature>;
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  };
+  point: {
+    x: number;
+    y: number;
+  };
+}
+
+export default OnPressEvent;

package/javascript/types/index.ts

@@ -0,0 +1,7 @@
+import {SyntheticEvent} from 'react';
+
+export type MaplibreGLEvent<
+  T extends string,
+  P = GeoJSON.Feature,
+  V = Element,
+> = SyntheticEvent<V, {type: T; payload: P}>;

package/javascript/utils/BridgeValue.ts

@@ -0,0 +1,90 @@
+import {isBoolean, isNumber, isString} from './index';
+
+export type RawValueType =
+  | string
+  | number
+  | boolean
+  | 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 StyleValueTypes = 'boolean' | 'number' | 'string' | 'hashmap' | 'array';
+
+export default class BridgeValue {
+  rawValue: RawValueType;
+
+  constructor(rawValue: RawValueType) {
+    this.rawValue = rawValue;
+  }
+
+  get type(): StyleValueTypes {
+    if (Array.isArray(this.rawValue)) {
+      return 'array';
+    }
+    if (isBoolean(this.rawValue)) {
+      return 'boolean';
+    }
+    if (isNumber(this.rawValue)) {
+      return 'number';
+    }
+    if (isString(this.rawValue)) {
+      return 'string';
+    }
+    if (this.rawValue && typeof this.rawValue === 'object') {
+      return 'hashmap';
+    }
+    throw new Error(
+      `[type - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+    );
+  }
+
+  get value():
+    | [StyleValueJSON, StyleValueJSON][]
+    | StyleValueJSON[]
+    | RawValueType {
+    const {type} = this;
+
+    let value;
+
+    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') {
+      value = [];
+      const rawValue = this.rawValue as {[key: string]: RawValueType};
+      const stringKeys = Object.keys(this.rawValue);
+      for (const stringKey of stringKeys) {
+        value.push([
+          new BridgeValue(stringKey).toJSON(),
+          new BridgeValue(rawValue[stringKey]).toJSON(),
+        ] as [StyleValueJSON, StyleValueJSON]);
+      }
+    } else if (type === 'boolean' || type === 'number' || type === 'string') {
+      value = this.rawValue;
+    } else {
+      throw new Error(
+        `[value - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+      );
+    }
+
+    return value;
+  }
+
+  toJSON(formatter?: <T>(arg0: T) => T): StyleValueJSON {
+    return {
+      type: this.type,
+      value:
+        typeof formatter === 'function' ? formatter(this.value) : this.value,
+    } as StyleValueJSON;
+  }
+}

package/javascript/utils/{Logger.js → Logger.ts}

@@ -1,20 +1,39 @@
-import {NativeEventEmitter, NativeModules} from 'react-native';
+import {
+  EmitterSubscription,
+  NativeEventEmitter,
+  NativeModules,
+} from 'react-native';
 const {MGLLogging} = NativeModules;
 
+export type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
+interface Log {
+  message: string;
+  level: LogLevel;
+  tag?: string;
+}
+
+type LogCallback = (log: Log) => boolean;
+
 class Logger {
-  static instance = null;
+  static instance: Logger | null = null;
 
-  static sharedInstance() {
+  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(MGLLogging);
     this.startedCount = 0;
     this.logCallback = null;
+    this.subscription = null;
   }
 
   /**
@@ -22,7 +41,7 @@ class Logger {
    * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then
    * default logging will take place.
    */
-  static setLogCallback(logCallback) {
+  static setLogCallback(logCallback: LogCallback): void {
     this.sharedInstance().setLogCallback(logCallback);
   }
 
@@ -31,7 +50,7 @@ class Logger {
    * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then
    * default logging will take place.
    */
-  setLogCallback(logCallback) {
+  setLogCallback(logCallback: LogCallback): void {
     this.logCallback = logCallback;
   }
 
@@ -48,7 +67,7 @@ class Logger {
    * setLogLevel
    * @param {LogLevel} level
    */
-  static setLogLevel(level) {
+  static setLogLevel(level: LogLevel): void {
     MGLLogging.setLogLevel(level);
   }
 
@@ -56,34 +75,34 @@ class Logger {
    * @type {('error'|'warning'|'info'|'debug'|'verbose')} LogLevel - Supported log levels
    */
 
-  start() {
+  start(): void {
     if (this.startedCount === 0) {
       this.subscribe();
     }
     this.startedCount += 1;
   }
 
-  stop() {
+  stop(): void {
     this.startedCount -= 1;
     if (this.startedCount === 0) {
       this.unsubscribe();
     }
   }
 
-  subscribe() {
+  subscribe(): void {
     this.subscription = this.loggerEmitter.addListener('LogEvent', log => {
       this.onLog(log);
     });
   }
 
-  unsubscribe() {
-    this.subscription.remove();
-    this.subscription = null;
+  unsubscribe(): void {
+    if (this.subscription) {
+      this.subscription.remove();
+      this.subscription = null;
+    }
   }
 
-  effectiveLevel(log) {
-    let {level, message, tag} = log;
-
+  effectiveLevel({level, message, tag}: Log): LogLevel {
     if (level === 'warning') {
       if (
         tag === 'Mbgl-HttpRequest' &&
@@ -96,10 +115,10 @@ class Logger {
     return level;
   }
 
-  onLog(log) {
+  onLog(log: Log): void {
     if (!this.logCallback || !this.logCallback(log)) {
-      let {message} = log;
-      let level = this.effectiveLevel(log);
+      const {message} = log;
+      const level = this.effectiveLevel(log);
       if (level === 'error') {
         console.error('Mapbox error', message, log);
       } else if (level === 'warning') {