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

package/src/components/annotations/marker/MarkerViewNativeComponent.ts

@@ -8,8 +8,8 @@ import {
 import type { UnsafeMixed } from "../../../types/codegen/UnsafeMixed";
 
 type NativeAnchor = {
-  x: CodegenTypes.Double;
-  y: CodegenTypes.Double;
+  x?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.5>;
+  y?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.5>;
 };
 
 type NativeOffset = {
@@ -17,12 +17,22 @@ type NativeOffset = {
   y: CodegenTypes.Double;
 };
 
+type NativeMarkerPressEvent = {
+  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;
   lngLat: UnsafeMixed<
     [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
   >;
   anchor?: NativeAnchor;
   offset?: NativeOffset;
+  onPress?: CodegenTypes.BubblingEventHandler<NativeMarkerPressEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>(

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

@@ -9,8 +9,8 @@ import {
 import type { UnsafeMixed } from "../../../types/codegen/UnsafeMixed";
 
 type NativeAnchor = {
-  x: CodegenTypes.Double;
-  y: CodegenTypes.Double;
+  x?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.5>;
+  y?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.5>;
 };
 
 type NativeOffset = {
@@ -38,8 +38,9 @@ export interface NativeProps extends ViewProps {
   anchor?: NativeAnchor;
   offset?: NativeOffset;
 
-  onSelected?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
-  onDeselected?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
+  onPress?: CodegenTypes.BubblingEventHandler<NativeAnnotationEvent>;
+  onSelect?: CodegenTypes.BubblingEventHandler<NativeAnnotationEvent>;
+  onDeselect?: CodegenTypes.BubblingEventHandler<NativeAnnotationEvent>;
   onDragStart?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
   onDrag?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;
   onDragEnd?: CodegenTypes.DirectEventHandler<NativeAnnotationEvent>;

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,24 +35,34 @@ const styles = StyleSheet.create({
   },
 });
 
+export type NativeViewAnnotationRef = Component<
+  ComponentProps<typeof PointAnnotationNativeComponent>
+> &
+  ReactNativeElement;
+
+/**
+ * Event emitted by a ViewAnnotation on press.
+ */
 export type ViewAnnotationEvent = PressEvent & {
   id: string;
 };
 
 export interface ViewAnnotationProps {
   /**
-   * A string that uniquely identifies the annotation.
-   * If not provided, a unique ID will be generated automatically.
+   * 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.
+   * 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.
+   * The string containing the annotation's snippet(subtitle). Not displayed in
+   * the default callout.
    */
   snippet?: string;
 
@@ -62,7 +72,9 @@ export interface ViewAnnotationProps {
   selected?: boolean;
 
   /**
-   * Enable or disable dragging. Defaults to false.
+   * Enable or disable dragging.
+   *
+   * @defaultValue false
    */
   draggable?: boolean;
 
@@ -72,31 +84,38 @@ export interface ViewAnnotationProps {
   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".
+   * 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.
    *
-   * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PositionAnchor/
+   * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PositionAnchor/}
+   * @defaultValue "center"
    */
   anchor?: Anchor;
 
   /**
-   * The offset in pixels to apply relative to the anchor.
-   * Negative values indicate left and up.
+   * 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
+   * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/#offset}
+   * @defaultValue [0, 0]
    */
   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,107 +132,109 @@ 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 {
   /**
-   * 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.
+   * 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;
+  /**
+   * Returns the native ref for Reanimated v4 compatibility. Uses a Proxy to map
+   * _viewConfig to __viewConfig.
+   */
+  getAnimatableRef(): NativeViewAnnotationRef | null;
 }
 
 /**
- * ViewAnnotation represents a one-dimensional shape located at a single geographical coordinate.
+ * ViewAnnotation 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.
+ * 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 Marker,
- * as with ViewAnnotation on Android child views are rendered onto a bitmap for better performance.
+ * 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);
       }
+    },
+    // Reanimated v4 compatibility: createAnimatedComponent looks for _viewConfig but native has __viewConfig
+    getAnimatableRef: () =>
+      nativeRef.current
+        ? new Proxy(nativeRef.current, {
+            get: (target, prop) =>
+              prop === "_viewConfig"
+                ? (target as unknown as { __viewConfig: unknown }).__viewConfig
+                : target[prop as keyof typeof target],
+          })
+        : null,
+  }));
+
+  const wrappedChildren = (() => {
+    if (Platform.OS !== "android") {
+      return props.children;
     }
 
-    // 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}
-        </>
-      );
-    })();
+    // 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>
+  );
+};