@maplibre/maplibre-react-native 11.0.0-beta.2 → 11.0.0-beta.20

package/src/components/annotations/view-annotation/ViewAnnotation.tsx

@@ -2,16 +2,16 @@ import {
   Children,
   Component,
   type ComponentProps,
-  forwardRef,
   isValidElement,
   type ReactElement,
+  type Ref,
   useImperativeHandle,
   useRef,
 } from "react";
 import {
-  type NativeMethods,
   type NativeSyntheticEvent,
   Platform,
+  type ReactNativeElement,
   StyleSheet,
   View,
   type ViewProps,
@@ -35,6 +35,11 @@ const styles = StyleSheet.create({
   },
 });
 
+export type NativeViewAnnotationRef = Component<
+  ComponentProps<typeof PointAnnotationNativeComponent>
+> &
+  ReactNativeElement;
+
 export type ViewAnnotationEvent = PressEvent & {
   id: string;
 };
@@ -62,7 +67,9 @@ export interface ViewAnnotationProps {
   selected?: boolean;
 
   /**
-   * Enable or disable dragging. Defaults to false.
+   * Enable or disable dragging.
+   *
+   * @default false
    */
   draggable?: boolean;
 
@@ -74,7 +81,8 @@ export interface ViewAnnotationProps {
   /**
    * Specifies the anchor being set on a particular point of the annotation.
    * The anchor indicates which part of the marker should be placed closest to the coordinate.
-   * Defaults to "center".
+   *
+   * @default "center"
    *
    * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PositionAnchor/
    */
@@ -84,19 +92,26 @@ export interface ViewAnnotationProps {
    * The offset in pixels to apply relative to the anchor.
    * Negative values indicate left and up.
    *
+   * @default [0, 0]
+   *
    * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/#offset
    */
   offset?: PixelPoint;
 
+  /**
+   * This callback is fired when the annotation is pressed.
+   */
+  onPress?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+
   /**
    * This callback is fired once this annotation is selected.
    */
-  onSelected?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+  onSelect?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
 
   /**
    * This callback is fired once this annotation is deselected.
    */
-  onDeselected?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+  onDeselect?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
 
   /**
    * This callback is fired once this annotation has started being dragged.
@@ -113,12 +128,17 @@ export interface ViewAnnotationProps {
    */
   onDrag?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
 
+  style?: ViewProps["style"];
+
   /**
    * Expects one child, and an optional callout can be added as well
    */
   children: ReactElement | [ReactElement, ReactElement];
 
-  style?: ViewProps["style"];
+  /**
+   * Ref to access ViewAnnotation methods.
+   */
+  ref?: Ref<ViewAnnotationRef>;
 }
 
 export interface ViewAnnotationRef {
@@ -139,81 +159,62 @@ export interface ViewAnnotationRef {
  * If you need interactive views please use Marker,
  * as with ViewAnnotation on Android child views are rendered onto a bitmap for better performance.
  */
-export const ViewAnnotation = forwardRef<
-  ViewAnnotationRef,
-  ViewAnnotationProps
->(
-  (
-    {
-      id,
-      anchor = "center",
-      draggable = false,
-      offset,
-      ...props
-    }: ViewAnnotationProps,
-    ref,
-  ) => {
-    const frozenId = useFrozenId(id);
-    const nativeAnchor = anchorToNative(anchor);
-    const nativeOffset = offset ? { x: offset[0], y: offset[1] } : undefined;
-    const nativeRef = useRef<
-      Component<ComponentProps<typeof PointAnnotationNativeComponent>> &
-        Readonly<NativeMethods>
-    >(null);
-
-    useImperativeHandle(
-      ref,
-      (): ViewAnnotationRef => ({
-        refresh,
-      }),
-    );
-
-    function refresh(): void {
+export const ViewAnnotation = ({
+  id,
+  anchor = "center",
+  draggable = false,
+  offset,
+  ref,
+  ...props
+}: ViewAnnotationProps) => {
+  const frozenId = useFrozenId(id);
+  const nativeAnchor = anchorToNative(anchor);
+  const nativeOffset = offset ? { x: offset[0], y: offset[1] } : undefined;
+  const nativeRef = useRef<NativeViewAnnotationRef>(null);
+
+  useImperativeHandle(ref, () => ({
+    refresh: () => {
       if (Platform.OS === "android" && nativeRef.current) {
         Commands.refresh(nativeRef.current);
       }
-    }
+    },
+  }));
 
-    // On Android, wrap children in a non-collapsable View to prevent Fabric
-    // from flattening the view hierarchy. Without this, Fabric may flatten
-    // intermediate Views, causing their backgrounds to disappear.
-    // We need to keep Callout separate so native code can identify it.
-    const wrappedChildren = (() => {
-      if (Platform.OS !== "android") {
-        return props.children;
-      }
+  const wrappedChildren = (() => {
+    if (Platform.OS !== "android") {
+      return props.children;
+    }
 
-      // Separate Callout from other children so native can identify it
-      const childArray = Children.toArray(props.children);
-      const callout = childArray.find(
-        (child) => isValidElement(child) && child.type === Callout,
-      );
-      const otherChildren = childArray.filter(
-        (child) => !isValidElement(child) || child.type !== Callout,
-      );
-
-      return (
-        <>
-          <View collapsable={false} style={{ overflow: "visible" }}>
-            {otherChildren}
-          </View>
-          {callout}
-        </>
-      );
-    })();
+    // Separate Callout from other children so native can identify it
+    const childArray = Children.toArray(props.children);
+    const callout = childArray.find(
+      (child) => isValidElement(child) && child.type === Callout,
+    );
+    const otherChildren = childArray.filter(
+      (child) => !isValidElement(child) || child.type !== Callout,
+    );
 
     return (
-      <PointAnnotationNativeComponent
-        ref={nativeRef}
-        {...props}
-        id={frozenId}
-        anchor={nativeAnchor}
-        offset={nativeOffset}
-        draggable={draggable}
-        style={[props.style, styles.container]}
-      >
-        {wrappedChildren}
-      </PointAnnotationNativeComponent>
+      <>
+        <View collapsable={false} style={{ overflow: "visible" }}>
+          {otherChildren}
+        </View>
+        {callout}
+      </>
     );
-  },
-);
+  })();
+
+  return (
+    <PointAnnotationNativeComponent
+      ref={nativeRef}
+      {...props}
+      id={frozenId}
+      anchor={nativeAnchor}
+      offset={nativeOffset}
+      draggable={draggable}
+      style={[props.style, styles.container]}
+    >
+      {wrappedChildren}
+    </PointAnnotationNativeComponent>
+  );
+};

package/src/components/camera/Camera.tsx

@@ -1,15 +1,15 @@
 import {
   type Component,
   type ComponentProps,
-  forwardRef,
   memo,
+  type Ref,
   useImperativeHandle,
   useRef,
 } from "react";
 import {
   findNodeHandle,
-  type NativeMethods,
   type NativeSyntheticEvent,
+  type ReactNativeElement,
 } from "react-native";
 
 import NativeCameraComponent from "./CameraNativeComponent";
@@ -233,74 +233,75 @@ export type CameraProps = BaseProps &
     onTrackUserLocationChange?: (
       event: NativeSyntheticEvent<TrackUserLocationChangeEvent>,
     ) => void;
+
+    /**
+     * Ref to access Camera methods.
+     */
+    ref?: Ref<CameraRef>;
   };
 
 export const Camera = memo(
-  forwardRef<CameraRef, CameraProps>(
-    (
-      {
-        testID,
-        initialViewState,
-        minZoom,
-        maxZoom,
-        maxBounds,
-        trackUserLocation,
-        onTrackUserLocationChange,
-        ...stop
-      },
-      ref,
-    ) => {
-      const nativeRef = useRef<
-        Component<ComponentProps<typeof NativeCameraComponent>> &
-          Readonly<NativeMethods>
-      >(null);
-
-      const setStop: CameraRef["setStop"] = (stop) => {
-        const nodeHandle = findNodeHandle(nativeRef.current);
-
-        if (!nodeHandle) {
-          throw new Error(
-            "NativeCameraComponent ref is null, wait for the map being initialized",
-          );
-        }
-
-        return NativeCameraModule.setStop(nodeHandle, stop);
-      };
-
-      useImperativeHandle(ref, () => ({
-        setStop,
-
-        jumpTo: ({ center, ...options }) =>
-          setStop({ ...options, center, duration: 0, easing: undefined }),
-
-        easeTo: ({ center, duration = 500, easing = "ease", ...options }) =>
-          setStop({ ...options, center, duration, easing }),
-
-        flyTo: ({ center, duration = 2000, easing = "fly", ...options }) =>
-          setStop({ ...options, center, duration, easing }),
-
-        fitBounds: (
-          bounds,
-          { duration = 2000, easing = "fly", ...options } = {},
-        ) => setStop({ ...options, bounds, duration, easing }),
-
-        zoomTo: (zoom, { duration = 500, easing = "ease", ...options } = {}) =>
-          setStop({ ...options, zoom, duration, easing }),
-      }));
-
-      return (
-        <NativeCameraComponent
-          ref={nativeRef}
-          testID={testID}
-          stop={stop}
-          initialViewState={initialViewState}
-          minZoom={minZoom}
-          maxZoom={maxZoom}
-          maxBounds={maxBounds}
-          trackUserLocation={trackUserLocation}
-          onTrackUserLocationChange={onTrackUserLocationChange}
-        />
-      );
-    },
-  ),
+  ({
+    testID,
+    initialViewState,
+    minZoom,
+    maxZoom,
+    maxBounds,
+    trackUserLocation,
+    onTrackUserLocationChange,
+    ref,
+    ...stop
+  }: CameraProps) => {
+    const nativeRef = useRef<
+      Component<ComponentProps<typeof NativeCameraComponent>> &
+        ReactNativeElement
+    >(null);
+
+    const setStop: CameraRef["setStop"] = (stop) => {
+      const nodeHandle = findNodeHandle(nativeRef.current);
+
+      if (!nodeHandle) {
+        throw new Error(
+          "NativeCameraComponent ref is null, wait for the map being initialized",
+        );
+      }
+
+      return NativeCameraModule.setStop(nodeHandle, stop);
+    };
+
+    useImperativeHandle(ref, () => ({
+      setStop,
+
+      jumpTo: ({ center, ...options }) =>
+        setStop({ ...options, center, duration: 0, easing: undefined }),
+
+      easeTo: ({ center, duration = 500, easing = "ease", ...options }) =>
+        setStop({ ...options, center, duration, easing }),
+
+      flyTo: ({ center, duration = 2000, easing = "fly", ...options }) =>
+        setStop({ ...options, center, duration, easing }),
+
+      fitBounds: (
+        bounds,
+        { duration = 2000, easing = "fly", ...options } = {},
+      ) => setStop({ ...options, bounds, duration, easing }),
+
+      zoomTo: (zoom, { duration = 500, easing = "ease", ...options } = {}) =>
+        setStop({ ...options, zoom, duration, easing }),
+    }));
+
+    return (
+      <NativeCameraComponent
+        ref={nativeRef}
+        testID={testID}
+        stop={stop}
+        initialViewState={initialViewState}
+        minZoom={minZoom}
+        maxZoom={maxZoom}
+        maxBounds={maxBounds}
+        trackUserLocation={trackUserLocation}
+        onTrackUserLocationChange={onTrackUserLocationChange}
+      />
+    );
+  },
 );

package/src/components/images/Images.tsx

@@ -9,6 +9,7 @@ import {
 import ImagesNativeComponent, {
   type NativeImageEntry,
 } from "./ImagesNativeComponent";
+import "./NativeImagesModule";
 import { type BaseProps } from "../../types/BaseProps";
 
 export type ImageSourceWithSdf = {

package/src/components/images/NativeImagesModule.ts

@@ -0,0 +1,11 @@
+import { Platform, type TurboModule } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {}
+
+const imagesModule =
+  Platform.OS === "ios"
+    ? TurboModuleRegistry.getEnforcing<Spec>("MLRNImagesModule")
+    : null;
+
+export default imagesModule;

package/src/components/layer/Layer.tsx

@@ -21,17 +21,19 @@ import { transformStyle } from "../../utils/StyleValue";
 import { mergeStyleProps } from "../../utils/convertStyleSpec";
 import { getNativeFilter } from "../../utils/getNativeFilter";
 
+let deprecationWarned = false;
+
 /**
- * Additional props specific to maplibre-react-native.
+ * Additional props specific to @maplibre/maplibre-react-native.
  */
 interface BaseLayerProps extends BaseProps {
   /**
-   * The layer will appear under this layer ID.
+   * The layer will appear under this layer.
    */
   beforeId?: string;
 
   /**
-   * The layer will appear above this layer ID.
+   * The layer will appear above this layer.
    */
   afterId?: string;
 
@@ -51,19 +53,18 @@ type OptionalSource<T> = T extends { source: string }
   : T;
 
 /**
- * Base layer props from style spec with optional id/source.
- * Matches react-map-gl's LayerProps pattern.
+ * Base layer props from style spec with optional `id`/`source`.
  */
 type StyleSpecLayerProps = OptionalSource<OptionalId<LayerSpecification>> &
   BaseLayerProps & {
-    /** @deprecated Use paint and layout props instead */
+    /** @deprecated Use `layout`/`paint` props instead. */
     style?: never;
   };
 
 /**
  * Common props shared by all layer types.
  *
- * @deprecated Use `paint` and `layout` props instead of `style`. Will be removed in v12.
+ * @deprecated Use `paint` and `layout` props instead of `style`. The `style` prop be removed in v12.
  */
 interface LegacyBaseLayerProps extends BaseLayerProps {
   /**
@@ -87,7 +88,7 @@ interface LegacyBaseLayerProps extends BaseLayerProps {
 }
 
 /**
- * @deprecated Use LayerProps instead.
+ * @deprecated Use `LayerProps` instead.
  */
 export interface SourceLayerProps extends LegacyBaseLayerProps {
   source?: string;
@@ -95,110 +96,78 @@ export interface SourceLayerProps extends LegacyBaseLayerProps {
   filter?: FilterSpecification;
 }
 
-// ============================================================================
-// DEPRECATED: Legacy type exports for backwards compatibility
-// These will be removed in v12. Use LayerProps with paint/layout instead.
-// ============================================================================
-
 /**
- * @deprecated Use LayerProps with type="background" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type BackgroundLayerProps = LegacyBaseLayerProps & {
   type: "background";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: BackgroundLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="fill" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type FillLayerProps = SourceLayerProps & {
   type: "fill";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: FillLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="line" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type LineLayerProps = SourceLayerProps & {
   type: "line";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: LineLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="symbol" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type SymbolLayerProps = SourceLayerProps & {
   type: "symbol";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: SymbolLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="circle" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type CircleLayerProps = SourceLayerProps & {
   type: "circle";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: CircleLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="heatmap" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type HeatmapLayerProps = SourceLayerProps & {
   type: "heatmap";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: HeatmapLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="fill-extrusion" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type FillExtrusionLayerProps = SourceLayerProps & {
   type: "fill-extrusion";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: FillExtrusionLayerStyle;
 };
 
 /**
- * @deprecated Use LayerProps with type="raster" instead.
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
  */
 export type RasterLayerProps = SourceLayerProps & {
   type: "raster";
-  /** @deprecated Use paint and layout props instead */
+  /** @deprecated Use `layout`/`paint` props instead. */
   style?: RasterLayerStyle;
 };
 
-/**
- * Layer component props.
- * Combines style spec LayerSpecification with MLRN-specific props.
- *
- * The `paint` and `layout` props come directly from LayerSpecification
- * and use kebab-case property names per the MapLibre Style Spec.
- *
- * @example
- * ```tsx
- * // Style spec compliant (recommended)
- * <Layer
- *   type="fill"
- *   id="parks"
- *   source="parks-source"
- *   paint={{ "fill-color": "green", "fill-opacity": 0.5 }}
- *   layout={{ "visibility": "visible" }}
- * />
- *
- * // Deprecated (still works)
- * <Layer
- *   type="fill"
- *   id="parks"
- *   source="parks-source"
- *   style={{ fillColor: "green", fillOpacity: 0.5 }}
- * />
- * ```
- */
 export type LayerProps =
   | StyleSpecLayerProps
   | FillLayerProps
@@ -236,14 +205,6 @@ export type LayerProps =
  *     "fill-color": ["interpolate", ["linear"], ["get", "elevation"], 0, "blue", 100, "red"],
  *   }}
  * />
- *
- * // Deprecated style prop (still works but will be removed in v12)
- * <Layer
- *   type="fill"
- *   id="parks"
- *   source="parks-source"
- *   style={{ fillColor: "green", fillOpacity: 0.5 }}
- * />
  * ```
  */
 export const Layer = ({ id, ...props }: LayerProps) => {
@@ -269,20 +230,13 @@ export const Layer = ({ id, ...props }: LayerProps) => {
       ...props,
     };
 
-    // Warn if using deprecated style prop (only in development)
-    if (__DEV__ && style) {
-      if (paint || layout) {
-        console.warn(
-          "@maplibre/maplibre-react-native: Using both `style` and `paint`/`layout` props. " +
-            "The `style` prop is deprecated and will be removed in v12. " +
-            "Properties from `paint`/`layout` take precedence.",
-        );
-      } else {
-        console.warn(
-          "@maplibre/maplibre-react-native: The `style` prop is deprecated. " +
-            "Use `paint` and `layout` props instead. Will be removed in v12.",
-        );
-      }
+    if (__DEV__ && style && !deprecationWarned) {
+      deprecationWarned = true;
+
+      console.warn(
+        "[@maplibre/maplibre-react-native] The `style` prop is deprecated. " +
+          "Use `paint` and `layout` props instead. `style` will be removed in v12.",
+      );
     }
 
     // Merge paint/layout (new API) with style (deprecated API)

package/src/components/map/AndroidTextureMapViewNativeComponent.ts

@@ -1,5 +1,5 @@
 // DO NOT MODIFY
-// This file is auto-generated from src/components/map/MapViewNativeComponent.ts
+// This file is auto-generated from package/src/components/map/MapViewNativeComponent.ts
 
 import {
   codegenNativeComponent,
@@ -76,6 +76,9 @@ export interface NativeProps extends ViewProps {
   compassPosition?: NativeOrnamentViewPosition;
   compassHiddenFacingNorth?: CodegenTypes.WithDefault<boolean, true>;
 
+  scaleBar?: CodegenTypes.WithDefault<boolean, false>;
+  scaleBarPosition?: NativeOrnamentViewPosition;
+
   onPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
   onLongPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;