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

package/src/components/camera/Camera.tsx

@@ -0,0 +1,311 @@
+import {
+  type Component,
+  type ComponentProps,
+  forwardRef,
+  memo,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import {
+  findNodeHandle,
+  type NativeMethods,
+  type NativeSyntheticEvent,
+} from "react-native";
+
+import NativeCameraComponent from "./CameraNativeComponent";
+import NativeCameraModule from "./NativeCameraModule";
+import { type BaseProps } from "../../types/BaseProps";
+import type { Bounds } from "../../types/Bounds";
+import type { ViewPadding } from "../../types/ViewPadding";
+
+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;
+}
+
+export type CameraEasing = undefined | "linear" | "ease" | "fly";
+
+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;
+}
+
+export interface CameraCenterOptions {
+  longitude: number;
+  latitude: number;
+}
+
+export interface CameraBoundsOptions {
+  /**
+   * The corners of a box around which the map should bound.
+   */
+  bounds: Bounds;
+}
+
+export type CameraCenterStop = CameraOptions &
+  CameraAnimationOptions &
+  CameraCenterOptions;
+
+export type CameraBoundsStop = CameraOptions &
+  CameraAnimationOptions &
+  CameraBoundsOptions;
+
+export type CameraStop =
+  | (CameraOptions &
+      CameraAnimationOptions & {
+        longitude?: never;
+        latitude?: never;
+        bounds?: never;
+      })
+  | CameraCenterStop
+  | CameraBoundsStop;
+
+export type InitialViewState =
+  | (CameraOptions & {
+      longitude?: never;
+      latitude?: never;
+      bounds?: never;
+    })
+  | (CameraOptions & CameraCenterOptions)
+  | (CameraOptions & CameraBoundsOptions);
+
+export interface CameraRef {
+  /**
+   * Map camera will move to new coordinate at the same zoom level
+   *
+   * @example
+   * cameraRef.current?.easeTo([lng, lat], 200) // eases camera to new location based on duration
+   * cameraRef.current?.easeTo([lng, lat]) // snaps camera to new location without any easing
+   *
+   *  @param options.center Coordinates that map camera will move too
+   *  @param options.duration Duration of camera animation
+   */
+  jumpTo(options: { center: CameraCenterOptions } & CameraOptions): void;
+
+  /**
+   * Map camera will move to new coordinate at the same zoom level
+   *
+   * @example
+   * cameraRef.current?.easeTo([lng, lat], 200) // eases camera to new location based on duration
+   * cameraRef.current?.easeTo([lng, lat]) // snaps camera to new location without any easing
+   *
+   *  @param options.center Coordinates that map camera will move too
+   *  @param options.duration Duration of camera animation
+   */
+  easeTo(
+    options: { center: CameraCenterOptions } & CameraOptions &
+      CameraAnimationOptions,
+  ): void;
+
+  /**
+   * Map camera will fly to new coordinate
+   *
+   * @example
+   * cameraRef.current?.flyTo([lng, lat])
+   * cameraRef.current?.flyTo([lng, lat], 12000)
+   *
+   *  @param options.center Coordinates that map camera will jump to
+   *  @param options.duration Duration of camera animation
+   */
+  flyTo(
+    options: { center: CameraCenterOptions } & CameraOptions &
+      CameraAnimationOptions,
+  ): void;
+
+  /**
+   * Map camera transitions to fit provided bounds
+   *
+   * @example
+   * cameraRef.current?.fitBounds([west, south, east, north])
+   * cameraRef.current?.fitBounds([west, south, east, north], { top: 20, right: 20, bottom: 20, left: 20 }, 1000)
+   *
+   * @param bounds
+   * @param options
+   * @param options.padding Padding for the bounds
+   * @param options.duration Duration of camera animation
+   */
+  fitBounds(
+    bounds: Bounds,
+    options?: CameraOptions & CameraAnimationOptions,
+  ): void;
+
+  /**
+   * Map camera will zoom to specified level
+   *
+   * @example
+   * cameraRef.current?.zoomTo(16)
+   * cameraRef.current?.zoomTo(16, 100)
+   *
+   * @param zoom Zoom level that the map camera will animate too
+   * @param options Options
+   * @param options.duration Duration of camera movement
+   */
+  zoomTo(zoom: number, options?: CameraOptions & CameraAnimationOptions): void;
+
+  /**
+   * Map camera will perform updates based on provided config. Advanced use only!
+   *
+   * @example
+   * cameraRef.current?.setStop({
+   *   centerCoordinate: [lng, lat],
+   *   zoomLevel: 16,
+   *   duration: 2000,
+   * })
+   *
+   * cameraRef.current?.setStop({
+   *   stops: [
+   *     { pitch: 45, duration: 200 },
+   *     { heading: 180, duration: 300 },
+   *   ]
+   * })
+   *
+   *  @param stop Array of Camera stops
+   */
+  setStop(stop: CameraStop): Promise<void>;
+}
+
+export type TrackUserLocation = "default" | "heading" | "course";
+
+export type TrackUserLocationChangeEvent = {
+  trackUserLocation?: TrackUserLocation;
+};
+
+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?: Bounds;
+
+    /**
+     * 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
+     *
+     * @default undefined
+     */
+    trackUserLocation?: TrackUserLocation;
+
+    /**
+     * Triggered when `trackUserLocation` changes
+     */
+    onTrackUserLocationChange?: (
+      event: NativeSyntheticEvent<TrackUserLocationChangeEvent>,
+    ) => void;
+  };
+
+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, easing = "ease", duration = 500, ...options }) =>
+          setStop({ ...options, ...center, easing, duration }),
+
+        flyTo: ({ center, easing = "fly", duration = 2000, ...options }) =>
+          setStop({ ...options, ...center, easing, duration }),
+
+        fitBounds: (
+          bounds,
+          { easing = "fly", duration = 2000, ...options } = {},
+        ) => setStop({ ...options, bounds, easing, duration }),
+
+        zoomTo: (zoom, { easing = "ease", duration = 500, ...options } = {}) =>
+          setStop({ ...options, zoom, easing, duration }),
+      }));
+
+      return (
+        <NativeCameraComponent
+          ref={nativeRef}
+          testID={testID}
+          stop={stop}
+          initialViewState={initialViewState}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          maxBounds={maxBounds}
+          trackUserLocation={trackUserLocation}
+          onTrackUserLocationChange={
+            onTrackUserLocationChange as (
+              event: NativeSyntheticEvent<{ trackUserLocation?: string }>,
+            ) => void
+          }
+        />
+      );
+    },
+  ),
+);

