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

package/src/components/ShapeSource.tsx

@@ -1,8 +1,8 @@
 import {
   Component,
-  type ReactElement,
   forwardRef,
   memo,
+  type ReactNode,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -13,8 +13,12 @@ import {
   requireNativeComponent,
 } from "react-native";
 
-import useNativeBridge from "../hooks/useNativeBridge";
+import { useNativeBridge } from "../hooks/useNativeBridge";
 import { type BaseProps } from "../types/BaseProps";
+import {
+  type ExpressionField,
+  type FilterExpression,
+} from "../types/MapLibreRNStyles";
 import { type OnPressEvent } from "../types/OnPressEvent";
 import {
   cloneReactChildrenWithProps,
@@ -22,16 +26,10 @@ import {
   isFunction,
   toJSONString,
 } from "../utils";
-import {
-  type ExpressionField,
-  type FilterExpression,
-} from "../utils/MapLibreRNStyles";
-import { copyPropertiesAsDeprecated } from "../utils/deprecation";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 export const NATIVE_MODULE_NAME = "MLRNShapeSource";
-export const SHAPE_SOURCE_NATIVE_ASSETS_KEY = "assets";
 
 interface NativeProps {
   shape?: string;
@@ -81,7 +79,7 @@ export interface ShapeSourceProps extends BaseProps {
    *   it accumulates the property value from clusters/points the cluster contains
    *  `map_expression` produces the value of a single point
    *
-   * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
+   * @example `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
    *
    */
   clusterProperties?: { [propertyName: string]: ExpressionField };
@@ -111,18 +109,11 @@ export interface ShapeSourceProps extends BaseProps {
    */
   lineMetrics?: boolean;
   /**
-   * Source press listener, gets called when a user presses one of the children layers only
-   * if that layer has a higher z-index than another source layers
-   *
-   * @param {Object} event
-   * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
-   * @param {Object} event.coordinates - the coordinates of the click
-   * @param {Object} event.point - the point of the click
-   * @return void
+   * Source press listener, gets called when a user presses one of the children layers only if that layer has a higher z-index than another source layers.
    */
   onPress?: (event: OnPressEvent) => void;
   /**
-   * Overrides the default touch hitbox(44x44 pixels) for the source layers
+   * Overrides the default touch hitbox (44x44 pixels) for the source layers
    */
   hitbox?: {
     /**
@@ -135,20 +126,24 @@ export interface ShapeSourceProps extends BaseProps {
     height: number;
   };
 
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
 }
 
 export interface ShapeSourceRef {
   features(filter?: FilterExpression): Promise<GeoJSON.FeatureCollection>;
+
   getClusterExpansionZoom(feature: GeoJSON.Feature): Promise<number>;
+
   getClusterLeaves(
     feature: GeoJSON.Feature,
     limit: number,
     offset: number,
   ): Promise<GeoJSON.FeatureCollection>;
+
   getClusterChildren(
     feature: GeoJSON.Feature,
   ): Promise<GeoJSON.FeatureCollection>;
+
   setNativeProps: (props: NativeProps) => void;
   onPress: (event: NativeSyntheticEvent<{ payload: OnPressEvent }>) => void;
 
@@ -160,11 +155,11 @@ export interface ShapeSourceRef {
  * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
  * The shape may be a url or a GeoJSON object
  */
-const ShapeSource = memo(
+export const ShapeSource = memo(
   forwardRef<ShapeSourceRef, ShapeSourceProps>(
     (
       {
-        id: shapeId = MapLibreRN.StyleSource.DefaultSourceID,
+        id: shapeId = MLRNModule.StyleSource.DefaultSourceID,
         ...props
       }: ShapeSourceProps,
       ref,
@@ -252,18 +247,6 @@ const ShapeSource = memo(
       async function getClusterExpansionZoom(
         feature: GeoJSON.Feature,
       ): Promise<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.",
-          );
-          const res: { data: number } = await _runNativeCommand(
-            "getClusterExpansionZoomById",
-            _nativeRef.current,
-            [feature],
-          );
-          return res.data;
-        }
-
         const res: { data: number } = await _runNativeCommand(
           "getClusterExpansionZoom",
           _nativeRef.current,
@@ -277,24 +260,6 @@ const ShapeSource = memo(
         limit: number,
         offset: number,
       ): Promise<GeoJSON.FeatureCollection> {
-        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.",
-          );
-          const res: { data: string | GeoJSON.FeatureCollection } =
-            await _runNativeCommand(
-              "getClusterLeavesById",
-              _nativeRef.current,
-              [feature, limit, offset],
-            );
-
-          if (isAndroid()) {
-            return JSON.parse(res.data as string);
-          }
-
-          return res.data as GeoJSON.FeatureCollection;
-        }
-
         const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand("getClusterLeaves", _nativeRef.current, [
             JSON.stringify(feature),
@@ -312,24 +277,6 @@ const ShapeSource = memo(
       async function getClusterChildren(
         feature: GeoJSON.Feature,
       ): Promise<GeoJSON.FeatureCollection> {
-        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.",
-          );
-          const res: { data: string | GeoJSON.FeatureCollection } =
-            await _runNativeCommand(
-              "getClusterChildrenById",
-              _nativeRef.current,
-              [feature],
-            );
-
-          if (isAndroid()) {
-            return JSON.parse(res.data as string);
-          }
-
-          return res.data as GeoJSON.FeatureCollection;
-        }
-
         const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand("getClusterChildren", _nativeRef.current, [
             JSON.stringify(feature),
@@ -372,31 +319,13 @@ const ShapeSource = memo(
             payload: { features, coordinates, point },
           },
         } = event;
-        let newEvent = {
-          features,
-          coordinates,
-          point,
-        };
-        newEvent = copyPropertiesAsDeprecated(
-          event,
-          newEvent,
-          (key: string): void => {
-            console.warn(
-              `event.${key} is deprecated on ShapeSource#onPress, please use event.features`,
-            );
-          },
-          {
-            nativeEvent: (
-              origNativeEvent: NativeSyntheticEvent<{ payload: OnPressEvent }>,
-            ) => ({
-              ...origNativeEvent,
-              payload: features[0],
-            }),
-          },
-        );
 
         if (props.onPress) {
-          props.onPress(newEvent);
+          props.onPress({
+            features,
+            coordinates,
+            point,
+          });
         }
       }
 
