@maplibre/maplibre-react-native 11.0.0-beta.3 → 11.0.0-beta.31

package/src/components/user-location/UserLocation.tsx

@@ -1,13 +1,16 @@
 import { memo, type ReactNode, useMemo } from "react";
 
 import { UserLocationPuck } from "./UserLocationPuck";
+import headingIcon from "../../assets/heading.png";
 import { useCurrentPosition } from "../../hooks/useCurrentPosition";
 import type { LngLat } from "../../types/LngLat";
 import { LayerAnnotation } from "../annotations/LayerAnnotation";
+import { Images } from "../images/Images";
 
 export interface UserLocationProps {
   /**
-   * Children to render inside the UserLocation Annotation, e.g. CircleLayer, SymbolLayer
+   * Children to render inside the UserLocation Annotation, e.g. CircleLayer,
+   * SymbolLayer
    */
   children?: ReactNode;
 
@@ -22,7 +25,8 @@ export interface UserLocationProps {
   accuracy?: boolean;
 
   /**
-   * Render an arrow which indicates direction the device is pointing relative to north
+   * Render an arrow which indicates direction the device is pointing relative to
+   * north
    */
   heading?: boolean;
 
@@ -59,26 +63,36 @@ export const UserLocation = memo(
     }
 
     return (
-      <LayerAnnotation
-        animated={animated}
-        id="mlrn-user-location"
-        testID="mlrn-user-location"
-        onPress={onPress}
-        lngLat={lngLat}
-      >
-        {children || (
-          <UserLocationPuck
-            testID="mlrn-user-location-puck"
-            source="mlrn-user-location"
-            accuracy={accuracy ? currentPosition.coords.accuracy : undefined}
-            heading={
-              heading
-                ? (currentPosition.coords.heading ?? undefined)
-                : undefined
-            }
+      <>
+        {heading && (
+          <Images
+            images={{
+              "mlrn-user-location-puck-heading": headingIcon,
+            }}
           />
         )}
-      </LayerAnnotation>
+
+        <LayerAnnotation
+          animated={animated}
+          id="mlrn-user-location"
+          testID="mlrn-user-location"
+          onPress={onPress}
+          lngLat={lngLat}
+        >
+          {children || (
+            <UserLocationPuck
+              testID="mlrn-user-location-puck"
+              source="mlrn-user-location"
+              accuracy={accuracy ? currentPosition.coords.accuracy : undefined}
+              heading={
+                heading
+                  ? (currentPosition.coords.heading ?? undefined)
+                  : undefined
+              }
+            />
+          )}
+        </LayerAnnotation>
+      </>
     );
   },
 );

package/src/components/user-location/UserLocationPuck.tsx

@@ -1,30 +1,30 @@
+import type { CircleLayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 import { memo } from "react";
 
 import { UserLocationPuckHeading } from "./UserLocationPuckHeading";
 import type { BaseProps } from "../../types/BaseProps";
-import type { CircleLayerStyle } from "../../types/MapLibreRNStyles";
 import { Layer } from "../layer/Layer";
 
 const blue = "#33B5E5";
 
-const layerStyles = {
+const CIRCLE_LAYERS_PAINT = {
   accuracy: {
-    circleColor: blue,
-    circleOpacity: 0.2,
-    circlePitchAlignment: "map",
-    circleRadiusTransition: { duration: 300, delay: 0 },
+    "circle-color": blue,
+    "circle-opacity": 0.2,
+    "circle-pitch-alignment": "map",
+    "circle-radius-transition": { duration: 300, delay: 0 },
   },
   white: {
-    circleRadius: 9,
-    circleColor: "#fff",
-    circlePitchAlignment: "map",
+    "circle-radius": 9,
+    "circle-color": "#fff",
+    "circle-pitch-alignment": "map",
   },
   blue: {
-    circleRadius: 6,
-    circleColor: blue,
-    circlePitchAlignment: "map",
+    "circle-radius": 6,
+    "circle-color": blue,
+    "circle-pitch-alignment": "map",
   },
-} satisfies Record<"accuracy" | "white" | "blue", CircleLayerStyle>;
+} as const satisfies Record<string, CircleLayerSpecification["paint"]>;
 
 interface UserLocationPuckProps extends BaseProps {
   source: string;
@@ -43,16 +43,16 @@ export const UserLocationPuck = memo(
             id="mlrn-user-location-puck-accuracy"
             testID="mlrn-user-location-puck-accuracy"
             source={source}
-            style={{
-              ...layerStyles.accuracy,
-              circleRadius: [
+            paint={{
+              ...CIRCLE_LAYERS_PAINT.accuracy,
+              "circle-radius": [
                 "interpolate",
                 ["exponential", 2],
                 ["zoom"],
                 0,
-                layerStyles.white.circleRadius,
+                CIRCLE_LAYERS_PAINT.white["circle-radius"],
                 22,
-                layerStyles.white.circleRadius + accuracy * 100,
+                CIRCLE_LAYERS_PAINT.white["circle-radius"] + accuracy * 100,
               ],
             }}
           />
@@ -62,14 +62,14 @@ export const UserLocationPuck = memo(
           id="mlrn-user-location-puck-white"
           testID="mlrn-user-location-puck-white"
           source={source}
-          style={layerStyles.white}
+          paint={CIRCLE_LAYERS_PAINT.white}
         />
         <Layer
           type="circle"
           id="mlrn-user-location-puck-blue"
           testID="mlrn-user-location-puck-blue"
           source={source}
-          style={layerStyles.blue}
+          paint={CIRCLE_LAYERS_PAINT.blue}
         />
         {typeof heading === "number" && (
           <UserLocationPuckHeading

package/src/components/user-location/UserLocationPuckHeading.tsx

@@ -1,15 +1,14 @@
+import type { SymbolLayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 import { memo } from "react";
 
-import headingIcon from "../../assets/heading.png";
 import { type BaseProps } from "../../types/BaseProps";
-import type { SymbolLayerStyle } from "../../types/MapLibreRNStyles";
 import { Layer } from "../layer/Layer";
 
-const layerStyle: SymbolLayerStyle = {
-  iconImage: headingIcon,
-  iconAllowOverlap: true,
-  iconPitchAlignment: "map",
-  iconRotationAlignment: "map",
+const SYMBOL_LAYER_LAYOUT: SymbolLayerSpecification["layout"] = {
+  "icon-image": "mlrn-user-location-puck-heading",
+  "icon-allow-overlap": true,
+  "icon-pitch-alignment": "map",
+  "icon-rotation-alignment": "map",
 };
 
 interface UserLocationPuckHeadingProps extends BaseProps {
@@ -26,9 +25,9 @@ export const UserLocationPuckHeading = memo(
       testID="mlrn-user-location-puck-heading"
       source={source}
       beforeId={beforeId}
-      style={{
-        ...layerStyle,
-        iconRotate: heading,
+      layout={{
+        ...SYMBOL_LAYER_LAYOUT,
+        "icon-rotate": heading,
       }}
     />
   ),

package/src/hooks/useCurrentPosition.ts

@@ -9,14 +9,14 @@ interface UseCurrentPositionOptions {
   /**
    * Enable or disable position updates
    *
-   * @default true
+   * @defaultValue true
    */
   enabled?: boolean;
 
   /**
    * Minimum displacement in meters to trigger position update
    *
-   * @default 0
+   * @defaultValue 0
    */
   minDisplacement?: number;
 }

package/src/index.ts

@@ -24,10 +24,11 @@ export {
 } from "./components/map/Map";
 
 export {
-  ViewAnnotation,
-  type ViewAnnotationProps,
-  type ViewAnnotationRef,
   type ViewAnnotationEvent,
+  type NativeViewAnnotationRef,
+  type ViewAnnotationRef,
+  type ViewAnnotationProps,
+  ViewAnnotation,
 } from "./components/annotations/view-annotation/ViewAnnotation";
 
 export {
@@ -36,8 +37,8 @@ export {
 } from "./components/annotations/LayerAnnotation";
 
 export {
-  Callout,
   type CalloutProps,
+  Callout,
 } from "./components/annotations/callout/Callout";
 
 export { UserLocation } from "./components/user-location/UserLocation";
@@ -121,8 +122,11 @@ export {
 } from "./components/images/Images";
 
 export {
-  Marker,
+  type NativeMarkerRef,
+  type MarkerEvent,
   type MarkerProps,
+  type MarkerRef,
+  Marker,
 } from "./components/annotations/marker/Marker";
 
 export {
@@ -155,6 +159,14 @@ export {
   type StaticMapCreateOptions,
 } from "./modules/static-map/StaticMapManager";
 
+export {
+  TransformRequestManager,
+  type TransformOptions,
+  type UrlTransformOptions,
+  type UrlSearchParamOptions,
+  type HeaderOptions,
+} from "./modules/transform-request/TransformRequestManager";
+
 export type { Anchor } from "./types/Anchor";
 export type { LngLat } from "./types/LngLat";
 export type { LngLatBounds } from "./types/LngLatBounds";

package/src/modules/log/LogManager.ts

@@ -16,9 +16,10 @@ interface LogEvent {
 /**
  * Handler for `onLog` events
  *
- * Called before logging a message, return false to proceed with default logging.
+ * Called before logging a message, return false to proceed with default
+ * logging.
  *
- * @param event
+ * @param event -
  */
 type LogHandler = (event: LogEvent) => boolean;
 
@@ -35,7 +36,7 @@ class LogManager {
   /**
    * Override logging behavior
    *
-   * @param logHandler
+   * @param logHandler -
    */
   onLog(logHandler: LogHandler): void {
     this.logHandler = logHandler;
@@ -44,7 +45,7 @@ class LogManager {
   /**
    * Set the minimum log level for a message to be logged
    *
-   * @param level Minimum log level
+   * @param level - Minimum log level
    */
   setLogLevel(level: LogLevel): void {
     this.logLevel = level;

package/src/modules/network/NativeNetworkModule.ts

@@ -2,10 +2,6 @@ import type { TurboModule } from "react-native";
 import { TurboModuleRegistry } from "react-native";
 
 export interface Spec extends TurboModule {
-  addRequestHeader(name: string, value: string, match: string | null): void;
-
-  removeRequestHeader(name: string): void;
-
   setConnected(connected: boolean): void;
 }
 

package/src/modules/network/NetworkManager.ts

@@ -1,70 +1,24 @@
 import NativeNetworkModule from "./NativeNetworkModule";
 
 /**
- * NetworkManager provides methods for managing HTTP requests made by MapLibre.
- * This includes adding custom headers to tile requests and controlling network connectivity.
+ * NetworkManager provides methods for managing and controlling network
+ * connectivity.
  */
 class NetworkManager {
   /**
-   * Adds a custom HTTP header that will be sent with all map tile requests.
-   * This is useful for adding authentication tokens or other custom headers
-   * required by your tile server.
+   * Android only: Sets the connectivity state of the map. When set to false, the
+   * map will not make any network requests and will only use cached tiles. This
+   * is useful for implementing offline mode or reducing data usage.
    *
-   * @example
-   * // Add header to all requests
-   * NetworkManager.addRequestHeader("Authorization", "Bearer token123");
-   *
-   * // Add header only to requests matching a regex pattern (string)
-   * NetworkManager.addRequestHeader("X-API-Key", "key123", "https:\\/\\/api\\.example\\.com\\/tiles\\/");
-   *
-   * // Add header only to requests matching a regex pattern (RegExp)
-   * NetworkManager.addRequestHeader("X-API-Key", "key123", /https:\/\/api\.example\.com\/tiles\//);
-   *
-   * @param name The name of the header (e.g., "Authorization")
-   * @param value The value of the header (e.g., "Bearer token123")
-   * @param match Optional regex pattern to match against network URLs. If provided, the header will only be added to requests whose URLs match this pattern. Can be a RegExp object or a regex string.
-   */
-  static addRequestHeader(
-    name: string,
-    value: string,
-    match?: string | RegExp,
-  ): void {
-    NativeNetworkModule.addRequestHeader(
-      name,
-      value,
-      (match instanceof RegExp ? match.source : match) || null,
-    );
-  }
-
-  /**
-   * Removes a previously added custom HTTP header.
-   *
-   * @example
-   * ```ts
-   * NetworkManager.removeRequestHeader("Authorization");
-   * ```
-   *
-   * @param headerName The name of the header to remove
-   */
-  static removeRequestHeader(headerName: string): void {
-    NativeNetworkModule.removeRequestHeader(headerName);
-  }
-
-  /**
-   * Android only: Sets the connectivity state of the map. When set to false, the map will
-   * not make any network requests and will only use cached tiles. This is
-   * useful for implementing offline mode or reducing data usage.
+   * @param connected - Whether the map should be connected to the network
    *
    * @example
    * ```ts
    * // Enable offline mode
    * NetworkManager.setConnected(false);
-   *
    * // Re-enable network requests
    * NetworkManager.setConnected(true);
    * ```
-   *
-   * @param connected Whether the map should be connected to the network
    */
   static setConnected(connected: boolean): void {
     NativeNetworkModule.setConnected(connected);