@mapvina-com/mapvina-react-native 1.0.0

package/src/components/camera/NativeCameraModule.ts

@@ -0,0 +1,38 @@
+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 = {
+  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
+
+export interface Spec extends TurboModule {
+  setStop(reactTag: CodegenTypes.Int32, stop: NativeCameraStop): Promise<void>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>("MLRNCameraModule");

package/src/components/images/Images.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+import {
+  Image,
+  type ImageRequireSource,
+  type ImageSourcePropType,
+  type NativeSyntheticEvent,
+} from "react-native";
+
+import ImagesNativeComponent, {
+  type NativeImageEntry,
+} from "./ImagesNativeComponent";
+import "./NativeImagesModule";
+import { type BaseProps } from "../../types/BaseProps";
+
+/**
+ * An image source with optional SDF (Signed Distance Field) rendering mode.
+ */
+export type ImageSourceWithSdf = {
+  source: ImageSourcePropType;
+  sdf?: boolean;
+};
+
+/**
+ * A map image entry: a URL string, a native asset require, or an
+ * {@link ImageSourceWithSdf} object.
+ */
+export type ImageEntry = string | ImageRequireSource | ImageSourceWithSdf;
+
+export interface ImagesProps extends BaseProps {
+  /**
+   * Specifies the images in key-value pairs required for the style. Keys are
+   * names used in style expressions (e.g., "customIcon").
+   *
+   * Values provide a `source`, which can be one of the following types:
+   * - A string URL: `"https://example.com/icon.png"`
+   * - A native asset name: `"pin"` (from xcassets on iOS or drawable on Android)
+   * - A require/import: `require('./icon.png')`
+   *
+   * If your image supports SDF, you can set the `sdf` property to true:
+   * `{ source: require('./sdf-icon.png'), sdf: true }`
+   *
+   * @example
+   * ```tsx
+   * <Images
+   *   images={{
+   *     remote: "https://example.com/marker.png",
+   *     require: require("./marker.png"),
+   *     native: "marker",
+   *     sdf: { source: require("./sdf-marker.png"), sdf: true },
+   *   }}
+   * />;
+   * ```
+   */
+  images: { [key: string]: ImageEntry };
+
+  /**
+   * Called when a layer references an image that is not present in the style. You
+   * can use this to dynamically add images on demand.
+   *
+   * @example
+   * ```tsx
+   * <Images
+   *   images={images}
+   *   onImageMissing={(event) => {
+   *     setImages((prev) => ({ ...prev, [event.nativeEvent.image]: fallbackIcon }));
+   *   }}
+   * />;
+   * ```
+   */
+  onImageMissing?: (event: NativeSyntheticEvent<{ image: string }>) => void;
+}
+
+/**
+ * Images defines the images used in Symbol layers.
+ *
+ * Use this component to add images to the map style that can be referenced by
+ * symbol layers using the `iconImage` property.
+ */
+export const Images = ({ testID, images, onImageMissing }: ImagesProps) => {
+  const nativeImages = useMemo(() => {
+    const result: Record<string, NativeImageEntry> = {};
+
+    Object.entries(images).forEach(([imageName, value]) => {
+      if (typeof value === "string") {
+        result[imageName] = {
+          uri: value,
+        };
+      } else {
+        const resolved = Image.resolveAssetSource(
+          typeof value === "number" ? value : value.source,
+        );
+
+        result[imageName] = {
+          uri: resolved.uri,
+          scale: resolved.scale,
+          sdf: typeof value === "object" ? value.sdf : false,
+        };
+      }
+    });
+
+    return result;
+  }, [images]);
+
+  return (
+    <ImagesNativeComponent
+      testID={testID}
+      images={nativeImages}
+      onImageMissing={onImageMissing}
+    />
+  );
+};

package/src/components/images/ImagesNativeComponent.ts

@@ -0,0 +1,27 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../types/codegen/UnsafeMixed";
+
+type ImageMissingEvent = {
+  image: string;
+};
+
+export type NativeImageEntry = {
+  uri: string;
+  scale?: CodegenTypes.Double;
+  sdf?: boolean;
+};
+
+export interface NativeProps extends ViewProps {
+  images?: UnsafeMixed<Record<string, NativeImageEntry>>;
+  onImageMissing?: CodegenTypes.DirectEventHandler<ImageMissingEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNImages",
+) as HostComponent<NativeProps>;

package/src/components/images/NativeImagesModule.ts

@@ -0,0 +1,11 @@
+import { Platform, type TurboModule } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {}
+
+const imagesModule =
+  Platform.OS === "ios"
+    ? TurboModuleRegistry.getEnforcing<Spec>("MLRNImagesModule")
+    : null;
+
+export default imagesModule;

package/src/components/layer/Layer.tsx

@@ -0,0 +1,278 @@
+import type {
+  FilterSpecification,
+  LayerSpecification,
+} from "@mapvina/mapvina-gl-style-spec";
+import { useMemo } from "react";
+
+import LayerNativeComponent from "./LayerNativeComponent";
+import { useFrozenId } from "../../hooks/useFrozenId";
+import { type BaseProps } from "../../types/BaseProps";
+import {
+  type BackgroundLayerStyle,
+  type CircleLayerStyle,
+  type FillExtrusionLayerStyle,
+  type FillLayerStyle,
+  type HeatmapLayerStyle,
+  type LineLayerStyle,
+  type RasterLayerStyle,
+  type SymbolLayerStyle,
+} from "../../types/MapVinaRNStyles";
+import { transformStyle } from "../../utils/StyleValue";
+import { mergeStyleProps } from "../../utils/convertStyleSpec";
+import { getNativeFilter } from "../../utils/getNativeFilter";
+
+let deprecationWarned = false;
+
+/**
+ * Additional props specific to @mapvina/mapvina-react-native.
+ */
+interface BaseLayerProps extends BaseProps {
+  /**
+   * The layer will appear under this layer.
+   */
+  beforeId?: string;
+
+  /**
+   * The layer will appear above this layer.
+   */
+  afterId?: string;
+
+  /**
+   * Inserts the layer at the specified index.
+   */
+  layerIndex?: number;
+}
+
+// Utility types following react-map-gl pattern
+// See: https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230
+type OptionalId<T> = T extends { id: string }
+  ? Omit<T, "id"> & { id?: string }
+  : T;
+type OptionalSource<T> = T extends { source: string }
+  ? Omit<T, "source"> & { source?: string }
+  : T;
+
+/**
+ * Base layer props from style spec with optional `id`/`source`.
+ */
+type StyleSpecLayerProps = OptionalSource<OptionalId<LayerSpecification>> &
+  BaseLayerProps & {
+    /** @deprecated Use `layout`/`paint` props instead. */
+    style?: never;
+  };
+
+/**
+ * Common props shared by all layer types.
+ *
+ * @deprecated Use `paint` and `layout` props instead of `style`. The `style` prop be removed in v12.
+ */
+interface LegacyBaseLayerProps extends BaseLayerProps {
+  /**
+   * A string that uniquely identifies the layer in the style.
+   */
+  id?: string;
+
+  /**
+   * The minimum zoom at which the layer gets parsed and appears.
+   */
+  minzoom?: number;
+
+  /**
+   * The maximum zoom at which the layer gets parsed and appears.
+   */
+  maxzoom?: number;
+
+  paint?: never;
+
+  layout?: never;
+}
+
+/**
+ * @deprecated Use `LayerProps` instead.
+ */
+export interface SourceLayerProps extends LegacyBaseLayerProps {
+  source?: string;
+  "source-layer"?: string;
+  filter?: FilterSpecification;
+}
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type BackgroundLayerProps = LegacyBaseLayerProps & {
+  type: "background";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: BackgroundLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type FillLayerProps = SourceLayerProps & {
+  type: "fill";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: FillLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type LineLayerProps = SourceLayerProps & {
+  type: "line";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: LineLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type SymbolLayerProps = SourceLayerProps & {
+  type: "symbol";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: SymbolLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type CircleLayerProps = SourceLayerProps & {
+  type: "circle";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: CircleLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type HeatmapLayerProps = SourceLayerProps & {
+  type: "heatmap";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: HeatmapLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type FillExtrusionLayerProps = SourceLayerProps & {
+  type: "fill-extrusion";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: FillExtrusionLayerStyle;
+};
+
+/**
+ * @deprecated Use `layout`/`paint` instead of `style` prop.
+ */
+export type RasterLayerProps = SourceLayerProps & {
+  type: "raster";
+  /** @deprecated Use `layout`/`paint` props instead. */
+  style?: RasterLayerStyle;
+};
+
+export type LayerProps =
+  | StyleSpecLayerProps
+  | FillLayerProps
+  | LineLayerProps
+  | SymbolLayerProps
+  | CircleLayerProps
+  | HeatmapLayerProps
+  | FillExtrusionLayerProps
+  | RasterLayerProps
+  | BackgroundLayerProps;
+
+/**
+ * Layer is a style layer that renders geospatial data on the map.
+ *
+ * Follow the [MapVina Style
+ * Spec](https://mapvina.com/mapvina-style-spec/layers/) for Layer
+ * definitions.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Layer
+ *   type="fill"
+ *   id="parks"
+ *   source="parks-source"
+ *   paint={{ "fill-color": "green", "fill-opacity": 0.5 }}
+ *   layout={{ visibility: "visible" }}
+ * />;
+ * ```
+ *
+ * @example Using Expressions
+ * ```tsx
+ * <Layer
+ *   type="fill"
+ *   id="parks"
+ *   source="parks-source"
+ *   paint={{
+ *     "fill-color": [
+ *       "interpolate",
+ *       ["linear"],
+ *       ["get", "elevation"],
+ *       0,
+ *       "blue",
+ *       100,
+ *       "red",
+ *     ],
+ *   }}
+ * />;
+ * ```
+ */
+export const Layer = ({ id, ...props }: LayerProps) => {
+  const frozenId = useFrozenId(id);
+
+  const nativeProps = useMemo(() => {
+    const {
+      type: layerType,
+      "source-layer": sourceLayer,
+      filter,
+      style,
+      paint,
+      layout,
+      beforeId,
+      afterId,
+      layerIndex,
+      ...rest
+    } = {
+      "source-layer": undefined,
+      filter: undefined,
+      paint: undefined,
+      layout: undefined,
+      ...props,
+    };
+
+    if (__DEV__ && style && !deprecationWarned) {
+      deprecationWarned = true;
+
+      console.warn(
+        "[@mapvina/mapvina-react-native] The `style` prop is deprecated. " +
+          "Use `paint` and `layout` props instead. `style` will be removed in v12.",
+      );
+    }
+
+    // Merge paint/layout (new API) with style (deprecated API)
+    const mergedStyle = mergeStyleProps(
+      paint as Record<string, unknown> | undefined,
+      layout as Record<string, unknown> | undefined,
+      style,
+    );
+
+    return {
+      ...rest,
+      layerType,
+      sourceLayer,
+      beforeId,
+      afterId,
+      layerIndex,
+      filter: getNativeFilter(filter as FilterSpecification),
+      reactStyle: transformStyle(mergedStyle),
+    };
+  }, [props]);
+
+  return (
+    <LayerNativeComponent
+      id={frozenId}
+      testID={`mlrn-${props.type}-layer`}
+      {...nativeProps}
+    />
+  );
+};

package/src/components/layer/LayerNativeComponent.ts

@@ -0,0 +1,43 @@
+import {
+  codegenNativeComponent,
+  CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type { UnsafeMixed } from "../../types/codegen/UnsafeMixed";
+import type { StyleValue } from "../../utils/StyleValue";
+
+export interface NativeProps extends ViewProps {
+  id: string;
+  layerType?: CodegenTypes.WithDefault<
+    | "background"
+    | "circle"
+    | "color-relief"
+    | "fill"
+    | "fill-extrusion"
+    | "heatmap"
+    | "hillshade"
+    | "line"
+    | "raster"
+    | "symbol",
+    "background"
+  >;
+
+  source?: string;
+  sourceLayer?: string;
+
+  afterId?: string;
+  beforeId?: string;
+  layerIndex?: CodegenTypes.Int32;
+
+  minzoom?: CodegenTypes.Double;
+  maxzoom?: CodegenTypes.Double;
+
+  filter?: UnsafeMixed<unknown[]>;
+  reactStyle?: UnsafeMixed<Record<string, StyleValue>>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNLayer",
+) as HostComponent<NativeProps>;

package/src/components/map/AndroidTextureMapViewNativeComponent.ts

@@ -0,0 +1,109 @@
+// DO NOT MODIFY
+// This file is auto-generated from package/src/components/map/MapViewNativeComponent.ts
+
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ColorValue,
+  type ViewProps,
+} from "react-native";
+
+import type { LightLayerStyle } from "../../types/MapVinaRNStyles";
+import type { UnsafeMixed } from "../../types/codegen/UnsafeMixed";
+
+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 NativeOrnamentViewPosition = {
+  top?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  right?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  bottom?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  left?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+};
+
+type NativePressEvent = {
+  lngLat: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
+  point: UnsafeMixed<[x: CodegenTypes.Double, y: CodegenTypes.Double]>;
+};
+
+type NativeViewStateEvent = {
+  center: UnsafeMixed<
+    [longitude: CodegenTypes.Double, latitude: CodegenTypes.Double]
+  >;
+  zoom: CodegenTypes.Double;
+  bearing: CodegenTypes.Double;
+  pitch: CodegenTypes.Double;
+  bounds: UnsafeMixed<
+    [
+      west: CodegenTypes.Double,
+      south: CodegenTypes.Double,
+      east: CodegenTypes.Double,
+      north: CodegenTypes.Double,
+    ]
+  >;
+
+  animated: boolean;
+  userInteraction: boolean;
+};
+
+export interface NativeProps extends ViewProps {
+  mapStyle: string;
+  light?: UnsafeMixed<LightLayerStyle>;
+  contentInset?: NativeViewPadding;
+  preferredFramesPerSecond?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+
+  dragPan?: CodegenTypes.WithDefault<boolean, true>;
+  touchZoom?: CodegenTypes.WithDefault<boolean, true>;
+  doubleTapZoom?: CodegenTypes.WithDefault<boolean, true>;
+  doubleTapHoldZoom?: CodegenTypes.WithDefault<boolean, true>;
+  touchRotate?: CodegenTypes.WithDefault<boolean, true>;
+  touchPitch?: CodegenTypes.WithDefault<boolean, true>;
+
+  tintColor?: ColorValue | undefined;
+
+  attribution?: CodegenTypes.WithDefault<boolean, true>;
+  attributionPosition?: NativeOrnamentViewPosition;
+
+  logo?: CodegenTypes.WithDefault<boolean, true>;
+  logoPosition?: NativeOrnamentViewPosition;
+
+  compass?: CodegenTypes.WithDefault<boolean, false>;
+  compassPosition?: NativeOrnamentViewPosition;
+  compassHiddenFacingNorth?: CodegenTypes.WithDefault<boolean, true>;
+
+  scaleBar?: CodegenTypes.WithDefault<boolean, false>;
+  scaleBarPosition?: NativeOrnamentViewPosition;
+
+  onPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
+  onLongPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
+
+  onRegionWillChange?: CodegenTypes.DirectEventHandler<NativeViewStateEvent>;
+  onRegionIsChanging?: CodegenTypes.DirectEventHandler<NativeViewStateEvent>;
+  onRegionDidChange?: CodegenTypes.DirectEventHandler<NativeViewStateEvent>;
+
+  onWillStartLoadingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishLoadingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFailLoadingMap?: CodegenTypes.DirectEventHandler<null>;
+
+  onWillStartRenderingFrame?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingFrame?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingFrameFully?: CodegenTypes.DirectEventHandler<null>;
+
+  onWillStartRenderingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingMap?: CodegenTypes.DirectEventHandler<null>;
+  onDidFinishRenderingMapFully?: CodegenTypes.DirectEventHandler<null>;
+
+  onDidFinishLoadingStyle?: CodegenTypes.DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNAndroidTextureMapView",
+  { excludedPlatforms: ["iOS"] },
+) as HostComponent<NativeProps>;