@@ -432,5 +361,3 @@ const ShapeSource = memo(
 );
 
 const MLRNShapeSource = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default ShapeSource;

package/src/components/SymbolLayer.tsx

@@ -1,14 +1,14 @@
-import { Children, type ReactElement } from "react";
-import { View, NativeModules, requireNativeComponent } from "react-native";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type SymbolLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type SymbolLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNSymbolLayer";
 
@@ -16,26 +16,20 @@ export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: SymbolLayerStyleProps;
-
-  /**
-   * @deprecated passed children used to create an image with id of symbol in style and also set the iconImageName property accordingly.
-   * This is now deprecated, use Image component instead.
-   */
-  children?: ReactElement | ReactElement[];
+  style?: SymbolLayerStyle;
 }
 
-interface NativeProps extends Omit<SymbolLayerProps, "style">, NativeBaseProps {
-  snapshot: boolean;
-}
+interface NativeProps
+  extends Omit<SymbolLayerProps, "style">,
+    NativeBaseProps {}
 
 const MLRNSymbolLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
-const SymbolLayer: React.FC<SymbolLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const SymbolLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: SymbolLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -46,32 +40,9 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
     sourceID,
   });
 
-  const _shouldSnapshot = (): boolean => {
-    let isSnapshot = false;
-
-    if (Children.count(props.children) <= 0) {
-      return isSnapshot;
-    }
-
-    Children.forEach(props.children, (child) => {
-      if (child?.type === View) {
-        isSnapshot = true;
-      }
-    });
-
-    return isSnapshot;
-  };
-
   const updatedProps = {
     ...baseProps,
-    snapshot: _shouldSnapshot(),
   };
 
-  return (
-    <MLRNSymbolLayer ref={setNativeLayer} {...updatedProps}>
-      {props.children}
-    </MLRNSymbolLayer>
-  );
+  return <MLRNSymbolLayer ref={setNativeLayer} {...updatedProps} />;
 };
-
-export default SymbolLayer;

package/src/components/UserLocation.tsx

