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

package/javascript/components/Images.tsx

@@ -1,40 +1,39 @@
-import BaseProps from '../types/BaseProps';
-
-import {SHAPE_SOURCE_NATIVE_ASSETS_KEY} from './ShapeSource';
-
-import React, {ReactElement} from 'react';
+import React, { ReactElement } from "react";
 import {
   requireNativeComponent,
   Image,
   NativeSyntheticEvent,
   ImageSourcePropType,
   ImageURISource,
-} from 'react-native';
+} from "react-native";
+
+import { SHAPE_SOURCE_NATIVE_ASSETS_KEY } from "./ShapeSource";
+import BaseProps from "../types/BaseProps";
 
-export const NATIVE_MODULE_NAME = 'RCTMLNImages';
+export const NATIVE_MODULE_NAME = "RCTMLNImages";
 
 export type ImageEntry = string | ImageSourcePropType;
 
 function _isUrlOrPath(value: ImageEntry): boolean {
   return (
-    (typeof value === 'string' || value instanceof String) &&
-    (value.startsWith('file://') ||
-      value.startsWith('http://') ||
-      value.startsWith('https://') ||
-      value.startsWith('data:') ||
-      value.startsWith('asset://') ||
-      value.startsWith('/'))
+    (typeof value === "string" || value instanceof String) &&
+    (value.startsWith("file://") ||
+      value.startsWith("http://") ||
+      value.startsWith("https://") ||
+      value.startsWith("data:") ||
+      value.startsWith("asset://") ||
+      value.startsWith("/"))
   );
 }
 
 function _isImageSourcePropType(
   value: ImageEntry,
 ): value is ImageSourcePropType {
-  if (typeof value === 'number' || value instanceof Number) {
+  if (typeof value === "number" || value instanceof Number) {
     return true;
   }
   const valueAsSource = value as ImageURISource;
-  return !!valueAsSource.uri && typeof valueAsSource.uri === 'string';
+  return !!valueAsSource.uri && typeof valueAsSource.uri === "string";
 }
 
 interface ImagesProps extends BaseProps {
@@ -43,7 +42,7 @@ interface ImagesProps extends BaseProps {
    * Keys are names - see iconImage expressions, values can be either urls-s objects
    * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
    */
-  images?: {[key: string]: ImageEntry};
+  images?: { [key: string]: ImageEntry };
   /**
    * If you have an asset under Image.xcassets on iOS and the drawables directory on android
    * you can specify an array of string names with assets as the key `['pin']`.
@@ -69,14 +68,14 @@ const Images = ({
   children,
 }: ImagesProps): ReactElement => {
   const _getImages = (): {
-    images?: {[key: string]: ImageEntry};
+    images?: { [key: string]: ImageEntry };
     nativeImages?: ImageEntry[];
   } => {
     if (!images && !nativeAssetImages) {
       return {};
     }
 
-    const imagesResult: {[key: string]: ImageEntry} = {};
+    const imagesResult: { [key: string]: ImageEntry } = {};
     let nativeImages: ImageEntry[] = [];
 
     if (images) {
@@ -113,7 +112,7 @@ const Images = ({
   };
 
   const _onImageMissing = (
-    event: NativeSyntheticEvent<{payload: {imageKey: string}}>,
+    event: NativeSyntheticEvent<{ payload: { imageKey: string } }>,
   ): void => {
     if (onImageMissing) {
       onImageMissing(event.nativeEvent.payload.imageKey);

package/javascript/components/Light.tsx

@@ -1,13 +1,12 @@
-import {LightLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
-import {StyleValue} from '../utils/StyleValue';
-import {BaseLayerProps} from '../hooks/useAbstractLayer';
-import useAbstractLayer from '../hooks/useAbstractLayer';
+import React from "react";
+import { requireNativeComponent } from "react-native";
 
-import React from 'react';
-import {requireNativeComponent} from 'react-native';
+import useAbstractLayer, { BaseLayerProps } from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { LightLayerStyleProps } from "../utils/MaplibreStyles";
+import { StyleValue } from "../utils/StyleValue";
 
-export const NATIVE_MODULE_NAME = 'RCTMLNLight';
+export const NATIVE_MODULE_NAME = "RCTMLNLight";
 
 interface LightProps extends BaseProps, BaseLayerProps {
   /**
@@ -16,8 +15,8 @@ interface LightProps extends BaseProps, BaseLayerProps {
   style?: LightLayerStyleProps;
 }
 
-interface NativeProps extends Omit<LightProps, 'style'> {
-  reactStyle?: {[key: string]: StyleValue};
+interface NativeProps extends Omit<LightProps, "style"> {
+  reactStyle?: { [key: string]: StyleValue };
 }
 
 const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
@@ -26,11 +25,12 @@ const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
  * Light represents the light source for extruded geometries
  */
 const Light: React.FC<LightProps> = (props: LightProps) => {
-  const {baseProps, setNativeLayer} = useAbstractLayer<LightProps, NativeProps>(
-    {
-      ...props,
-    },
-  );
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    LightProps,
+    NativeProps
+  >({
+    ...props,
+  });
 
   return (
     <RCTMLNLight ref={setNativeLayer} testID="rctmlnLight" {...baseProps} />

package/javascript/components/LineLayer.tsx

@@ -1,16 +1,16 @@
-import {LineLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
 import useAbstractLayer, {
   BaseLayerProps,
   NativeBaseProps,
-} from '../hooks/useAbstractLayer';
-
-import React from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { LineLayerStyleProps } from "../utils/MaplibreStyles";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNLineLayer';
+export const NATIVE_MODULE_NAME = "RCTMLNLineLayer";
 
 export interface LineLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -19,7 +19,7 @@ export interface LineLayerProps extends BaseProps, BaseLayerProps {
   style?: LineLayerStyleProps;
 }
 
-interface NativeProps extends Omit<LineLayerProps, 'style'>, NativeBaseProps {}
+interface NativeProps extends Omit<LineLayerProps, "style">, NativeBaseProps {}
 
 const RCTMLNLineLayer =
   requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
@@ -31,7 +31,7 @@ const LineLayer: React.FC<LineLayerProps> = ({
   sourceID = MapLibreGL.StyleSource.DefaultSourceID,
   ...props
 }: LineLayerProps) => {
-  const {baseProps, setNativeLayer} = useAbstractLayer<
+  const { baseProps, setNativeLayer } = useAbstractLayer<
     LineLayerProps,
     NativeProps
   >({

package/javascript/components/MapView.tsx

@@ -1,12 +1,4 @@
-import useNativeBridge from '../hooks/useNativeBridge';
-import useOnce from '../hooks/useOnce';
-import {FilterExpression} from '../utils/MaplibreStyles';
-import {Location} from '../modules/location/locationManager';
-import {isFunction, isAndroid} from '../utils';
-import {getFilter} from '../utils/filterUtils';
-import Logger from '../utils/Logger';
-import BaseProps from '../types/BaseProps';
-
+import debounce from "debounce";
 import React, {
   Component,
   memo,
@@ -18,7 +10,7 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 import {
   View,
   StyleSheet,
@@ -27,22 +19,30 @@ import {
   ViewProps,
   NativeMethods,
   NativeSyntheticEvent,
-} from 'react-native';
-import debounce from 'debounce';
+} from "react-native";
+
+import useNativeBridge from "../hooks/useNativeBridge";
+import useOnce from "../hooks/useOnce";
+import { Location } from "../modules/location/locationManager";
+import BaseProps from "../types/BaseProps";
+import { isFunction, isAndroid } from "../utils";
+import Logger from "../utils/Logger";
+import { FilterExpression } from "../utils/MaplibreStyles";
+import { getFilter } from "../utils/filterUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
 if (MapLibreGL == null) {
   console.error(
-    'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
+    "Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.",
   );
 }
 
-export const NATIVE_MODULE_NAME = 'RCTMLNMapView';
+export const NATIVE_MODULE_NAME = "RCTMLNMapView";
 
-export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = 'RCTMLNAndroidTextureMapView';
+export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = "RCTMLNAndroidTextureMapView";
 
 const styles = StyleSheet.create({
-  matchParent: {flex: 1},
+  matchParent: { flex: 1 },
 });
 
 const defaultStyleURL = MapLibreGL.StyleURL.Street;
@@ -66,7 +66,7 @@ interface MapViewProps extends BaseProps {
   /**
    * Style for wrapping React Native View
    */
-  style?: ViewProps['style'];
+  style?: ViewProps["style"];
   /**
    * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default`
    */
@@ -117,10 +117,10 @@ interface MapViewProps extends BaseProps {
    * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map
    */
   attributionPosition?:
-    | {top?: number; left?: number}
-    | {top?: number; right?: number}
-    | {bottom?: number; left?: number}
-    | {bottom?: number; right?: number};
+    | { top?: number; left?: number }
+    | { top?: number; right?: number }
+    | { bottom?: number; left?: number }
+    | { bottom?: number; right?: number };
   /**
    * MapView's tintColor
    */
@@ -133,10 +133,10 @@ interface MapViewProps extends BaseProps {
    * Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map
    */
   logoPosition?:
-    | {top?: number; left?: number}
-    | {top?: number; right?: number}
-    | {bottom?: number; left?: number}
-    | {bottom?: number; right?: number};
+    | { top?: number; left?: number }
+    | { top?: number; right?: number }
+    | { bottom?: number; left?: number }
+    | { bottom?: number; right?: number };
   /**
    * Enable/Disable the compass from appearing on the map
    */
@@ -248,9 +248,9 @@ type CallableProps = {
     : never;
 }[keyof MapViewProps];
 
-interface NativeProps extends Omit<MapViewProps, 'onPress' | 'onLongPress'> {
-  onPress(event: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void;
-  onLongPress(event: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void;
+interface NativeProps extends Omit<MapViewProps, "onPress" | "onLongPress"> {
+  onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
+  onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
 }
 
 export interface MapViewRef {
@@ -407,8 +407,11 @@ const MapView = memo(
         }),
       );
 
-      const {_runNativeCommand, _runPendingNativeCommands, _onAndroidCallback} =
-        useNativeBridge(NATIVE_MODULE_NAME);
+      const {
+        _runNativeCommand,
+        _runPendingNativeCommands,
+        _onAndroidCallback,
+      } = useNativeBridge(NATIVE_MODULE_NAME);
       const logger = useRef<Logger>(Logger.sharedInstance());
       // * start the logger before anyuseEffect
       useOnce(() => {
@@ -483,7 +486,7 @@ const MapView = memo(
           }
 
           _runNativeCommand(
-            'setHandledMapChangedEvents',
+            "setHandledMapChangedEvents",
             _nativeRef.current,
             events,
           );
@@ -493,8 +496,8 @@ const MapView = memo(
       const getPointInView = async (
         coordinate: GeoJSON.Position,
       ): Promise<GeoJSON.Point> => {
-        const res: {pointInView: GeoJSON.Point} = await _runNativeCommand(
-          'getPointInView',
+        const res: { pointInView: GeoJSON.Point } = await _runNativeCommand(
+          "getPointInView",
           _nativeRef.current,
           [coordinate],
         );
@@ -504,16 +507,16 @@ const MapView = memo(
       const getCoordinateFromView = async (
         point: number[],
       ): Promise<GeoJSON.Position> => {
-        const res: {coordinateFromView: GeoJSON.Position} =
-          await _runNativeCommand('getCoordinateFromView', _nativeRef.current, [
+        const res: { coordinateFromView: GeoJSON.Position } =
+          await _runNativeCommand("getCoordinateFromView", _nativeRef.current, [
             point,
           ]);
         return res.coordinateFromView;
       };
 
       const getVisibleBounds = async (): Promise<VisibleBounds> => {
-        const res: {visibleBounds: VisibleBounds} = await _runNativeCommand(
-          'getVisibleBounds',
+        const res: { visibleBounds: VisibleBounds } = await _runNativeCommand(
+          "getVisibleBounds",
           _nativeRef.current,
         );
         return res.visibleBounds;
@@ -530,9 +533,9 @@ const MapView = memo(
           );
         }
 
-        const res: {data: string | GeoJSON.FeatureCollection} =
+        const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand(
-            'queryRenderedFeaturesAtPoint',
+            "queryRenderedFeaturesAtPoint",
             _nativeRef.current,
             [point, getFilter(filter), layerIDs],
           );
@@ -551,12 +554,12 @@ const MapView = memo(
       ): Promise<GeoJSON.FeatureCollection> => {
         if (!bbox || bbox.length !== 4) {
           throw new Error(
-            'Must pass in a valid bounding box[top, right, bottom, left]',
+            "Must pass in a valid bounding box[top, right, bottom, left]",
           );
         }
-        const res: {data: string | GeoJSON.FeatureCollection} =
+        const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand(
-            'queryRenderedFeaturesInRect',
+            "queryRenderedFeaturesInRect",
             _nativeRef.current,
             [bbox, getFilter(filter), layerIDs],
           );
@@ -570,13 +573,13 @@ const MapView = memo(
 
       const setCamera = (): void => {
         console.warn(
-          'MapView.setCamera is deprecated - please use Camera#setCamera',
+          "MapView.setCamera is deprecated - please use Camera#setCamera",
         );
       };
 
       const takeSnap = async (writeToDisk = false): Promise<string> => {
-        const res: {uri: string} = await _runNativeCommand(
-          'takeSnap',
+        const res: { uri: string } = await _runNativeCommand(
+          "takeSnap",
           _nativeRef.current,
           [writeToDisk],
         );
@@ -584,16 +587,16 @@ const MapView = memo(
       };
 
       const getZoom = async (): Promise<number> => {
-        const res: {zoom: number} = await _runNativeCommand(
-          'getZoom',
+        const res: { zoom: number } = await _runNativeCommand(
+          "getZoom",
           _nativeRef.current,
         );
         return res.zoom;
       };
 
       const getCenter = async (): Promise<GeoJSON.Position> => {
-        const res: {center: GeoJSON.Position} = await _runNativeCommand(
-          'getCenter',
+        const res: { center: GeoJSON.Position } = await _runNativeCommand(
+          "getCenter",
           _nativeRef.current,
         );
         return res.center;
@@ -604,7 +607,7 @@ const MapView = memo(
         sourceId: string,
         sourceLayerId: string | null = null,
       ): void => {
-        _runNativeCommand('setSourceVisibility', _nativeRef.current, [
+        _runNativeCommand("setSourceVisibility", _nativeRef.current, [
           visible,
           sourceId,
           sourceLayerId,
@@ -612,11 +615,11 @@ const MapView = memo(
       };
 
       const showAttribution = async (): Promise<void> => {
-        _runNativeCommand('showAttribution', _nativeRef.current);
+        _runNativeCommand("showAttribution", _nativeRef.current);
       };
 
       const _onPress = (
-        e: NativeSyntheticEvent<{payload: GeoJSON.Feature}>,
+        e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>,
       ): void => {
         if (isFunction(props.onPress)) {
           props.onPress(e.nativeEvent.payload);
@@ -624,7 +627,7 @@ const MapView = memo(
       };
 
       const _onLongPress = (
-        e: NativeSyntheticEvent<{payload: GeoJSON.Feature}>,
+        e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>,
       ): void => {
         if (isFunction(props.onLongPress)) {
           props.onLongPress(e.nativeEvent.payload);
@@ -665,7 +668,7 @@ const MapView = memo(
           payload?: GeoJSON.Feature | Location;
         }>,
       ): void => {
-        const {type, payload} = e.nativeEvent;
+        const { type, payload } = e.nativeEvent;
         let propName: CallableProps | undefined;
 
         switch (type) {
@@ -680,11 +683,11 @@ const MapView = memo(
                 );
               }
             } else {
-              propName = 'onRegionWillChange';
+              propName = "onRegionWillChange";
             }
             break;
           case MapLibreGL.EventTypes.RegionIsChanging:
-            propName = 'onRegionIsChanging';
+            propName = "onRegionIsChanging";
             break;
           case MapLibreGL.EventTypes.RegionDidChange:
             if (
@@ -697,44 +700,44 @@ const MapView = memo(
                 );
               }
             } else {
-              propName = 'onRegionDidChange';
+              propName = "onRegionDidChange";
             }
             break;
           case MapLibreGL.EventTypes.UserLocationUpdated:
-            propName = 'onUserLocationUpdate';
+            propName = "onUserLocationUpdate";
             break;
           case MapLibreGL.EventTypes.WillStartLoadingMap:
-            propName = 'onWillStartLoadingMap';
+            propName = "onWillStartLoadingMap";
             break;
           case MapLibreGL.EventTypes.DidFinishLoadingMap:
-            propName = 'onDidFinishLoadingMap';
+            propName = "onDidFinishLoadingMap";
             break;
           case MapLibreGL.EventTypes.DidFailLoadingMap:
-            propName = 'onDidFailLoadingMap';
+            propName = "onDidFailLoadingMap";
             break;
           case MapLibreGL.EventTypes.WillStartRenderingFrame:
-            propName = 'onWillStartRenderingFrame';
+            propName = "onWillStartRenderingFrame";
             break;
           case MapLibreGL.EventTypes.DidFinishRenderingFrame:
-            propName = 'onDidFinishRenderingFrame';
+            propName = "onDidFinishRenderingFrame";
             break;
           case MapLibreGL.EventTypes.DidFinishRenderingFrameFully:
-            propName = 'onDidFinishRenderingFrameFully';
+            propName = "onDidFinishRenderingFrameFully";
             break;
           case MapLibreGL.EventTypes.WillStartRenderingMap:
-            propName = 'onWillStartRenderingMap';
+            propName = "onWillStartRenderingMap";
             break;
           case MapLibreGL.EventTypes.DidFinishRenderingMap:
-            propName = 'onDidFinishRenderingMap';
+            propName = "onDidFinishRenderingMap";
             break;
           case MapLibreGL.EventTypes.DidFinishRenderingMapFully:
-            propName = 'onDidFinishRenderingMapFully';
+            propName = "onDidFinishRenderingMapFully";
             break;
           case MapLibreGL.EventTypes.DidFinishLoadingStyle:
-            propName = 'onDidFinishLoadingStyle';
+            propName = "onDidFinishLoadingStyle";
             break;
           default:
-            console.warn('Unhandled event callback type', type);
+            console.warn("Unhandled event callback type", type);
         }
 
         if (propName) {
@@ -856,7 +859,8 @@ const MapView = memo(
         <View
           onLayout={_onLayout}
           style={props.style}
-          testID={mapView ? undefined : props.testID}>
+          testID={mapView ? undefined : props.testID}
+        >
           {mapView}
         </View>
       );

package/javascript/components/MarkerView.tsx

@@ -1,12 +1,11 @@
-import {toJSONString} from '../utils';
-import {makePoint} from '../utils/geoUtils';
+import React, { ReactElement, useMemo } from "react";
+import { Platform, requireNativeComponent, ViewProps } from "react-native";
 
-import PointAnnotation from './PointAnnotation';
+import PointAnnotation from "./PointAnnotation";
+import { toJSONString } from "../utils";
+import { makePoint } from "../utils/geoUtils";
 
-import React, {ReactElement, useMemo} from 'react';
-import {Platform, requireNativeComponent, ViewProps} from 'react-native';
-
-export const NATIVE_MODULE_NAME = 'RCTMLNMarkerView';
+export const NATIVE_MODULE_NAME = "RCTMLNMarkerView";
 
 interface MarkerViewProps extends ViewProps {
   /**
@@ -41,7 +40,7 @@ interface MarkerViewProps extends ViewProps {
 
 interface NativeProps extends ViewProps {
   coordinate: string | undefined;
-  anchor: {x: number; y: number};
+  anchor: { x: number; y: number };
   allowOverlap: boolean;
   isSelected: boolean;
 }
@@ -64,7 +63,7 @@ const MarkerView = (props: MarkerViewProps): ReactElement => {
     return `MV-${MarkerView.lastId}`;
   }, []);
 
-  if (Platform.OS === 'ios') {
+  if (Platform.OS === "ios") {
     return <PointAnnotation id={idForPointAnnotation} {...props} />;
   }
 
@@ -78,7 +77,7 @@ const MarkerView = (props: MarkerViewProps): ReactElement => {
 
 MarkerView.lastId = 0;
 MarkerView.defaultProps = {
-  anchor: {x: 0.5, y: 0.5},
+  anchor: { x: 0.5, y: 0.5 },
   allowOverlap: false,
   isSelected: false,
 };

package/javascript/components/NativeUserLocation.tsx

@@ -1,7 +1,7 @@
-import React, {ReactElement} from 'react';
-import {requireNativeComponent} from 'react-native';
+import React, { ReactElement } from "react";
+import { requireNativeComponent } from "react-native";
 
-const NATIVE_MODULE_NAME = 'RCTMLNNativeUserLocation';
+const NATIVE_MODULE_NAME = "RCTMLNNativeUserLocation";
 
 interface NativeUserLocationProps {
   /**
@@ -13,7 +13,7 @@ interface NativeUserLocationProps {
    *
    * @platform android
    */
-  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  androidRenderMode?: "normal" | "compass" | "gps";
   /**
    * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
    *