@maplibre/maplibre-react-native 10.4.0 → 11.0.0-alpha.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "React Native library for creating maps with MapLibre Native for Android & iOS",
-  "version": "10.4.0",
+  "version": "11.0.0-alpha.10",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -40,22 +40,25 @@
     "docs",
     "examples/*"
   ],
-  "packageManager": "yarn@4.5.3",
+  "packageManager": "yarn@4.10.3",
   "main": "./lib/commonjs/index.js",
-  "source": "./src/index.ts",
   "module": "./lib/module/index.js",
-  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "source": "./src/index.ts",
+  "types": "./lib/typescript/module/src/index.d.ts",
   "exports": {
     ".": {
       "import": {
+        "source": "./src/index.ts",
         "types": "./lib/typescript/module/src/index.d.ts",
         "default": "./lib/module/index.js"
       },
       "require": {
+        "source": "./src/index.ts",
         "types": "./lib/typescript/commonjs/src/index.d.ts",
         "default": "./lib/commonjs/index.js"
       }
     },
+    "./package.json": "./package.json",
     "./app.plugin.js": {
       "require": {
         "default": "./app.plugin.js"
@@ -79,7 +82,6 @@
     "ios",
     "cpp",
     "*.podspec",
-    "react-native.config.json",
     "app.plugin.js",
     "!ios/build",
     "!android/build",
@@ -111,18 +113,34 @@
       [
         "typescript",
         {
-          "esm": true,
           "project": "tsconfig.build.json"
         }
       ]
     ]
   },
+  "codegenConfig": {
+    "name": "MapLibreReactNativeSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "org.maplibre.reactnative"
+    },
+    "ios": {
+      "componentProvider": {
+        "MLRNMapView": "MLRNMapViewComponentView",
+        "MLRNCamera": "MLRNCameraComponentView"
+      },
+      "modulesProvider": {
+        "MLRNMapViewModule": "MLRNMapViewModule"
+      }
+    }
+  },
   "peerDependencies": {
-    "@expo/config-plugins": ">=7",
+    "@expo/config-plugins": ">=54.0.0",
     "@types/geojson": "^7946.0.0",
-    "@types/react": ">=16.6.1",
-    "react": ">=16.6.1",
-    "react-native": ">=0.59.9"
+    "@types/react": ">=19.1.0",
+    "react": ">=19.1.0",
+    "react-native": ">=0.80.0"
   },
   "peerDependenciesMeta": {
     "@expo/config-plugins": {
@@ -139,37 +157,37 @@
     "@turf/distance": "^7.1.0",
     "@turf/helpers": "^7.1.0",
     "@turf/length": "^7.1.0",
-    "@turf/nearest-point-on-line": "^7.1.0",
-    "debounce": "^2.2.0"
+    "@turf/nearest-point-on-line": "^7.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@expo/config-plugins": "^10.0.2",
-    "@maplibre/maplibre-gl-style-spec": "24.3.0",
+    "@expo/config-plugins": "~54.0.2",
+    "@maplibre/maplibre-gl-style-spec": "24.3.1",
+    "@react-native-community/cli": "^20.0.2",
+    "@react-native/babel-preset": "0.81.5",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@sinonjs/fake-timers": "^15.0.0",
-    "@testing-library/react-native": "^13.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/ejs": "^3.1.5",
-    "@types/geojson": "^7946.0.14",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.18",
+    "@types/geojson": "^7946.0.16",
+    "@types/node": "^22.18.6",
+    "@types/react": "^19.1.13",
     "documentation": "^14.0.0",
     "ejs": "^3.1.10",
     "eslint": "^8.57.1",
     "eslint-config-universe": "15.0.3",
-    "expo-module-scripts": "^4.0.4",
-    "jest": "^30.0.2",
+    "expo-module-scripts": "^5.0.7",
+    "jest": "^30.1.3",
     "prettier": "3.6.2",
-    "react": "18.3.1",
-    "react-docgen": "^8.0.0",
-    "react-native": "0.76.9",
-    "react-native-builder-bob": "^0.34.0",
-    "react-test-renderer": "18.3.1",
-    "semantic-release": "^24.2.0",
+    "react": "19.1.0",
+    "react-docgen": "^8.0.1",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-test-renderer": "19.1.0",
+    "semantic-release": "^25.0.1",
     "snapshot-diff": "^0.10.0",
     "ts-node": "^10.9.2",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
+    "tsx": "^4.20.5",
+    "typescript": "^5.9.2"
   }
 }

package/src/MLRNModule.ts

@@ -1,15 +1,6 @@
 import { NativeModules } from "react-native";
 
