@maplibre/maplibre-react-native 11.0.0-alpha.42 → 11.0.0-alpha.43

package/src/components/annotations/point-annotation/PointAnnotation.tsx

@@ -0,0 +1,219 @@
+import {
+  Children,
+  Component,
+  type ComponentProps,
+  forwardRef,
+  isValidElement,
+  type ReactElement,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import {
+  type NativeMethods,
+  type NativeSyntheticEvent,
+  Platform,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from "react-native";
+
+import PointAnnotationNativeComponent, {
+  Commands,
+} from "./PointAnnotationNativeComponent";
+import { useFrozenId } from "../../../hooks/useFrozenId";
+import { type Anchor, anchorToNative } from "../../../types/Anchor";
+import type { LngLat } from "../../../types/LngLat";
+import type { PixelPoint } from "../../../types/PixelPoint";
+import type { PressEvent } from "../../../types/PressEvent";
+import { Callout } from "../callout/Callout";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+  },
+});
+
+export type AnnotationEvent = PressEvent & {
+  id: string;
+};
+
+export interface PointAnnotationProps {
+  /**
+   * A string that uniquely identifies the annotation.
+   * If not provided, a unique ID will be generated automatically.
+   */
+  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.
+   */
+  lngLat: LngLat;
+
+  /**
+   * 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".
+   *
+   * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PositionAnchor/
+   */
+  anchor?: Anchor;
+
+  /**
+   * The offset in pixels to apply relative to the anchor.
+   * Negative values indicate left and up.
+   *
+   * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/#offset
+   */
+  offset?: PixelPoint;
+
+  /**
+   * This callback is fired once this annotation is selected.
+   */
+  onSelected?: (event: NativeSyntheticEvent<AnnotationEvent>) => void;
+
+  /**
+   * This callback is fired once this annotation is deselected.
+   */
+  onDeselected?: (event: NativeSyntheticEvent<AnnotationEvent>) => void;
+
+  /**
+   * This callback is fired once this annotation has started being dragged.
+   */
+  onDragStart?: (event: NativeSyntheticEvent<AnnotationEvent>) => void;
+
+  /**
+   * This callback is fired once this annotation has stopped being dragged.
+   */
+  onDragEnd?: (event: NativeSyntheticEvent<AnnotationEvent>) => void;
+
+  /**
+   * This callback is fired while this annotation is being dragged.
+   */
+  onDrag?: (event: NativeSyntheticEvent<AnnotationEvent>) => void;
+
+  /**
+   * Expects one child, and an optional callout can be added as well
+   */
+  children: ReactElement | [ReactElement, ReactElement];
+
+  style?: ViewProps["style"];
+}
+
+export interface 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(): void;
+}
+
+/**
+ * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
+ *
+ * Consider using GeoJSONSource 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
+>(
+  (
+    {
+      id,
+      anchor = "center",
+      draggable = false,
+      offset,
+      ...props
+    }: PointAnnotationProps,
+    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,
+      (): PointAnnotationRef => ({
+        refresh,
+      }),
+    );
+
+    function refresh(): void {
+      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;
+      }
+
+      // 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}
+        </>
+      );
+    })();
+
+    return (
+      <PointAnnotationNativeComponent
+        ref={nativeRef}
+        {...props}
+        id={frozenId}
+        anchor={nativeAnchor}
+        offset={nativeOffset}
+        draggable={draggable}
+        style={[props.style, styles.container]}
+      >
+        {wrappedChildren}
+      </PointAnnotationNativeComponent>
+    );
+  },
+);

package/src/components/annotations/point-annotation/PointAnnotationNativeComponent.ts

@@ -0,0 +1,58 @@
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../../types/codegen/UnsafeMixed";
+
+type NativeAnchor = {
+  x: CodegenTypes.Double;
+  y: CodegenTypes.Double;
+};
+
+type NativeOffset = {
+  x: CodegenTypes.Double;
+  y: CodegenTypes.Double;
+};
+
+type NativeAnnotationEvent = {
+  id: string;
+  lngLat: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
+  point: UnsafeMixed<[x: CodegenTypes.Double, y: CodegenTypes.Double]>;
+};
+
+export interface NativeProps extends ViewProps {
+  id: string;
+  title?: string;
+  snippet?: string;
+  selected?: CodegenTypes.WithDefault<boolean, false>;
+  draggable?: CodegenTypes.WithDefault<boolean, false>;
+  lngLat: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
+  anchor?: NativeAnchor;
+  offset?: NativeOffset;
+
+  onSelected?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
+  onDeselected?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
+  onDragStart?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
+  onDrag?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
+  onDragEnd?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
+}
+
+interface NativeCommands {
+  refresh: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ["refresh"],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNPointAnnotation",
+) as HostComponent<NativeProps>;

package/src/index.ts

@@ -23,10 +23,17 @@ export {
   MapView,
 } from "./components/map-view/MapView";
 
-export { PointAnnotation } from "./components/annotations/PointAnnotation";
-export type { PointAnnotationRef } from "./components/annotations/PointAnnotation";
+export {
+  PointAnnotation,
+  type PointAnnotationProps,
+  type PointAnnotationRef,
+  type AnnotationEvent,
+} from "./components/annotations/point-annotation/PointAnnotation";
 export { GeoJSONSourceAnnotation } from "./components/annotations/GeoJSONSourceAnnotation";
-export { Callout } from "./components/annotations/Callout";
+export {
+  Callout,
+  type CalloutProps,
+} from "./components/annotations/callout/Callout";
 
 export { UserLocation } from "./components/user-location/UserLocation";
 export { NativeUserLocation } from "./components/user-location/NativeUserLocation";
@@ -76,7 +83,10 @@ export {
   Images,
 } from "./components/images/Images";
 
-export { MarkerView } from "./components/annotations/MarkerView";
+export {
+  MarkerView,
+  type MarkerViewProps,
+} from "./components/annotations/marker-view/MarkerView";
 
 export {
   LocationManager,
@@ -108,6 +118,7 @@ export {
   type StaticMapCreateOptions,
 } from "./modules/static-map/StaticMapManager";
 
+export type { Anchor } from "./types/Anchor";
 export type { LngLat } from "./types/LngLat";
 export type { LngLatBounds } from "./types/LngLatBounds";
 export type {

package/src/types/Anchor.ts

@@ -0,0 +1,44 @@
+/**
+ * Position anchor for markers and annotations.
+ * Follows MapLibre GL JS PositionAnchor format.
+ *
+ * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PositionAnchor/
+ */
+export type Anchor =
+  | "center"
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+/**
+ * Converts an Anchor string to native {x, y} format.
+ * x: 0 = left, 0.5 = center, 1 = right
+ * y: 0 = top, 0.5 = center, 1 = bottom
+ */
+export function anchorToNative(anchor: Anchor): { x: number; y: number } {
+  switch (anchor) {
+    case "center":
+      return { x: 0.5, y: 0.5 };
+    case "top":
+      return { x: 0.5, y: 0 };
+    case "bottom":
+      return { x: 0.5, y: 1 };
+    case "left":
+      return { x: 0, y: 0.5 };
+    case "right":
+      return { x: 1, y: 0.5 };
+    case "top-left":
+      return { x: 0, y: 0 };
+    case "top-right":
+      return { x: 1, y: 0 };
+    case "bottom-left":
+      return { x: 0, y: 1 };
+    case "bottom-right":
+      return { x: 1, y: 1 };
+  }
+}

