@maplibre/maplibre-react-native 10.0.0-beta.1 → 10.0.0-beta.11

package/src/components/MapView.tsx

@@ -26,9 +26,9 @@ import useNativeBridge from "../hooks/useNativeBridge";
 import useOnce from "../hooks/useOnce";
 import { type Location } from "../modules/location/locationManager";
 import { type BaseProps } from "../types/BaseProps";
+import { type FilterExpression } from "../types/MapLibreRNStyles";
 import { isFunction, isAndroid } from "../utils";
 import Logger from "../utils/Logger";
-import { type FilterExpression } from "../utils/MapLibreRNStyles";
 import { getFilter } from "../utils/filterUtils";
 
 const MapLibreRN = NativeModules.MLRNModule;
@@ -46,8 +46,6 @@ const styles = StyleSheet.create({
   matchParent: { flex: 1 },
 });
 
-const defaultStyleURL = MapLibreRN.StyleURL.Street;
-
 export interface RegionPayload {
   zoomLevel: number;
   heading: number;
@@ -69,13 +67,9 @@ interface MapViewProps extends BaseProps {
    */
   style?: ViewProps["style"];
   /**
-   * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default`
-   */
-  styleURL?: string;
-  /**
-   * StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec
+   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default`
    */
-  styleJSON?: string;
+  mapStyle?: string | object;
   /**
    * iOS: The preferred frame rate at which the map view is rendered.
    * The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,
@@ -165,7 +159,7 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region is about to change.
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionWillChange?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -173,7 +167,7 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region is changing.
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionIsChanging?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -181,7 +175,7 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region finished changing
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionDidChange?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -250,6 +244,7 @@ type CallableProps = {
 }[keyof MapViewProps];
 
 interface NativeProps extends Omit<MapViewProps, "onPress" | "onLongPress"> {
+  mapStyle?: string;
   onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
   onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
 }
@@ -268,7 +263,6 @@ export interface MapViewRef {
     filter: FilterExpression | undefined,
     layerIDs: string[],
   ) => Promise<GeoJSON.FeatureCollection>;
-  setCamera: () => void;
   takeSnap: (writeToDisk?: boolean) => Promise<string>;
   getZoom: () => Promise<number>;
   getCenter: () => Promise<GeoJSON.Position>;
@@ -359,10 +353,6 @@ const MapView = memo(
            * @return {GeoJSON.FeatureCollection}
            */
           queryRenderedFeaturesInRect,
-          /**
-           * Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
-           */
-          setCamera,
           /**
            * Takes snapshot of map with current tiles and returns a URI to the image
            * @param  {Boolean} writeToDisk If true will create a temp file, otherwise it is in base64
@@ -571,12 +561,6 @@ const MapView = memo(
         return res.data as GeoJSON.FeatureCollection;
       };
 
-      const setCamera = (): void => {
-        console.warn(
-          "MapView.setCamera is deprecated - please use Camera#setCamera",
-        );
-      };
-
       const takeSnap = async (writeToDisk = false): Promise<string> => {
         const res: { uri: string } = await _runNativeCommand(
           "takeSnap",
@@ -782,27 +766,20 @@ const MapView = memo(
         }
       };
 
-      const _setStyleURL = (props: MapViewProps): void => {
-        // user set a styleURL, no need to alter props
-        if (props.styleURL) {
-          return;
-        }
-
-        // user set styleJSON pass it to styleURL
-        if (props.styleJSON && !props.styleURL) {
-          props.styleURL = props.styleJSON;
-        }
-
-        // user neither set styleJSON nor styleURL
-        // set defaultStyleUrl
-        if (!props.styleJSON || !props.styleURL) {
-          props.styleURL = defaultStyleURL;
+      const nativeProps = useMemo(() => {
+        const { mapStyle, ...otherProps } = props;
+
+        let nativeMapStyle = undefined;
+        if (mapStyle) {
+          if (typeof mapStyle === "string") {
+            nativeMapStyle = mapStyle;
+          } else if (typeof mapStyle === "object") {
+            nativeMapStyle = JSON.stringify(mapStyle);
+          }
         }
-      };
 
-      const nativeProps = useMemo(() => {
         return {
-          ...props,
+          ...otherProps,
           localizeLabels,
           scrollEnabled,
           pitchEnabled,
@@ -812,10 +789,12 @@ const MapView = memo(
           surfaceView,
           regionWillChangeDebounceTime,
           regionDidChangeDebounceTime,
+          mapStyle: nativeMapStyle,
           contentInset: contentInsetValue,
           style: styles.matchParent,
         };
       }, [
+        props,
         localizeLabels,
         scrollEnabled,
         pitchEnabled,
@@ -825,12 +804,9 @@ const MapView = memo(
         surfaceView,
         regionWillChangeDebounceTime,
         regionDidChangeDebounceTime,
-        props,
         contentInsetValue,
       ]);
 
-      _setStyleURL(nativeProps);
-
       const callbacks = {
         ref: (ref: MLRNMapViewRefType): void => _setNativeRef(ref),
         onPress: _onPress,

package/src/components/RasterLayer.tsx

@@ -6,7 +6,7 @@ import useAbstractLayer, {
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type RasterLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type RasterLayerStyle } from "../types/MapLibreRNStyles";
 
 const MapLibreRN = NativeModules.MLRNModule;
 
@@ -16,7 +16,7 @@ export interface RasterLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: RasterLayerStyleProps;
+  style?: RasterLayerStyle;
 }
 
 interface NativeProps

package/src/components/ShapeSource.tsx

@@ -15,6 +15,10 @@ import {
 
 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;
 export const NATIVE_MODULE_NAME = "MLRNShapeSource";
-export const SHAPE_SOURCE_NATIVE_ASSETS_KEY = "assets";
 
 interface NativeProps {
   shape?: string;
@@ -252,18 +250,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 +263,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 +280,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 +322,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,
+          });
         }
       }
 

package/src/components/SymbolLayer.tsx

@@ -1,12 +1,11 @@
-import { Children, type ReactElement } from "react";
-import { View, NativeModules, requireNativeComponent } from "react-native";
+import { NativeModules, requireNativeComponent } from "react-native";
 
 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;
 
@@ -16,18 +15,12 @@ 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);
 
@@ -46,32 +39,11 @@ 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

@@ -15,11 +15,11 @@ import NativeUserLocation from "./NativeUserLocation";
 import locationManager, {
   type Location,
 } from "../modules/location/locationManager";
-import { type CircleLayerStyleProps } from "../utils/MapLibreRNStyles";
+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,

package/src/components/VectorSource.tsx

@@ -9,10 +9,9 @@ import {
 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;
@@ -160,33 +159,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 = {

package/src/hooks/useAbstractLayer.ts

@@ -3,11 +3,11 @@ 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,7 +53,7 @@ export interface BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: AllLayerStyleProps;
+  style?: AllLayerStyle;
 }
 
 export interface NativeBaseProps {

package/src/modules/offline/OfflinePack.ts

@@ -10,8 +10,8 @@ export type OfflinePackStatus = {
   percentage: number;
   completedResourceCount: number;
   completedResourceSize: number;
-  completedTileSize: number;
   completedTileCount: number;
+  completedTileSize: number;
   requiredResourceCount: number;
 };
 

package/src/modules/offline/offlineManager.ts

@@ -7,7 +7,7 @@ import {
 import OfflineCreatePackOptions, {
   type OfflineCreatePackInputOptions,
 } from "./OfflineCreatePackOptions";
-import OfflinePack from "./OfflinePack";
+import OfflinePack, { type OfflinePackStatus } from "./OfflinePack";
 import { isUndefined, isFunction, isAndroid } from "../../utils";
 
 const MapLibreRN = NativeModules.MLRNModule;
@@ -16,17 +16,6 @@ export const OfflineModuleEventEmitter = new NativeEventEmitter(
   MLRNOfflineModule,
 );
 
-export type OfflineProgressStatus = {
-  name: string;
-  state: number;
-  percentage: number;
-  completedResourceSize: number;
-  completedTileCount: number;
-  completedResourceCount: number;
-  requiredResourceCount: number;
-  completedTileSize: number;
-};
-
 export type OfflinePackError = {
   name: string;
   message: string;
@@ -37,13 +26,10 @@ type ErrorEvent = {
 };
 
 type ProgressEvent = {
-  payload: OfflineProgressStatus;
+  payload: OfflinePackStatus;
 };
 
-type ProgressListener = (
-  pack: OfflinePack,
-  status: OfflineProgressStatus,
-) => void;
+type ProgressListener = (pack: OfflinePack, status: OfflinePackStatus) => void;
 type ErrorListener = (pack: OfflinePack, err: OfflinePackError) => void;
 
 /**
@@ -83,7 +69,7 @@ class OfflineManager {
    *
    * await MapLibreGL.offlineManager.createPack({
    *   name: 'offlinePack',
-   *   styleURL: 'mapbox://...',
+   *   styleURL: 'https://demotiles.maplibre.org/tiles/tiles.json',
    *   minZoom: 14,
    *   maxZoom: 20,
    *   bounds: [[neLng, neLat], [swLng, swLat]]