@mapvina-com/mapvina-react-native 1.0.0

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

@@ -0,0 +1,59 @@
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../../types/codegen/UnsafeMixed";
+
+type NativeAnchor = {
+  x?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.5>;
+  y?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.5>;
+};
+
+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;
+
+  onPress?: CodegenTypes.BubblingEventHandler<NativeAnnotationEvent>;
+  onSelect?: CodegenTypes.BubblingEventHandler<NativeAnnotationEvent>;
+  onDeselect?: CodegenTypes.BubblingEventHandler<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/components/annotations/view-annotation/ViewAnnotation.tsx

@@ -0,0 +1,239 @@
+import {
+  Children,
+  Component,
+  type ComponentProps,
+  isValidElement,
+  type ReactElement,
+  type Ref,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import {
+  type NativeSyntheticEvent,
+  Platform,
+  type ReactNativeElement,
+  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 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.
+   */
+  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.
+   *
+   * @defaultValue 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.
+   *
+   * @see {@link https://mapvina.com/mapvina-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.
+   *
+   * @see {@link https://mapvina.com/mapvina-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.
+   */
+  onSelect?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+
+  /**
+   * This callback is fired once this annotation is deselected.
+   */
+  onDeselect?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+
+  /**
+   * This callback is fired once this annotation has started being dragged.
+   */
+  onDragStart?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+
+  /**
+   * This callback is fired once this annotation has stopped being dragged.
+   */
+  onDragEnd?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+
+  /**
+   * This callback is fired while this annotation is being dragged.
+   */
+  onDrag?: (event: NativeSyntheticEvent<ViewAnnotationEvent>) => void;
+
+  style?: ViewProps["style"];
+
+  /**
+   * Expects one child, and an optional callout can be added as well
+   */
+  children: ReactElement | [ReactElement, ReactElement];
+
+  /**
+   * 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.
+   * Call this for example from Image#onLoad.
+   */
+  refresh(): void;
+  /**
+   * Returns the native ref for Reanimated v4 compatibility.
+   */
+  getAnimatableRef(): NativeViewAnnotationRef | null;
+}
+
+/**
+ * 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.
+ *
+ * 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 = ({
+  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);
+      }
+    },
+
+    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;
+    }
+
+    // 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/camera/Camera.tsx

@@ -0,0 +1,344 @@
+import {
+  type Component,
+  type ComponentProps,
+  memo,
+  type Ref,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import {
+  findNodeHandle,
+  type NativeSyntheticEvent,
+  type ReactNativeElement,
+} from "react-native";
+
+import NativeCameraComponent from "./CameraNativeComponent";
+import NativeCameraModule from "./NativeCameraModule";
+import { type BaseProps } from "../../types/BaseProps";
+import type { LngLat } from "../../types/LngLat";
+import type { LngLatBounds } from "../../types/LngLatBounds";
+import type { ViewPadding } from "../../types/ViewPadding";
+
+/**
+ * Camera viewport configuration: zoom, bearing, pitch, and padding.
+ */
+export interface CameraOptions {
+  /**
+   * The zoom level of the map.
+   */
+  zoom?: number;
+
+  /**
+   * The bearing (rotation) of the map.
+   */
+  bearing?: number;
+
+  /**
+   * The pitch of the map.
+   */
+  pitch?: number;
+
+  /**
+   * The viewport padding in points.
+   */
+  padding?: ViewPadding;
+}
+
+/**
+ * Easing function used for camera animations.
+ */
+export type CameraEasing = undefined | "linear" | "ease" | "fly";
+
+/**
+ * Animation timing options for camera transitions.
+ */
+export interface CameraAnimationOptions {
+  /**
+   * The duration the map takes to animate to a new configuration.
+   */
+  duration?: number;
+
+  /**
+   * The easing or path the camera uses to animate to a new configuration.
+   */
+  easing?: CameraEasing;
+}
+
+/**
+ * Camera center coordinate options.
+ */
+export interface CameraCenterOptions {
+  /**
+   * Geographic center coordinates of the map
+   */
+  center: LngLat;
+}
+
+/**
+ * Camera bounds options.
+ */
+export interface CameraBoundsOptions {
+  /**
+   * The corners of a box around which the map should bound.
+   */
+  bounds: LngLatBounds;
+}
+
+/**
+ * Camera animation stop positioned by a center coordinate.
+ */
+export type CameraCenterStop = CameraOptions &
+  CameraAnimationOptions &
+  CameraCenterOptions;
+
+/**
+ * Camera animation stop positioned by geographic bounds.
+ */
+export type CameraBoundsStop = CameraOptions &
+  CameraAnimationOptions &
+  CameraBoundsOptions;
+
+/**
+ * A single camera animation stop — optionally positioned by center, bounds, or
+ * neither.
+ */
+export type CameraStop =
+  | (CameraOptions &
+      CameraAnimationOptions & {
+        center?: never;
+        bounds?: never;
+      })
+  | CameraCenterStop
+  | CameraBoundsStop;
+
+/**
+ * Initial camera state when the map first loads.
+ */
+export type InitialViewState =
+  | (CameraOptions & {
+      center?: never;
+      bounds?: never;
+    })
+  | (CameraOptions & CameraCenterOptions)
+  | (CameraOptions & CameraBoundsOptions);
+
+/**
+ * User location tracking mode.
+ */
+export type TrackUserLocation = "default" | "heading" | "course";
+
+/**
+ * Event emitted when the user location tracking mode changes.
+ */
+export type TrackUserLocationChangeEvent = {
+  trackUserLocation: TrackUserLocation | null;
+};
+
+export interface CameraRef {
+  /**
+   * Map camera will move to new coordinates at the same zoom level
+   *
+   * @example Jump to a position
+   * ```ts
+   * cameraRef.current?.jumpTo({ center: [lng, lat] });
+   * ```
+   */
+  jumpTo(options: CameraCenterOptions & CameraOptions): void;
+
+  /**
+   * Map camera will move to new coordinates at the same zoom level
+   *
+   * @example Eases camera to new location based on duration
+   * ```ts
+   * cameraRef.current?.easeTo({ center: [lng, lat], duration: 200 });
+   * ```
+   */
+  easeTo(
+    options: CameraCenterOptions & CameraOptions & CameraAnimationOptions,
+  ): void;
+
+  /**
+   * Map camera will fly to new coordinate
+   *
+   * @example
+   * ```ts
+   * cameraRef.current?.flyTo({ center: [lng, lat], duration: 12000 });
+   * ```
+   */
+  flyTo(
+    options: CameraCenterOptions & CameraOptions & CameraAnimationOptions,
+  ): void;
+
+  /**
+   * Map camera transitions to fit provided bounds
+   *
+   * @example
+   * ```ts
+   * cameraRef.current?.fitBounds(
+   *   [west, south, east, north],
+   *   { top: 20, right: 20, bottom: 20, left: 20 },
+   *   1000,
+   * );
+   * ```
+   */
+  fitBounds(
+    bounds: LngLatBounds,
+    options?: CameraOptions & CameraAnimationOptions,
+  ): void;
+
+  /**
+   * Map camera will zoom to specified level
+   *
+   * @param zoom - Zoom level that the map camera will animate too
+   * @param options - Options
+   *
+   * @example
+   * ```ts
+   * cameraRef.current?.zoomTo(16, { duration: 100 });
+   * ```
+   */
+  zoomTo(zoom: number, options?: CameraOptions & CameraAnimationOptions): void;
+
+  /**
+   * Map camera will perform updates based on provided config. Advanced use only!
+   *
+   * @param stop - Array of Camera stops
+   *
+   * @example
+   * ```ts
+   * cameraRef.current?.setStop({
+   *   centerCoordinate: [lng, lat],
+   *   zoomLevel: 16,
+   *   duration: 2000,
+   * });
+   * ```
+   *
+   * @example
+   * ```ts
+   * cameraRef.current?.setStop({
+   *   stops: [
+   *     { pitch: 45, duration: 200 },
+   *     { heading: 180, duration: 300 },
+   *   ],
+   * });
+   * ```
+   */
+  setStop(stop: CameraStop): Promise<void>;
+}
+
+export type CameraProps = BaseProps &
+  Partial<CameraStop> & {
+    /**
+     * Default view settings applied on camera
+     */
+    initialViewState?: InitialViewState;
+
+    /**
+     * Minimum zoom level of the map
+     */
+    minZoom?: number;
+
+    /**
+     * Maximum zoom level of the map
+     */
+    maxZoom?: number;
+
+    /**
+     * Restrict map panning so that the center is within these bounds
+     */
+    maxBounds?: LngLatBounds;
+
+    /**
+     * The mode used to track the user location on the map:
+     *
+     * - `undefined`: The user's location is not tracked
+     * - `"default"`: Centers the user's location
+     * - `"heading"`: Centers the user's location and uses the compass for bearing
+     * - `"course"`: Centers the user's location and uses the direction of travel for
+     *   bearing
+     *
+     * @defaultValue undefined
+     */
+    trackUserLocation?: TrackUserLocation;
+
+    /**
+     * Triggered when `trackUserLocation` changes
+     */
+    onTrackUserLocationChange?: (
+      event: NativeSyntheticEvent<TrackUserLocationChangeEvent>,
+    ) => void;
+
+    /**
+     * Ref to access Camera methods.
+     */
+    ref?: Ref<CameraRef>;
+  };
+
+/**
+ * Controls the viewport of the Map.
+ */
+export const Camera = memo(
+  ({
+    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/camera/CameraNativeComponent.ts

@@ -0,0 +1,65 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../types/codegen/UnsafeMixed";
+
+// START: NativeCameraStop
+type NativeViewPadding = {
+  top?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  right?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  bottom?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  left?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+};
+
+type NativeViewState = {
+  center?: CodegenTypes.Double[];
+
+  bounds?: CodegenTypes.Double[];
+
+  padding?: NativeViewPadding;
+  zoom?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  bearing?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  pitch?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+};
+
+type NativeEasingMode = "none" | "linear" | "ease" | "fly";
+
+type NativeCameraStop = NativeViewState & {
+  duration?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  easing?: CodegenTypes.WithDefault<NativeEasingMode, "none">;
+};
+// END: NativeCameraStop
+
+type NativeTrackUserLocationMode = "none" | "default" | "heading" | "course";
+
+type TrackUserLocationChangeEvent = {
+  trackUserLocation: UnsafeMixed<Exclude<
+    NativeTrackUserLocationMode,
+    "none"
+  > | null>;
+};
+
+export interface NativeProps extends ViewProps {
+  stop?: NativeCameraStop;
+
+  initialViewState?: NativeViewState;
+
+  minZoom?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  maxZoom?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  maxBounds?: CodegenTypes.Double[];
+
+  trackUserLocation?: CodegenTypes.WithDefault<
+    NativeTrackUserLocationMode,
+    "none"
+  >;
+
+  onTrackUserLocationChange?: CodegenTypes.DirectEventHandler<TrackUserLocationChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNCamera",
+) as HostComponent<NativeProps>;