-import { CameraMode } from "./types/CameraMode";
-
 interface IMLRNModule {
-  CameraModes: {
-    Flight: CameraMode.Flight;
-    Ease: CameraMode.Ease;
-    Linear: CameraMode.Linear;
-    None: CameraMode.None;
-  };
-
   OfflinePackDownloadState: {
     Inactive: string | number;
     Active: string | number;
@@ -25,17 +16,6 @@ interface IMLRNModule {
     Default: string;
   };
 
-  /**
-   * @deprecated This will be removed in the next major version.
-   * @see https://github.com/maplibre/maplibre-react-native/issues/25#issuecomment-1382382044
-   */
-  setAccessToken(accessToken: string | null): Promise<string | null>;
-  /**
-   * @deprecated This will be removed in the next major version.
-   * @see https://github.com/maplibre/maplibre-react-native/issues/25#issuecomment-1382382044
-   */
-  getAccessToken(): Promise<string>;
-
   addCustomHeader(headerName: string, headerValue: string): void;
   removeCustomHeader(headerName: string): void;
 
@@ -45,14 +25,10 @@ interface IMLRNModule {
 const MLRNModule: IMLRNModule = Object.create(NativeModules.MLRNModule);
 
 export const {
-  CameraModes,
   OfflinePackDownloadState,
   StyleSource,
   StyleURL,
 
-  setAccessToken,
-  getAccessToken,
-
   addCustomHeader,
   removeCustomHeader,
 

package/src/components/Images.tsx

@@ -1,15 +1,13 @@
 import { type ReactNode, useMemo } from "react";
 import {
   Image,
+  type ImageRequireSource,
   type ImageResolvedAssetSource,
   type ImageSourcePropType,
+  type ImageURISource,
   type NativeSyntheticEvent,
   requireNativeComponent,
 } from "react-native";
-import type {
-  ImageRequireSource,
-  ImageURISource,
-} from "react-native/Libraries/Image/ImageSource";
 
 import { type BaseProps } from "../types/BaseProps";
 

package/src/components/annotations/Annotation.tsx

@@ -0,0 +1,147 @@
+import {
+  forwardRef,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+import {
+  Animated as RNAnimated,
+  Easing,
+  type NativeSyntheticEvent,
+} from "react-native";
+
+import { type SymbolLayerStyle } from "../../types/MapLibreRNStyles";
+import { type PressEventWithFeatures } from "../../types/PressEvent";
+import { AnimatedShapeSource } from "../../utils/animated/Animated";
+import { AnimatedPoint } from "../../utils/animated/AnimatedPoint";
+import { SymbolLayer } from "../layers/SymbolLayer";
+
+interface AnnotationProps {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?: (x: number) => number;
+  coordinates?: number[];
+  onPress?: (event: NativeSyntheticEvent<PressEventWithFeatures>) => void;
+  children?: ReactNode;
+  style?: object;
+  icon?: string | number | object;
+}
+
+type Shape = AnimatedPoint | GeoJSON.Point;
+
+function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
+  const lng = props.coordinates?.[0] || 0;
+  const lat = props.coordinates?.[1] || 0;
+  const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
+
+  if (props.animated) {
+    return new AnimatedPoint(point);
+  }
+
+  return point;
+}
+
+function isShapeAnimated(shape: Shape): shape is AnimatedPoint {
+  return shape instanceof AnimatedPoint;
+}
+
+interface AnnotationRef {
+  symbolStyle: SymbolLayerStyle | undefined;
+}
+
+export const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
+  (
+    {
+      animated = false,
+      animationDuration = 1000,
+      animationEasingFunction = Easing.linear,
+      ...otherProps
+    }: AnnotationProps,
+    ref,
+  ) => {
+    const props = {
+      ...otherProps,
+      animated,
+      animationDuration,
+      animationEasingFunction,
+    };
+
+    useImperativeHandle(
+      ref,
+      (): AnnotationRef => ({
+        symbolStyle,
+      }),
+    );
+
+    const [shape, setShape] = useState<Shape | null>(getShapeFromProps(props));
+
+    // this will run useEffect only when actual coordinates values change
+    const coordinateDeps = props.coordinates?.join(",");
+
+    useEffect(() => {
+      if (!Array.isArray(props.coordinates)) {
+        setShape(null);
+        return;
+      }
+
+      if (shape && isShapeAnimated(shape)) {
+        shape.stopAnimation();
+
+        shape
+          .timing({
+            coordinates: props.coordinates,
+            easing: animationEasingFunction,
+            duration: animationDuration,
+          })
+          .start();
+
+        return;
+      }
+
+      if (!shape || !isShapeAnimated(shape)) {
+        const newShape = getShapeFromProps(props);
+        setShape(newShape);
+      }
+    }, [coordinateDeps]);
+
+    if (!props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+    const symbolStyle: SymbolLayerStyle | undefined = props.icon
+      ? {
+          ...props.style,
+          iconImage: typeof props.icon === "string" ? props.icon : undefined,
+        }
+      : undefined;
+
+    if (symbolStyle) {
+      children.push(
+        <SymbolLayer id={`${props.id}-symbol`} style={symbolStyle} />,
+      );
+    }
+
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        children.push(...props.children);
+      } else {
+        children.push(props.children);
+      }
+    }
+
+    return (
+      <AnimatedShapeSource
+        id={props.id}
+        onPress={props.onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
+        {children}
+      </AnimatedShapeSource>
+    );
+  },
+);
+
+Annotation.displayName = "Annotation";

package/src/components/annotations/MarkerView.tsx

@@ -0,0 +1,86 @@
+import { point } from "@turf/helpers";
+import { type ReactElement, useMemo } from "react";
+import { Platform, requireNativeComponent, type ViewProps } from "react-native";
+
+import { PointAnnotation } from "./PointAnnotation";
+import { toJSONString } from "../../utils";
+
+export const NATIVE_MODULE_NAME = "MLRNMarkerView";
+
+interface MarkerViewProps extends ViewProps {
+  /**
+   * The center point (specified as a map coordinate) of the marker.
+   * See also #anchor.
+   */
+  coordinate: number[];
+  /**
+   * Specifies the anchor being set on a particular point of the annotation.
+   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+   * Note this is only for custom annotations not the default pin view.
+   * Defaults to the center of the view.
+   */
+  anchor?: {
+    /**
+     * `x` of anchor
+     */
+    x: number;
+    /**
+     * `y` of anchor
+     */
+    y: number;
+  };
+  allowOverlap?: boolean;
+  isSelected?: boolean;
+  /**
+   * Expects one child - can be container with multiple elements
+   */
+  children: ReactElement;
+}
+
+interface NativeProps extends ViewProps {
+  coordinate: string | undefined;
+  anchor: { x: number; y: number };
+  allowOverlap: boolean;
+  isSelected: boolean;
+}
+
+/**
+ * MarkerView allows you to place a interactive react native marker to the map.
+ *
+ * If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
+ * .
+ * This is based on [MakerView plugin](https://github.com/maplibre/maplibre-plugins-android/tree/main/plugin-markerview) on Android
+ * and PointAnnotation on iOS.
+ */
+export const MarkerView = ({
+  anchor = { x: 0.5, y: 0.5 },
+  allowOverlap = false,
+  isSelected = false,
+  ...rest
+}: MarkerViewProps) => {
+  const props = { anchor, allowOverlap, isSelected, ...rest };
+  const coordinate = props.coordinate
+    ? toJSONString(point(props.coordinate))
+    : undefined;
+
+  const idForPointAnnotation = useMemo(() => {
+    lastId = lastId + 1;
+    return `MV-${lastId}`;
+  }, []);
+
+  if (Platform.OS === "ios") {
+    return <PointAnnotation id={idForPointAnnotation} {...props} />;
+  }
+
+  const propsToSend = {
+    ...props,
+    coordinate,
+  };
+
+  return <MLRNMarkerView {...propsToSend}>{props.children}</MLRNMarkerView>;
+};
+
+let lastId = 0;
+
+const MLRNMarkerView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/annotations/PointAnnotation.tsx

@@ -0,0 +1,244 @@
+import { point } from "@turf/helpers";
+import {
+  Component,
+  type SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ReactElement,
+} from "react";
+import {
+  Platform,
+  StyleSheet,
+  type ViewProps,
+  requireNativeComponent,
+} from "react-native";
+
+import { useNativeBridge, type RNMLEvent } from "../../hooks/useNativeBridge";
+import { isFunction, toJSONString } from "../../utils";
+
+export const NATIVE_MODULE_NAME = "MLRNPointAnnotation";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+  },
+});
+
+type FeaturePayload = GeoJSON.Feature<
+  GeoJSON.Point,
+  {
+    screenPointX: number;
+    screenPointY: number;
+  }
+>;
+
+export interface PointAnnotationProps {
+  /**
+   * A string that uniquely identifies the annotation
+   */
+  id: string;
+  /**
+   * The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS.
+   */
+  title?: string;
+  /**
+   * The string containing the annotation’s snippet(subtitle). Not displayed in the default callout.
+   */
+  snippet?: string;
+  /**
+   * Manually selects/deselects annotation
+   */
+  selected?: boolean;
+  /**
+   * Enable or disable dragging. Defaults to false.
+   */
+  draggable?: boolean;
+  /**
+   * The center point (specified as a map coordinate) of the annotation.
+   */
+  coordinate: number[];
+  /**
+   * Specifies the anchor being set on a particular point of the annotation.
+   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+   * Note this is only for custom annotations not the default pin view.
+   * Defaults to the center of the view.
+   */
+  anchor?: {
+    /**
+     * See anchor
+     */
+    x: number;
+    /**
+     * See anchor
+     */
+    y: number;
+  };
+  /**
+   * This callback is fired once this annotation is selected. Returns a Feature as the first param.
+   */
+  onSelected?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired once this annotation is deselected.
+   */
+  onDeselected?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired once this annotation has started being dragged.
+   */
+  onDragStart?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired once this annotation has stopped being dragged.
+   */
+  onDragEnd?: (payload: FeaturePayload) => void;
+  /**
+   * This callback is fired while this annotation is being dragged.
+   */
+  onDrag?: (payload: FeaturePayload) => void;
+
+  /**
+   * Expects one child, and an optional callout can be added as well
+   */
+  children: ReactElement | [ReactElement, ReactElement];
+
+  style?: ViewProps["style"];
+}
+
+interface NativeProps extends Omit<PointAnnotationProps, "coordinate"> {
+  coordinate?: string;
+}
+
+export interface PointAnnotationRef {
+  refresh(): void;
+}
+
+/**
+ * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
+ *
+ * Consider using ShapeSource and SymbolLayer instead, if you have many points, and you have static images,
+ * they'll offer much better performance.
+ *
+ * If you need interactive views please use MarkerView,
+ * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
+ */
+export const PointAnnotation = forwardRef<
+  PointAnnotationRef,
+  PointAnnotationProps
+>(
+  (
+    {
+      anchor = { x: 0.5, y: 0.5 },
+      draggable = false,
+      ...props
+    }: PointAnnotationProps,
+    ref,
+  ) => {
+    useImperativeHandle(
+      ref,
+      (): PointAnnotationRef => ({
+        /**
+         * On android point annotation is rendered offscreen with a canvas into an image.
+         * To rerender the image from the current state of the view call refresh.
+         * Call this for example from Image#onLoad.
+         */
+        refresh,
+      }),
+    );
+
+    const { _runNativeCommand, _runPendingNativeCommands } =
+      useNativeBridge(NATIVE_MODULE_NAME);
+    const _nativeRef = useRef<Component<NativeProps>>(null);
+
+    function refresh(): void {
+      if (Platform.OS === "android") {
+        _runNativeCommand("refresh", _nativeRef.current, []);
+      }
+    }
+
+    function _onSelected(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onSelected)) {
+        props.onSelected(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDeselected(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDeselected)) {
+        props.onDeselected(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDragStart(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDragStart)) {
+        props.onDragStart(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDrag(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDrag)) {
+        props.onDrag(e.nativeEvent.payload);
+      }
+    }
+
+    function _onDragEnd(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDragEnd)) {
+        props.onDragEnd(e.nativeEvent.payload);
+      }
+    }
+
+    function _getCoordinate(): string | undefined {
+      if (!props.coordinate) {
+        return undefined;
+      }
+      return toJSONString(point(props.coordinate));
+    }
+
+    const _setNativeRef = (nativeRef: Component<NativeProps> | null): void => {
+      _nativeRef.current = nativeRef;
+      _runPendingNativeCommands(nativeRef);
+    };
+
+    const nativeProps = {
+      ...props,
+      anchor,
+      draggable,
+      ref: (nativeRef: Component<NativeProps> | null) =>
+        _setNativeRef(nativeRef),
+      id: props.id,
+      title: props.title,
+      snippet: props.snippet,
+      selected: props.selected,
+      style: [props.style, styles.container],
+      onMapboxPointAnnotationSelected: _onSelected,
+      onMapboxPointAnnotationDeselected: _onDeselected,
+      onMapboxPointAnnotationDragStart: _onDragStart,
+      onMapboxPointAnnotationDrag: _onDrag,
+      onMapboxPointAnnotationDragEnd: _onDragEnd,
+      coordinate: _getCoordinate(),
+    };
+
+    return (
+      <MLRNPointAnnotation {...nativeProps}>
+        {props.children}
+      </MLRNPointAnnotation>
+    );
+  },
+);
+
+// eslint complains about it
+// not sure why only in this component
+PointAnnotation.displayName = "PointAnnotation";
+
+const MLRNPointAnnotation =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);