@@ -1,25 +1,26 @@
 import {
   forwardRef,
   memo,
-  type ReactElement,
+  type ReactNode,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from "react";
 
-import Annotation from "./Annotation";
-import CircleLayer from "./CircleLayer";
-import HeadingIndicator from "./HeadingIndicator";
-import NativeUserLocation from "./NativeUserLocation";
-import locationManager, {
+import { Annotation } from "./Annotation";
+import { CircleLayer } from "./CircleLayer";
+import { HeadingIndicator } from "./HeadingIndicator";
+import { NativeUserLocation } from "./NativeUserLocation";
+import {
   type Location,
-} from "../modules/location/locationManager";
-import { type CircleLayerStyleProps } from "../utils/MapLibreRNStyles";
+  LocationManager,
+} from "../modules/location/LocationManager";
+import { type CircleLayerStyle } from "../types/MapLibreRNStyles";
 
 const mapboxBlue = "rgba(51, 181, 229, 100)";
 
-const layerStyles: Record<string, CircleLayerStyleProps> = {
+const layerStyles: Record<string, CircleLayerStyle> = {
   pluse: {
     circleRadius: 15,
     circleColor: mapboxBlue,
@@ -41,7 +42,7 @@ const layerStyles: Record<string, CircleLayerStyleProps> = {
 export const normalIcon = (
   showsUserHeadingIndicator?: boolean,
   heading?: number,
-): ReactElement[] => [
+) => [
   <CircleLayer
     key="mapboxUserLocationPluseCircle"
     id="mapboxUserLocationPluseCircle"
@@ -114,7 +115,7 @@ interface UserLocationProps {
    *
    * NOTE: Forking maintainer does not understand the above comment.
    */
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
 }
 
 interface UserLocationState {
@@ -134,7 +135,7 @@ export interface UserLocationRef {
   _onLocationUpdate: (location: Location | null) => void;
 }
 
-const UserLocation = memo(
+export const UserLocation = memo(
   forwardRef<UserLocationRef, UserLocationProps>(
     (
       {
@@ -163,19 +164,19 @@ const UserLocation = memo(
         ref,
         (): UserLocationRef => ({
           /**
-           * Whether to start or stop listening to the locationManager
+           * Whether to start or stop listening to the LocationManager
            *
            * Notice, that listening will start automatically when
            * either `onUpdate` or `visible` are set
            *
            * @async
-           * @param {Object} running - Object with key `running` and `boolean` value
+           * @param {{running: boolean}} running - Object with key `running` and `boolean` value
            * @return {Promise<void>}
            */
           setLocationManager,
           /**
            *
-           * If locationManager should be running
+           * If LocationManager should be running
            *
            * @return {boolean}
            */
@@ -194,7 +195,7 @@ const UserLocation = memo(
             return;
           }
 
-          locationManager.setMinDisplacement(minDisplacement ?? 0);
+          LocationManager.setMinDisplacement(minDisplacement ?? 0);
         });
 
         return (): void => {
@@ -205,7 +206,7 @@ const UserLocation = memo(
       }, []);
 
       useEffect(() => {
-        locationManager.setMinDisplacement(minDisplacement ?? 0);
+        LocationManager.setMinDisplacement(minDisplacement ?? 0);
       }, [minDisplacement]);
 
       useEffect(() => {
@@ -227,11 +228,11 @@ const UserLocation = memo(
           locationManagerRunning.current = running;
 
           if (running) {
-            locationManager.addListener(_onLocationUpdate);
-            const location = await locationManager.getLastKnownLocation();
+            LocationManager.addListener(_onLocationUpdate);
+            const location = await LocationManager.getLastKnownLocation();
             _onLocationUpdate(location);
           } else {
-            locationManager.removeListener(_onLocationUpdate);
+            LocationManager.removeListener(_onLocationUpdate);
           }
         }
       }
@@ -303,5 +304,3 @@ const UserLocation = memo(
     },
   ),
 );
-
-export default UserLocation;

package/src/components/VectorSource.tsx

@@ -1,21 +1,20 @@
 import { featureCollection } from "@turf/helpers";
-import { forwardRef, memo, useImperativeHandle } from "react";
+import { forwardRef, memo, type ReactNode, useImperativeHandle } from "react";
 import {
   NativeModules,
   type NativeSyntheticEvent,
   requireNativeComponent,
 } from "react-native";
 
-import useAbstractSource from "../hooks/useAbstractSource";
-import useNativeBridge from "../hooks/useNativeBridge";
+import { useAbstractSource } from "../hooks/useAbstractSource";
+import { useNativeBridge } from "../hooks/useNativeBridge";
 import { type BaseProps } from "../types/BaseProps";
+import { type FilterExpression } from "../types/MapLibreRNStyles";
 import { type OnPressEvent } from "../types/OnPressEvent";
 import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
-import { type FilterExpression } from "../utils/MapLibreRNStyles";
-import { copyPropertiesAsDeprecated } from "../utils/deprecation";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNVectorSource";
 
@@ -57,11 +56,6 @@ interface VectorSourceProps extends BaseProps {
   /**
    * Source press listener, gets called when a user presses one of the children layers only
    * if that layer has a higher z-index than another source layers
-   *
-   * @param {Object} event
-   * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
-   * @param {Object} event.coordinates - the coordinates of the click
-   * @param {Object} event.point - the point of the click
    */
   onPress?: (event: OnPressEvent) => void;
   /**
@@ -78,7 +72,7 @@ interface VectorSourceProps extends BaseProps {
     height: number;
   };
 
-  children?: React.ReactElement | React.ReactElement[];
+  children?: ReactNode;
 }
 
 type NativeProps = VectorSourceProps;
@@ -90,11 +84,11 @@ const MLRNVectorSource =
  * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
  * The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.
  */
-const VectorSource = memo(
+export const VectorSource = memo(
   forwardRef(
     (
       {
-        id = MapLibreRN.StyleSource.DefaultSourceID,
+        id = MLRNModule.StyleSource.DefaultSourceID,
         ...props
       }: VectorSourceProps,
       ref,
@@ -160,33 +154,18 @@ const VectorSource = memo(
         if (!onPress) {
           return;
         }
+
         const {
           nativeEvent: {
             payload: { features, coordinates, point },
           },
         } = event;
-        let newEvent = {
+
+        onPress({
           features,
           coordinates,
           point,
-        };
-        newEvent = copyPropertiesAsDeprecated(
-          event,
-          newEvent,
-          (key: string) => {
-            console.warn(
-              `event.${key} is deprecated on VectorSource#onPress, please use event.features`,
-            );
-          },
-          {
-            nativeEvent: (origNativeEvent: OnPressEvent) => ({
-              ...origNativeEvent,
-              payload: features[0],
-            }),
-          },
-        );
-
-        onPress(newEvent);
+        });
       };
 
       const allProps = {
@@ -214,5 +193,3 @@ const VectorSource = memo(
     },
   ),
 );
-
-export default VectorSource;

package/src/hooks/useAbstractLayer.ts

@@ -1,13 +1,13 @@
-import { useMemo, useRef } from "react";
+import { type Component, useMemo, useRef } from "react";
 import { processColor, type NativeMethods } from "react-native";
 
 import { type BaseProps } from "../types/BaseProps";
 import {
-  type AllLayerStyleProps,
+  type AllLayerStyle,
   type ExpressionField,
   type ExpressionName,
   type FilterExpression,
-} from "../utils/MapLibreRNStyles";
+} from "../types/MapLibreRNStyles";
 import { type StyleValue, transformStyle } from "../utils/StyleValue";
 import { getFilter } from "../utils/filterUtils";
 
@@ -53,14 +53,14 @@ export interface BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: AllLayerStyleProps;
+  style?: AllLayerStyle;
 }
 
 export interface NativeBaseProps {
   reactStyle?: { [key: string]: StyleValue };
 }
 
-export default function useAbstractLayer<
+export function useAbstractLayer<
   Props extends BaseProps,
   NativeProps extends NativeBaseProps,
 >(
@@ -68,13 +68,13 @@ export default function useAbstractLayer<
 ): {
   baseProps: Props & BaseLayerProps;
   setNativeLayer: (
-    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+    instance: (Component<NativeProps> & Readonly<NativeMethods>) | null,
   ) => void;
   getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
   setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
 } {
   const nativeLayer = useRef<
-    (React.Component<NativeProps> & Readonly<NativeMethods>) | null
+    (Component<NativeProps> & Readonly<NativeMethods>) | null
   >(null);
 
   const baseProps = useMemo(() => {
@@ -94,7 +94,7 @@ export default function useAbstractLayer<
   }, [props]);
 
   const setNativeLayer = (
-    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+    instance: (Component<NativeProps> & Readonly<NativeMethods>) | null,
   ): void => {
     nativeLayer.current = instance;
   };

package/src/hooks/useAbstractSource.ts

@@ -1,21 +1,21 @@
-import { useRef } from "react";
+import { Component, useRef } from "react";
 import { type NativeMethods } from "react-native";
 
-export default function useAbstractSource<NativePropsType extends object>(): {
+export function useAbstractSource<NativePropsType extends object>(): {
   _nativeRef:
-    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | (Component<NativePropsType> & Readonly<NativeMethods>)
     | undefined;
   setNativeRef: (
-    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+    instance: Component<NativePropsType> & Readonly<NativeMethods>,
   ) => void;
   setNativeProps: (nativeProps: NativePropsType) => void;
 } {
   const _nativeRef = useRef<
-    (React.Component<NativePropsType> & Readonly<NativeMethods>) | undefined
+    (Component<NativePropsType> & Readonly<NativeMethods>) | undefined
   >(undefined);
 
   const setNativeRef = (
-    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+    instance: Component<NativePropsType> & Readonly<NativeMethods>,
   ): void => {
     _nativeRef.current = instance;
   };

package/src/hooks/useNativeBridge.ts

@@ -1,4 +1,9 @@
-import { Component, type SyntheticEvent, useRef } from "react";
+import {
+  Component,
+  type MutableRefObject,
+  type SyntheticEvent,
+  useRef,
+} from "react";
 
 import { runNativeCommand, isAndroid, type NativeArg } from "../utils";
 
@@ -12,8 +17,8 @@ let callbackIncrement = 0;
 type UseNativeBridge = {
   _nativeModuleName: string;
   _onAndroidCallback: (e: SyntheticEvent<Element, RNMLEvent>) => void;
-  _callbackMap: React.MutableRefObject<Map<string, any>>;
-  _preRefMapMethodQueue: React.MutableRefObject<any[]>;
+  _callbackMap: MutableRefObject<Map<string, any>>;
+  _preRefMapMethodQueue: MutableRefObject<any[]>;
   _addAddAndroidCallback: <ReturnType>(
     id: string,
     resolve: (value: ReturnType) => void,
@@ -30,7 +35,7 @@ type UseNativeBridge = {
   ) => Promise<ReturnType>;
 };
 
-const useNativeBridge: (moduleName: string) => UseNativeBridge = (
+export const useNativeBridge: (moduleName: string) => UseNativeBridge = (
   _nativeModuleName: string,
 ) => {
   const _callbackMap = useRef<Map<string, any>>(new Map());
@@ -121,5 +126,3 @@ const useNativeBridge: (moduleName: string) => UseNativeBridge = (
     _runNativeCommand,
   };
 };
-
-export default useNativeBridge;

package/src/hooks/useNativeRef.ts

@@ -1,4 +1,4 @@
-import { Component, useRef } from "react";
+import { Component, type RefObject, useRef } from "react";
 import { type NativeMethods } from "react-native";
 
 export type NativeRef<NativeProps> = Component<NativeProps> &
@@ -7,7 +7,7 @@ export type NativeRef<NativeProps> = Component<NativeProps> &
 /**
  * Separate  module which allows to be mocked in tests.
  */
-export function useNativeRef<NativeProps = object>(): React.RefObject<
+export function useNativeRef<NativeProps = object>(): RefObject<
   NativeRef<NativeProps>
 > {
   return useRef<NativeRef<NativeProps>>(null);

package/src/hooks/useOnce.ts

@@ -1,6 +1,8 @@
 import { useRef } from "react";
 
-const useOnce: (callback: () => void) => void = (callback: () => void) => {
+export const useOnce: (callback: () => void) => void = (
+  callback: () => void,
+) => {
   const once = useRef(false);
 
   if (!once.current) {
@@ -8,5 +10,3 @@ const useOnce: (callback: () => void) => void = (callback: () => void) => {
     callback();
   }
 };
-
-export default useOnce;