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

package/javascript/components/PointAnnotation.tsx

@@ -1,7 +1,3 @@
-import useNativeBridge, {RNMLEvent} from '../hooks/useNativeBridge';
-import {isFunction, toJSONString} from '../utils';
-import {makePoint} from '../utils/geoUtils';
-
 import React, {
   Component,
   SyntheticEvent,
@@ -9,21 +5,25 @@ import React, {
   useImperativeHandle,
   useRef,
   ReactElement,
-} from 'react';
+} from "react";
 import {
   Platform,
   StyleSheet,
   ViewProps,
   requireNativeComponent,
-} from 'react-native';
+} from "react-native";
+
+import useNativeBridge, { RNMLEvent } from "../hooks/useNativeBridge";
+import { isFunction, toJSONString } from "../utils";
+import { makePoint } from "../utils/geoUtils";
 
-export const NATIVE_MODULE_NAME = 'RCTMLNPointAnnotation';
+export const NATIVE_MODULE_NAME = "RCTMLNPointAnnotation";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
   },
 });
 
@@ -104,10 +104,10 @@ export interface PointAnnotationProps {
    */
   children: React.ReactElement | [React.ReactElement, React.ReactElement];
 
-  style?: ViewProps['style'];
+  style?: ViewProps["style"];
 }
 
-interface NativeProps extends Omit<PointAnnotationProps, 'coordinate'> {
+interface NativeProps extends Omit<PointAnnotationProps, "coordinate"> {
   coordinate?: string;
 }
 
@@ -128,7 +128,7 @@ export interface PointAnnotationRef {
 const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
   (
     {
-      anchor = {x: 0.5, y: 0.5},
+      anchor = { x: 0.5, y: 0.5 },
       draggable = false,
       ...props
     }: PointAnnotationProps,
@@ -146,13 +146,13 @@ const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
       }),
     );
 