package/src/components/camera/CameraNativeComponent.ts

@@ -0,0 +1,61 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+// 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 = {
+  longitude?: CodegenTypes.WithDefault<CodegenTypes.Double, -360>;
+  latitude?: CodegenTypes.WithDefault<CodegenTypes.Double, -360>;
+
+  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?: string;
+};
+
+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>;

package/src/components/camera/NativeCameraModule.ts

@@ -0,0 +1,39 @@
+import {
+  TurboModuleRegistry,
+  type CodegenTypes,
+  type TurboModule,
+} from "react-native";
+
+// 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 = {
+  longitude?: CodegenTypes.WithDefault<CodegenTypes.Double, -360>;
+  latitude?: CodegenTypes.WithDefault<CodegenTypes.Double, -360>;
+
+  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
+
+export interface Spec extends TurboModule {
+  setStop(reactTag: CodegenTypes.Int32, stop: NativeCameraStop): Promise<void>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>("MLRNCameraModule");

package/src/components/layers/BackgroundLayer.tsx

@@ -0,0 +1,48 @@
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import {
+  useAbstractLayer,
+  type BaseLayerProps,
+  type NativeBaseProps,
+} from "../../hooks/useAbstractLayer";
+import { type BaseProps } from "../../types/BaseProps";
+import { type BackgroundLayerStyle } from "../../types/MapLibreRNStyles";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNBackgroundLayer";
+
+export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: BackgroundLayerStyle;
+}
+
+interface NativeProps
+  extends Omit<BackgroundLayerProps, "style">,
+    NativeBaseProps {}
+
+const MLRNBackgroundLayer =
+  requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
+
+export const BackgroundLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: BackgroundLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    BackgroundLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return (
+    <MLRNBackgroundLayer
+      testID="mlrnBackgroundLayer"
+      ref={setNativeLayer}
+      {...baseProps}
+    />
+  );
+};

package/src/components/layers/CircleLayer.tsx

