@maplibre/maplibre-react-native 10.0.0-alpha.8 → 10.0.0-alpha.9

package/javascript/components/UserLocation.tsx

@@ -1,31 +1,30 @@
-import locationManager, {Location} from '../modules/location/locationManager';
-import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
+import React, { ReactElement, useEffect, useImperativeHandle } from "react";
 
-import Annotation from './annotations/Annotation';
-import CircleLayer from './CircleLayer';
-import HeadingIndicator from './HeadingIndicator';
-import NativeUserLocation from './NativeUserLocation';
+import CircleLayer from "./CircleLayer";
+import HeadingIndicator from "./HeadingIndicator";
+import NativeUserLocation from "./NativeUserLocation";
+import Annotation from "./annotations/Annotation";
+import locationManager, { Location } from "../modules/location/locationManager";
+import { CircleLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement, useEffect, useImperativeHandle} from 'react';
-
-const mapboxBlue = 'rgba(51, 181, 229, 100)';
+const mapboxBlue = "rgba(51, 181, 229, 100)";
 
 const layerStyles: Record<string, CircleLayerStyleProps> = {
   pluse: {
     circleRadius: 15,
     circleColor: mapboxBlue,
     circleOpacity: 0.2,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
   background: {
     circleRadius: 9,
-    circleColor: '#fff',
-    circlePitchAlignment: 'map',
+    circleColor: "#fff",
+    circlePitchAlignment: "map",
   },
   foreground: {
     circleRadius: 6,
     circleColor: mapboxBlue,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
 };
 
@@ -50,7 +49,7 @@ export const normalIcon = (
     style={layerStyles.foreground}
   />,
   ...(showsUserHeadingIndicator && heading
-    ? [HeadingIndicator({heading})]
+    ? [HeadingIndicator({ heading })]
     : []),
 ];
 
@@ -63,7 +62,7 @@ interface UserLocationProps {
    * Which render mode to use.
    * Can either be `normal` or `native`
    */
-  renderMode?: 'normal' | 'native';
+  renderMode?: "normal" | "native";
   /**
    * native/android only render mode
    *
@@ -73,7 +72,7 @@ interface UserLocationProps {
    *
    * @platform android
    */
-  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  androidRenderMode?: "normal" | "compass" | "gps";
   /**
    * Whether location icon is visible
    */
@@ -109,12 +108,12 @@ interface UserLocationState {
 }
 
 export enum UserLocationRenderMode {
-  Native = 'native',
-  Normal = 'normal',
+  Native = "native",
+  Normal = "normal",
 }
 
 export interface UserLocationRef {
-  setLocationManager: (props: {running: boolean}) => Promise<void>;
+  setLocationManager: (props: { running: boolean }) => Promise<void>;
   needsLocationManagerRunning: () => boolean;
   _onLocationUpdate: (location: Location | null) => void;
 }
@@ -127,7 +126,7 @@ const UserLocation = React.memo(
         visible = true,
         showsUserHeadingIndicator = false,
         minDisplacement = 0,
-        renderMode = 'normal',
+        renderMode = "normal",
         androidRenderMode,
         children,
         onUpdate,
@@ -183,7 +182,7 @@ const UserLocation = React.memo(
 
         return (): void => {
           _isMounted.current = false;
-          setLocationManager({running: false});
+          setLocationManager({ running: false });
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
@@ -236,7 +235,7 @@ const UserLocation = React.memo(
         let heading;
 
         if (location && location.coords) {
-          const {longitude, latitude} = location.coords;
+          const { longitude, latitude } = location.coords;
           heading = location.coords.heading;
           coordinates = [longitude, latitude];
         }
@@ -277,7 +276,8 @@ const UserLocation = React.memo(
           coordinates={userLocationState.coordinates}
           style={{
             iconRotate: userLocationState.heading,
-          }}>
+          }}
+        >
           {children ||
             normalIcon(showsUserHeadingIndicator, userLocationState.heading)}
         </Annotation>

package/javascript/components/VectorSource.tsx

@@ -1,23 +1,23 @@
-import {FilterExpression} from '../utils/MaplibreStyles';
-import {cloneReactChildrenWithProps, isFunction, isAndroid} from '../utils';
-import {getFilter} from '../utils/filterUtils';
-import {copyPropertiesAsDeprecated} from '../utils/deprecation';
-import BaseProps from '../types/BaseProps';
-import OnPressEvent from '../types/OnPressEvent';
-import useAbstractSource from '../hooks/useAbstractSource';
-import useNativeBridge from '../hooks/useNativeBridge';
-
-import React, {memo, useImperativeHandle} from 'react';
+import { featureCollection } from "@turf/helpers";
+import React, { memo, useImperativeHandle } from "react";
 import {
   NativeModules,
   NativeSyntheticEvent,
   requireNativeComponent,
-} from 'react-native';
-import {featureCollection} from '@turf/helpers';
+} from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import useNativeBridge from "../hooks/useNativeBridge";
+import BaseProps from "../types/BaseProps";
+import OnPressEvent from "../types/OnPressEvent";
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
+import { FilterExpression } from "../utils/MaplibreStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNVectorSource';
+export const NATIVE_MODULE_NAME = "RCTMLNVectorSource";
 
 interface VectorSourceProps extends BaseProps {
   /**
@@ -122,7 +122,7 @@ const VectorSource = memo(
         //  _runPendingNativeCommands,
         _onAndroidCallback,
       } = useNativeBridge(NATIVE_MODULE_NAME);
-      const {setNativeRef, _nativeRef} = useAbstractSource<NativeProps>();
+      const { setNativeRef, _nativeRef } = useAbstractSource<NativeProps>();
 
       // const _setNativeRef = (
       //   nativeRef: (Component<NativeProps> & Readonly<NativeMethods>) | null,
@@ -140,8 +140,8 @@ const VectorSource = memo(
         if (!_nativeRef) {
           return featureCollection([]);
         }
-        const res: {data: string | GeoJSON.FeatureCollection} =
-          await _runNativeCommand('features', _nativeRef, [
+        const res: { data: string | GeoJSON.FeatureCollection } =
+          await _runNativeCommand("features", _nativeRef, [
             [[layerIDs, getFilter(filter)]],
           ]);
 
@@ -153,16 +153,16 @@ const VectorSource = memo(
       };
 
       const onPress = (
-        event: NativeSyntheticEvent<{payload: OnPressEvent}>,
+        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
       ): void => {
-        const {onPress} = props;
+        const { onPress } = props;
 
         if (!onPress) {
           return;
         }
         const {
           nativeEvent: {
-            payload: {features, coordinates, point},
+            payload: { features, coordinates, point },
           },
         } = event;
         let newEvent = {

package/javascript/components/annotations/Annotation.tsx

@@ -1,16 +1,16 @@
-import SymbolLayer from '../SymbolLayer';
-import Animated from '../../utils/animated/Animated';
-import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
-import OnPressEvent from '../../types/OnPressEvent';
-import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
-
 import React, {
   ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
-} from 'react';
-import {Animated as RNAnimated, Easing} from 'react-native';
+} from "react";
+import { Animated as RNAnimated, Easing } from "react-native";
+
+import OnPressEvent from "../../types/OnPressEvent";
+import { SymbolLayerStyleProps } from "../../utils/MaplibreStyles";
+import { AnimatedShapeSource } from "../../utils/animated/Animated";
+import AnimatedMapPoint from "../../utils/animated/AnimatedPoint";
+import SymbolLayer from "../SymbolLayer";
 
 interface AnnotationProps {
   id: string;
@@ -29,7 +29,7 @@ type Shape = AnimatedMapPoint | GeoJSON.Point;
 function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
   const lng = props.coordinates?.[0] || 0;
   const lat = props.coordinates?.[1] || 0;
-  const point: GeoJSON.Point = {type: 'Point', coordinates: [lng, lat]};
+  const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
 
   if (props.animated) {
     return new AnimatedMapPoint(point);
@@ -77,7 +77,7 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
     );
 
     // this will run useEffect only when actual coordinates values change
-    const coordinateDeps = props.coordinates?.join(',');
+    const coordinateDeps = props.coordinates?.join(",");
 
     useEffect(() => {
       if (!Array.isArray(props.coordinates)) {
@@ -127,7 +127,7 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
 
     const children = [];
     const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
-      ? {...props.style, iconImage: props.icon}
+      ? { ...props.style, iconImage: props.icon }
       : undefined;
 
     if (symbolStyle) {
@@ -145,16 +145,17 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
     }
 
     return (
-      <Animated.ShapeSource
+      <AnimatedShapeSource
         id={props.id}
         onPress={_onPress}
-        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}>
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
         {children}
-      </Animated.ShapeSource>
+      </AnimatedShapeSource>
     );
   },
 );
 
-Annotation.displayName = 'Annotation';
+Annotation.displayName = "Annotation";
 
 export default Annotation;

package/javascript/hooks/useAbstractLayer.ts

@@ -1,15 +1,15 @@
-import {StyleValue, transformStyle} from '../utils/StyleValue';
-import {getFilter} from '../utils/filterUtils';
+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 BaseProps from '../types/BaseProps';
-
-import React, {useMemo, useRef} from 'react';
-import {processColor, NativeMethods} from 'react-native';
+} from "../utils/MaplibreStyles";
+import { StyleValue, transformStyle } from "../utils/StyleValue";
+import { getFilter } from "../utils/filterUtils";
 
 export interface BaseLayerProps {
   /**
@@ -57,7 +57,7 @@ export interface BaseLayerProps {
 }
 
 export interface NativeBaseProps {
-  reactStyle?: {[key: string]: StyleValue};
+  reactStyle?: { [key: string]: StyleValue };
 }
 
 export default function useAbstractLayer<
@@ -71,7 +71,7 @@ export default function useAbstractLayer<
     instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
   ) => void;
   getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
-  setNativeProps: (nativeProps: {[key: string]: unknown}) => void;
+  setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
 } {
   const nativeLayer = useRef<
     (React.Component<NativeProps> & Readonly<NativeMethods>) | null
@@ -102,14 +102,17 @@ export default function useAbstractLayer<
   const getStyleTypeFormatter = (
     styleType: string,
   ): typeof processColor | undefined => {
-    return styleType === 'color' ? processColor : undefined;
+    return styleType === "color" ? processColor : undefined;
   };
 
-  const setNativeProps = (nativeProps: {[key: string]: unknown}): void => {
+  const setNativeProps = (nativeProps: { [key: string]: unknown }): void => {
     if (nativeLayer.current) {
       let propsToPass = nativeProps;
       if (nativeProps.style) {
-        propsToPass = {...nativeProps, reactStyle: transformStyle(props.style)};
+        propsToPass = {
+          ...nativeProps,
+          reactStyle: transformStyle(props.style),
+        };
       }
       nativeLayer.current.setNativeProps(propsToPass);
     }

package/javascript/hooks/useAbstractSource.ts

@@ -1,5 +1,5 @@
-import React, {useRef} from 'react';
-import {NativeMethods} from 'react-native';
+import React, { useRef } from "react";
+import { NativeMethods } from "react-native";
 
 export default function useAbstractSource<NativePropsType extends object>(): {
   _nativeRef:

package/javascript/hooks/useNativeBridge.ts

@@ -1,8 +1,8 @@
-import {runNativeCommand, isAndroid, NativeArg} from '../utils';
+import React, { Component, SyntheticEvent, useRef } from "react";
 
-import React, {Component, SyntheticEvent, useRef} from 'react';
+import { runNativeCommand, isAndroid, NativeArg } from "../utils";
 
-export type RNMLEvent<PayloadType = {[key: string]: string}> = {
+export type RNMLEvent<PayloadType = { [key: string]: string }> = {
   payload: PayloadType;
   type: string;
 };
@@ -41,7 +41,7 @@ const useNativeBridge: (moduleName: string) => UseNativeBridge = (
     resolve: (value: ReturnType) => void,
     reject: (error: Error) => void,
   ): void => {
-    _callbackMap.current.set(id, {resolve, reject});
+    _callbackMap.current.set(id, { resolve, reject });
   };
 
   const _removeAndroidCallback = (id: string): void => {
@@ -57,7 +57,7 @@ const useNativeBridge: (moduleName: string) => UseNativeBridge = (
     }
 
     _callbackMap.current.delete(callbackID);
-    const {payload} = e.nativeEvent;
+    const { payload } = e.nativeEvent;
     if (payload.error) {
       callback.reject.call(null, new Error(payload.error));
     } else {
@@ -90,9 +90,9 @@ const useNativeBridge: (moduleName: string) => UseNativeBridge = (
     args: NativeArg[] = [],
   ): Promise<ReturnType> => {
     if (!nativeRef) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         _preRefMapMethodQueue.current.push({
-          method: {name: methodName, args},
+          method: { name: methodName, args },
           resolver: resolve,
         });
       });

package/javascript/hooks/useNativeRef.ts

@@ -1,5 +1,5 @@
-import React, {Component, useRef} from 'react';
-import {NativeMethods} from 'react-native';
+import React, { Component, useRef } from "react";
+import { NativeMethods } from "react-native";
 
 type NativeRef<NativeProps> = Component<NativeProps> & Readonly<NativeMethods>;
 

package/javascript/hooks/useOnce.ts

@@ -1,4 +1,4 @@
-import {useRef} from 'react';
+import { useRef } from "react";
 
 const useOnce: (callback: () => void) => void = (callback: () => void) => {
   const once = useRef(false);

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,7 +2,7 @@ import {
   NativeModules,
   NativeEventEmitter,
   EmitterSubscription,
-} from 'react-native';
+} from "react-native";
 
 const MapLibreGL = NativeModules.MLNModule;
 const MapLibreGLLocationManager = NativeModules.MLNLocationModule;
@@ -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,6 +1,6 @@
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import OfflineCreatePackOptions from "./OfflineCreatePackOptions";
 
 const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
 
@@ -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,15 +1,14 @@
-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.MLNModule;
 const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
@@ -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,7 +1,7 @@
-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.MLNModule;
 
@@ -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,6 +1,6 @@
-import SnapshotOptions, {SnapshotInputOptions} from './SnapshotOptions';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import SnapshotOptions, { SnapshotInputOptions } from "./SnapshotOptions";
 
 const MapLibreGLSnapshotManger = NativeModules.MLNSnapshotModule;
 

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