package/src/utils/animated/Animated.tsx

@@ -5,12 +5,14 @@ import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
 import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray";
 import { AnimatedGeoJSON } from "./AnimatedGeoJSON";
 import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
+import { MarkerView } from "../../components/annotations/marker-view/MarkerView";
 import { Layer } from "../../components/layers/Layer";
 import { GeoJSONSource } from "../../components/sources/geojson-source/GeoJSONSource";
 import { ImageSource } from "../../components/sources/image-source/ImageSource";
 
 export const Animated = {
   // Components
+
   GeoJSONSource: RNAnimated.createAnimatedComponent(
     GeoJSONSource as unknown as ComponentType<
       Omit<ComponentProps<typeof GeoJSONSource>, "data"> & {
@@ -19,9 +21,13 @@ export const Animated = {
     >,
   ),
   ImageSource: RNAnimated.createAnimatedComponent(ImageSource),
+
+  MarkerView: RNAnimated.createAnimatedComponent(MarkerView),
+
   Layer: RNAnimated.createAnimatedComponent(Layer),
 
   // Values
+
   CoordinatesArray: AnimatedCoordinatesArray,
   RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
   GeoJSON: AnimatedGeoJSON,

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNCallout.java

@@ -1,11 +0,0 @@
-package org.maplibre.reactnative.components.annotations;
-
-import android.content.Context;
-
-import com.facebook.react.views.view.ReactViewGroup;
-
-public class MLRNCallout extends ReactViewGroup {
-    public MLRNCallout(Context context) {
-        super(context);
-    }
-}

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNCalloutManager.java

@@ -1,18 +0,0 @@
-package org.maplibre.reactnative.components.annotations;
-
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.ViewGroupManager;
-
-public class MLRNCalloutManager extends ViewGroupManager<MLRNCallout> {
-    public static final String REACT_CLASS = "MLRNCallout";
-
-    @Override
-    public String getName() {
-        return REACT_CLASS;
-    }
-
-    @Override
-    protected MLRNCallout createViewInstance(ThemedReactContext reactContext) {
-        return new MLRNCallout(reactContext);
-    }
-}

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNMarkerView.java

@@ -1,112 +0,0 @@
-package org.maplibre.reactnative.components.annotations;
-
-import android.content.Context;
-import android.graphics.PointF;
-import android.view.View;
-
-import androidx.annotation.NonNull;
-
-import org.maplibre.geojson.Point;
-import org.maplibre.android.maps.MapLibreMap;
-import org.maplibre.android.maps.OnMapReadyCallback;
-import org.maplibre.reactnative.components.AbstractMapFeature;
-import org.maplibre.reactnative.components.mapview.MLRNMapView;
-import org.maplibre.reactnative.utils.GeoJSONUtils;
-
-public class MLRNMarkerView extends AbstractMapFeature implements MarkerView.OnPositionUpdateListener, View.OnLayoutChangeListener {
-    private MLRNMarkerViewManager mManager;
-    private MLRNMapView mMapView;
-
-    private View mChildView;
-
-    private MarkerViewManager mMarkerViewManager;
-
-    private MarkerView mMarkerView;
-    private Point mCoordinate;
-    private Float[] mAnchor;
-
-
-    public MLRNMarkerView(Context context, MLRNMarkerViewManager manager) {
-        super(context);
-        mManager = manager;
-    }
-
-    @Override
-    public void addView(View childView, int childPosition) {
-        mChildView = childView;
-    }
-
-    public void setCoordinate(Point point) {
-        mCoordinate = point;
-
-        if (mMarkerView != null) {
-            mMarkerView.setLatLng(GeoJSONUtils.toLatLng(point));
-        }
-    }
-
-    public void setAnchor(float x, float y) {
-        mAnchor = new Float[]{x, y};
-        refresh();
-    }
-
-    public void refresh() {
-        // this will cause position to be recalculated
-        if (mMarkerView != null) {
-            mMarkerView.setLatLng(GeoJSONUtils.toLatLng(mCoordinate));
-        }
-    }
-
-    @Override
-    public void addToMap(MLRNMapView mapView) {
-        mMapView = mapView;
-
-        final MLRNMarkerView mlrnMarkerView = this;
-
-        mMapView.getMapAsync(
-            new OnMapReadyCallback() {
-                @Override
-                public void onMapReady(@NonNull MapLibreMap mapLibreMap) {
-                    mMarkerViewManager = mMapView.getMarkerViewManager(mapLibreMap);
-
-                    if (mChildView != null) {
-                        mMarkerView = new MarkerView(GeoJSONUtils.toLatLng(mCoordinate), mChildView);
-                        mMarkerView.setOnPositionUpdateListener(mlrnMarkerView);
-                        mChildView.addOnLayoutChangeListener(mlrnMarkerView);
-                        mMarkerViewManager.addMarker(mMarkerView);
-                    }
-                }
-            }
-        );
-    }
-
-    @Override
-    public PointF onUpdate(PointF pointF) {
-        if (mAnchor != null) {
-            return new PointF(
-                    pointF.x - mChildView.getWidth() * mAnchor[0],
-                    pointF.y - mChildView.getHeight() * mAnchor[1]
-                    );
-        }
-        return pointF;
-    }
-
-    @Override
-    public void removeFromMap(MLRNMapView mapView) {
-        if (mMarkerView != null) {
-            mMarkerViewManager.removeMarker(mMarkerView);
-            mChildView.removeOnLayoutChangeListener(this);
-            mMarkerView.setOnPositionUpdateListener(null);
-            mMarkerView = null;
-            mMarkerViewManager = null;
-        }
-    }
-
-    @Override
-    public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop,
-                               int oldRight, int oldBottom) {
-        if (left != oldLeft || right != oldRight || top != oldTop || bottom != oldBottom) {
-            refresh();
-        }
-    }
-}
-

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNMarkerViewManager.java

@@ -1,45 +0,0 @@
-package org.maplibre.reactnative.components.annotations;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import org.maplibre.reactnative.components.AbstractEventEmitter;
-import org.maplibre.reactnative.utils.GeoJSONUtils;
-
-import java.util.Map;
-
-public class MLRNMarkerViewManager extends AbstractEventEmitter<MLRNMarkerView> {
-    public static final String REACT_CLASS = "MLRNMarkerView";
-
-    public MLRNMarkerViewManager(ReactApplicationContext reactApplicationContext) {
-        super(reactApplicationContext);
-    }
-
-    @Override
-    public String getName() {
-        return REACT_CLASS;
-    }
-
-    @ReactProp(name="coordinate")
-    public void setCoordinate(MLRNMarkerView markerView, String geoJSONStr) {
-        markerView.setCoordinate(GeoJSONUtils.toPointGeometry(geoJSONStr));
-    }
-
-    @ReactProp(name="anchor")
-    public void setAnchor(MLRNMarkerView markerView, ReadableMap map) {
-        markerView.setAnchor((float) map.getDouble("x"), (float) map.getDouble("y"));
-    }
-
-    @Override
-    protected MLRNMarkerView createViewInstance(ThemedReactContext reactContext) {
-        return new MLRNMarkerView(reactContext, this);
-    }
-
-    @Override
-    public Map<String, String> customEvents() {
-        return MapBuilder.<String, String>builder()
-                .build();
-    }
-}