@@ -0,0 +1,50 @@
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import {
+  useAbstractLayer,
+  type BaseLayerProps,
+  type NativeBaseProps,
+} from "../../hooks/useAbstractLayer";
+import { type BaseProps } from "../../types/BaseProps";
+import { type CircleLayerStyle } from "../../types/MapLibreRNStyles";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNCircleLayer";
+
+export interface CircleLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: CircleLayerStyle;
+}
+
+interface NativeProps
+  extends Omit<CircleLayerProps, "style">,
+    NativeBaseProps {}
+
+const MLRNCircleLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * CircleLayer is a style layer that renders one or more filled circles on the map.
+ */
+export const CircleLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: CircleLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    CircleLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return (
+    <MLRNCircleLayer
+      testID="mlrnCircleLayer"
+      ref={setNativeLayer}
+      {...baseProps}
+    />
+  );
+};

package/src/components/layers/FillExtrusionLayer.tsx

@@ -0,0 +1,45 @@
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import {
+  useAbstractLayer,
+  type BaseLayerProps,
+  type NativeBaseProps,
+} from "../../hooks/useAbstractLayer";
+import { type BaseProps } from "../../types/BaseProps";
+import { type FillExtrusionLayerStyle } from "../../types/MapLibreRNStyles";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNFillExtrusionLayer";
+
+export interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: FillExtrusionLayerStyle;
+}
+
+interface NativeProps
+  extends Omit<FillExtrusionLayerProps, "style">,
+    NativeBaseProps {}
+
+const MLRNFillExtrusionLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
+ */
+export const FillExtrusionLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: FillExtrusionLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    FillExtrusionLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <MLRNFillExtrusionLayer ref={setNativeLayer} {...baseProps} />;
+};

package/src/components/layers/FillLayer.tsx

@@ -0,0 +1,42 @@
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import {
+  useAbstractLayer,
+  type BaseLayerProps,
+  type NativeBaseProps,
+} from "../../hooks/useAbstractLayer";
+import { type BaseProps } from "../../types/BaseProps";
+import { type FillLayerStyle } from "../../types/MapLibreRNStyles";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNFillLayer";
+
+export interface FillLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: FillLayerStyle;
+}
+
+interface NativeProps extends Omit<FillLayerProps, "style">, NativeBaseProps {}
+
+const MLRNFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
+ */
+export const FillLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: FillLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    FillLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <MLRNFillLayer ref={setNativeLayer} {...baseProps} />;
+};

package/src/components/layers/HeatmapLayer.tsx

@@ -0,0 +1,44 @@
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import {
+  type BaseLayerProps,
+  type NativeBaseProps,
+  useAbstractLayer,
+} from "../../hooks/useAbstractLayer";
+import { type BaseProps } from "../../types/BaseProps";
+import { type HeatmapLayerStyle } from "../../types/MapLibreRNStyles";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNHeatmapLayer";
+
+export interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: HeatmapLayerStyle;
+}
+
+interface NativeProps
+  extends Omit<HeatmapLayerProps, "style">,
+    NativeBaseProps {}
+
+const MLRNHeatmapLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+/**
+ * HeatmapLayer is a style layer that renders one or more filled circles on the map.
+ */
+export const HeatmapLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: HeatmapLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    HeatmapLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <MLRNHeatmapLayer ref={setNativeLayer} {...baseProps} />;
+};

package/src/components/layers/LineLayer.tsx

@@ -0,0 +1,43 @@
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import {
+  useAbstractLayer,
+  type BaseLayerProps,
+  type NativeBaseProps,
+} from "../../hooks/useAbstractLayer";
+import { type BaseProps } from "../../types/BaseProps";
+import { type LineLayerStyle } from "../../types/MapLibreRNStyles";
+
+const MLRNModule = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNLineLayer";
+
+export interface LineLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: LineLayerStyle;
+}
+
+interface NativeProps extends Omit<LineLayerProps, "style">, NativeBaseProps {}
+
+const MLRNLineLayer =
+  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
+
+/**
+ * LineLayer is a style layer that renders one or more stroked polylines on the map.
+ */
+export const LineLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
+  ...props
+}: LineLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    LineLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <MLRNLineLayer ref={setNativeLayer} {...baseProps} />;
+};