-    const {_runNativeCommand, _runPendingNativeCommands} =
+    const { _runNativeCommand, _runPendingNativeCommands } =
       useNativeBridge(NATIVE_MODULE_NAME);
     const _nativeRef = useRef<Component<NativeProps> | null>();
 
     function refresh(): void {
-      if (Platform.OS === 'android') {
-        _runNativeCommand('refresh', _nativeRef.current, []);
+      if (Platform.OS === "android") {
+        _runNativeCommand("refresh", _nativeRef.current, []);
       }
     }
 
@@ -237,7 +237,7 @@ const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
 
 // eslint complains about it
 // not sure why only in this component
-PointAnnotation.displayName = 'PointAnnotation';
+PointAnnotation.displayName = "PointAnnotation";
 
 const RCTMLNPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/javascript/components/RasterLayer.tsx

@@ -1,16 +1,16 @@
-import {RasterLayerStyleProps} 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 { RasterLayerStyleProps } from "../utils/MaplibreStyles";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNRasterLayer';
+export const NATIVE_MODULE_NAME = "RCTMLNRasterLayer";
 
 export interface RasterLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -20,7 +20,7 @@ export interface RasterLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<RasterLayerProps, 'style'>,
+  extends Omit<RasterLayerProps, "style">,
     NativeBaseProps {}
 
 const RCTMLNRasterLayer =
@@ -30,7 +30,7 @@ const RasterLayer: React.FC<RasterLayerProps> = ({
   sourceID = MapLibreGL.StyleSource.DefaultSourceID,
   ...props
 }: RasterLayerProps) => {
-  const {baseProps, setNativeLayer} = useAbstractLayer<
+  const { baseProps, setNativeLayer } = useAbstractLayer<
     RasterLayerProps,
     NativeProps
   >({

package/javascript/components/RasterSource.tsx

@@ -1,18 +1,18 @@
-import {cloneReactChildrenWithProps} from '../utils';
-import BaseProps from '../types/BaseProps';
-import useAbstractSource from '../hooks/useAbstractSource';
-import useOnce from '../hooks/useOnce';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import {NativeModules, requireNativeComponent} from 'react-native';
-import React from 'react';
+import useAbstractSource from "../hooks/useAbstractSource";
+import useOnce from "../hooks/useOnce";
+import BaseProps from "../types/BaseProps";
+import { cloneReactChildrenWithProps } from "../utils";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNRasterSource';
+export const NATIVE_MODULE_NAME = "RCTMLNRasterSource";
 
 const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
-  (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
+  (url.includes("{z}") || url.includes("{bbox-") || url.includes("{quadkey}"));
 
 interface RasterSourceProps extends BaseProps {
   /**
@@ -80,9 +80,9 @@ const RasterSource: React.FC<RasterSourceProps> = ({
     }
   });
 
-  const {setNativeRef} = useAbstractSource<NativeProps>();
+  const { setNativeRef } = useAbstractSource<NativeProps>();
 
-  let {url, tileUrlTemplates} = props;
+  let { url, tileUrlTemplates } = props;
 
   // Swapping url for tileUrlTemplates to provide backward compatiblity
   // when RasterSource supported only tile url as url prop

package/javascript/components/ShapeSource.tsx

@@ -1,34 +1,34 @@
-import useNativeBridge from '../hooks/useNativeBridge';
-import BaseProps from '../types/BaseProps';
-import OnPressEvent from '../types/OnPressEvent';
-import {
-  cloneReactChildrenWithProps,
-  isAndroid,
-  isFunction,
-  toJSONString,
-} from '../utils';
-import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
-import {copyPropertiesAsDeprecated} from '../utils/deprecation';
-import {getFilter} from '../utils/filterUtils';
-
-import {
-  NativeMethods,
-  NativeModules,
-  NativeSyntheticEvent,
-  requireNativeComponent,
-} from 'react-native';
+import { Feature, FeatureCollection } from "@turf/helpers";
 import React, {
   Component,
   ReactElement,
   memo,
   useImperativeHandle,
   useRef,
-} from 'react';
-import {Feature, FeatureCollection} from '@turf/helpers';
+} from "react";
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from "react-native";
+
+import useNativeBridge from "../hooks/useNativeBridge";
+import BaseProps from "../types/BaseProps";
+import OnPressEvent from "../types/OnPressEvent";
+import {
+  cloneReactChildrenWithProps,
+  isAndroid,
+  isFunction,
+  toJSONString,
+} from "../utils";
+import { ExpressionField, FilterExpression } from "../utils/MaplibreStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
-export const NATIVE_MODULE_NAME = 'RCTMLNShapeSource';
-export const SHAPE_SOURCE_NATIVE_ASSETS_KEY = 'assets';
+export const NATIVE_MODULE_NAME = "RCTMLNShapeSource";
+export const SHAPE_SOURCE_NATIVE_ASSETS_KEY = "assets";
 
 interface NativeProps {
   shape?: string;
@@ -82,7 +82,7 @@ export interface ShapeSourceProps extends BaseProps {
    * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
    *
    */
-  clusterProperties?: {[propertyName: string]: ExpressionField};
+  clusterProperties?: { [propertyName: string]: ExpressionField };
   /**
    * Specifies the maximum zoom level at which to create vector tiles.
    * A greater value produces greater detail at high zoom levels.
@@ -146,7 +146,7 @@ export interface ShapeSourceRef {
   ): Promise<FeatureCollection>;
   getClusterChildren(feature: Feature): Promise<FeatureCollection>;
   setNativeProps: (props: NativeProps) => void;
-  onPress: (event: NativeSyntheticEvent<{payload: OnPressEvent}>) => void;
+  onPress: (event: NativeSyntheticEvent<{ payload: OnPressEvent }>) => void;
 
   // this was required by existing test __tests__/utils/animated/AnimatedCoordinatesArray.test.js
   _nativeRef: RCTMLNShapeSourceRefType | undefined;
@@ -157,7 +157,7 @@ export interface ShapeSourceRef {
  * The shape may be a url or a GeoJSON object
  */
 const ShapeSource = memo(
-  React.forwardRef(
+  React.forwardRef<ShapeSourceRef, ShapeSourceProps>(
     (
       {
         id: shapeId = MapLibreGL.StyleSource.DefaultSourceID,
@@ -219,8 +219,11 @@ const ShapeSource = memo(
 
       const _nativeRef = useRef<RCTMLNShapeSourceRefType>();
 
-      const {_runNativeCommand, _runPendingNativeCommands, _onAndroidCallback} =
-        useNativeBridge(NATIVE_MODULE_NAME);
+      const {
+        _runNativeCommand,
+        _runPendingNativeCommands,
+        _onAndroidCallback,
+      } = useNativeBridge(NATIVE_MODULE_NAME);
 
       const _setNativeRef = (nativeRef: RCTMLNShapeSourceRefType): void => {
         _nativeRef.current = nativeRef;
@@ -230,11 +233,10 @@ const ShapeSource = memo(
       async function features(
         filter?: FilterExpression,
       ): Promise<FeatureCollection> {
-        const res: {data: string | FeatureCollection} = await _runNativeCommand(
-          'features',
-          _nativeRef.current,
-          [getFilter(filter)],
-        );
+        const res: { data: string | FeatureCollection } =
+          await _runNativeCommand("features", _nativeRef.current, [
+            getFilter(filter),
+          ]);
 
         if (isAndroid()) {
           return JSON.parse(res.data as string);
@@ -246,20 +248,20 @@ const ShapeSource = memo(
       async function getClusterExpansionZoom(
         feature: Feature,
       ): Promise<number> {
-        if (typeof feature === 'number') {
+        if (typeof feature === "number") {
           console.warn(
-            'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
+            "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: {data: number} = await _runNativeCommand(
-            'getClusterExpansionZoomById',
+          const res: { data: number } = await _runNativeCommand(
+            "getClusterExpansionZoomById",
             _nativeRef.current,
             [feature],
           );
           return res.data;
         }
 
-        const res: {data: number} = await _runNativeCommand(
-          'getClusterExpansionZoom',
+        const res: { data: number } = await _runNativeCommand(
+          "getClusterExpansionZoom",
           _nativeRef.current,
           [JSON.stringify(feature)],
         );
@@ -271,13 +273,13 @@ const ShapeSource = memo(
         limit: number,
         offset: number,
       ): Promise<FeatureCollection> {
-        if (typeof feature === 'number') {
+        if (typeof feature === "number") {
           console.warn(
-            'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
+            "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: {data: string | FeatureCollection} =
+          const res: { data: string | FeatureCollection } =
             await _runNativeCommand(
-              'getClusterLeavesById',
+              "getClusterLeavesById",
               _nativeRef.current,
               [feature, limit, offset],
             );
@@ -289,11 +291,12 @@ const ShapeSource = memo(
           return res.data as FeatureCollection;
         }
 
-        const res: {data: string | FeatureCollection} = await _runNativeCommand(
-          'getClusterLeaves',
-          _nativeRef.current,
-          [JSON.stringify(feature), limit, offset],
-        );
+        const res: { data: string | FeatureCollection } =
+          await _runNativeCommand("getClusterLeaves", _nativeRef.current, [
+            JSON.stringify(feature),
+            limit,
+            offset,
+          ]);
 
         if (isAndroid()) {
           return JSON.parse(res.data as string);
@@ -305,13 +308,13 @@ const ShapeSource = memo(
       async function getClusterChildren(
         feature: Feature,
       ): Promise<FeatureCollection> {
-        if (typeof feature === 'number') {
+        if (typeof feature === "number") {
           console.warn(
-            'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
+            "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: {data: string | FeatureCollection} =
+          const res: { data: string | FeatureCollection } =
             await _runNativeCommand(
-              'getClusterChildrenById',
+              "getClusterChildrenById",
               _nativeRef.current,
               [feature],
             );
@@ -323,11 +326,10 @@ const ShapeSource = memo(
           return res.data as FeatureCollection;
         }
 
-        const res: {data: string | FeatureCollection} = await _runNativeCommand(
-          'getClusterChildren',
-          _nativeRef.current,
-          [JSON.stringify(feature)],
-        );
+        const res: { data: string | FeatureCollection } =
+          await _runNativeCommand("getClusterChildren", _nativeRef.current, [
+            JSON.stringify(feature),
+          ]);
 
         if (isAndroid()) {
           return JSON.parse(res.data as string);
@@ -344,7 +346,7 @@ const ShapeSource = memo(
         const shallowProps = Object.assign({}, nativeProps);
 
         // Adds support for Animated
-        if (shallowProps.shape && typeof shallowProps !== 'string') {
+        if (shallowProps.shape && typeof shallowProps !== "string") {
           shallowProps.shape = JSON.stringify(shallowProps.shape);
         }
 
@@ -359,11 +361,11 @@ const ShapeSource = memo(
       }
 
       function onPress(
-        event: NativeSyntheticEvent<{payload: OnPressEvent}>,
+        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
       ): void {
         const {
           nativeEvent: {
-            payload: {features, coordinates, point},
+            payload: { features, coordinates, point },
           },
         } = event;
         let newEvent = {
@@ -381,7 +383,7 @@ const ShapeSource = memo(
           },
           {
             nativeEvent: (
-              origNativeEvent: NativeSyntheticEvent<{payload: OnPressEvent}>,
+              origNativeEvent: NativeSyntheticEvent<{ payload: OnPressEvent }>,
             ) => ({
               ...origNativeEvent,
               payload: features[0],