@mapvina-com/mapvina-react-native 1.0.0

package/package.json

@@ -0,0 +1,191 @@
+{
+  "name": "@mapvina-com/mapvina-react-native",
+  "description": "React Native library for creating maps with MapVina Native for Android & iOS",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "MapVina",
+  "keywords": [
+    "maps",
+    "ios",
+    "android",
+    "mapvina",
+    "react-native",
+    "vietnam",
+    "map-sdk"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/mapvina/mapvina-react-native#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mapvina/mapvina-react-native.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mapvina/mapvina-react-native/issues"
+  },
+  "scripts": {
+    "format:clang-format": "find ios -type f \\( -name \"*.h\" -o -name \"*.m\" -o -name \"*.mm\" \\) -exec clang-format -i {} +",
+    "format:ktlint": "ktlint --format \"android/src/**/*.kt\"",
+    "lint": "yarn lint:tsc && yarn lint:eslint",
+    "lint:tsc": "tsc --project ./ && tsc --project ./src/__tests__",
+    "lint:eslint": "eslint ./ --max-warnings 0",
+    "lint:eslint:fix": "eslint ./ --fix",
+    "test": "jest",
+    "prepack": "cp ../LICENSE.md ./LICENSE.md && cp ../README.md ./README.md && bob build",
+    "postpack": "rm ./LICENSE.md && rm ./README.md"
+  },
+  "packageManager": "yarn@4.10.3",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "source": "./src/index.ts",
+  "types": "./lib/typescript/module/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "source": "./src/index.ts",
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "source": "./src/index.ts",
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./app.plugin.js": {
+      "require": {
+        "default": "./app.plugin.js"
+      }
+    },
+    "./plugin": {
+      "import": {
+        "types": "./lib/typescript/module/plugin/withMapVina.d.ts",
+        "default": "./lib/module/plugin/withMapVina.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/plugin/withMapVina.d.ts",
+        "default": "./lib/commonjs/plugin/withMapVina.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "app.plugin.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "MapVinaReactNativeSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "io.github.mapvina.reactnative"
+    },
+    "ios": {
+      "componentProvider": {
+        "MLRNCallout": "MLRNCalloutComponentView",
+        "MLRNCamera": "MLRNCameraComponentView",
+        "MLRNImages": "MLRNImagesComponentView",
+        "MLRNImageSource": "MLRNImageSourceComponentView",
+        "MLRNLayer": "MLRNLayerComponentView",
+        "MLRNMapView": "MLRNMapViewComponentView",
+        "MLRNNativeUserLocation": "MLRNNativeUserLocationComponentView",
+        "MLRNPointAnnotation": "MLRNPointAnnotationComponentView",
+        "MLRNRasterSource": "MLRNRasterSourceComponentView",
+        "MLRNRasterDEMSource": "MLRNRasterDEMSourceComponentView",
+        "MLRNGeoJSONSource": "MLRNGeoJSONSourceComponentView",
+        "MLRNVectorSource": "MLRNVectorSourceComponentView"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@expo/config-plugins": ">=54.0.0",
+    "@types/geojson": "^7946.0.0",
+    "@types/react": ">=19.1.0",
+    "react": ">=19.1.0",
+    "react-native": ">=0.80.0"
+  },
+  "peerDependenciesMeta": {
+    "@expo/config-plugins": {
+      "optional": true
+    },
+    "@types/geojson": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@mapvina/mapvina-gl-style-spec": "^1.0.0",
+    "@turf/distance": "^7.3.5",
+    "@turf/helpers": "^7.3.5",
+    "@turf/length": "^7.3.5",
+    "@turf/nearest-point-on-line": "^7.3.5"
+  },
+  "devDependencies": {
+    "@expo/config-plugins": "55.0.8",
+    "@react-native-community/cli": "20.1.3",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/jest-preset": "0.85.3",
+    "@semantic-release/changelog": "6.0.3",
+    "@semantic-release/exec": "7.1.0",
+    "@semantic-release/git": "10.0.1",
+    "@testing-library/react-native": "13.3.3",
+    "@types/geojson": "7946.0.16",
+    "@types/jest": "29.5.14",
+    "@types/node": "24.12.2",
+    "@types/react": "19.2.14",
+    "eslint": "9.39.4",
+    "eslint-config-universe": "15.0.4",
+    "jest": "29.7.0",
+    "prettier": "3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "0.41.0",
+    "react-test-renderer": "19.2.3",
+    "semantic-release": "25.0.3",
+    "snapshot-diff": "0.10.0",
+    "ts-node": "10.9.2",
+    "typescript": "5.9.3"
+  }
+}

package/src/assets/png.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const content: number;
+  export default content;
+}

package/src/components/annotations/LayerAnnotation.tsx

@@ -0,0 +1,74 @@
+import { type ReactNode, useEffect, useState } from "react";
+import {
+  Animated as RNAnimated,
+  Easing,
+  type NativeSyntheticEvent,
+} from "react-native";
+
+import type { BaseProps } from "../../types/BaseProps";
+import type { LngLat } from "../../types/LngLat";
+import type { PressEventWithFeatures } from "../../types/PressEventWithFeatures";
+import { Animated } from "../../utils/animated/Animated";
+import { AnimatedPoint } from "../../utils/animated/AnimatedPoint";
+
+export interface LayerAnnotationProps extends BaseProps {
+  id?: string;
+  lngLat: LngLat;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?: (x: number) => number;
+  onPress?: (event: NativeSyntheticEvent<PressEventWithFeatures>) => void;
+  children?: ReactNode;
+}
+
+type Data = AnimatedPoint | GeoJSON.Point;
+
+const isAnimated = (data: Data): data is AnimatedPoint =>
+  data instanceof AnimatedPoint;
+
+/**
+ * Convenience wrapper around a GeoJSONSource for a Point/LngLat, optionally
+ * animated.
+ */
+export const LayerAnnotation = ({
+  lngLat,
+  animated = false,
+  animationDuration = 1000,
+  animationEasingFunction = Easing.linear,
+  ...props
+}: LayerAnnotationProps) => {
+  const [data, setData] = useState<Data>(() => {
+    const point: GeoJSON.Point = {
+      type: "Point",
+      coordinates: lngLat,
+    };
+
+    if (animated) {
+      return new AnimatedPoint(point);
+    }
+
+    return point;
+  });
+
+  useEffect(() => {
+    if (isAnimated(data)) {
+      data.stopAnimation();
+      data
+        .timing({
+          toValue: { type: "Point", coordinates: lngLat },
+          easing: animationEasingFunction,
+          duration: animationDuration,
+        })
+        .start();
+    } else {
+      setData({ type: "Point", coordinates: lngLat });
+    }
+  }, [lngLat[0], lngLat[1]]);
+
+  return (
+    <Animated.GeoJSONSource
+      data={data as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      {...props}
+    />
+  );
+};

package/src/components/annotations/callout/Callout.tsx

@@ -0,0 +1,146 @@
+import { Children } from "react";
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  View,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+
+import CalloutNativeComponent from "./CalloutNativeComponent";
+
+const styles = StyleSheet.create({
+  animated: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 180,
+    zIndex: 9999999,
+  },
+  content: {
+    backgroundColor: "white",
+    borderColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 1,
+    padding: 8,
+    position: "relative",
+  },
+  tip: {
+    backgroundColor: "transparent",
+    borderBottomColor: "transparent",
+    borderBottomWidth: 0,
+    borderLeftColor: "transparent",
+    borderLeftWidth: 8,
+    borderRightColor: "transparent",
+    borderRightWidth: 8,
+    borderTopColor: "white",
+    borderTopWidth: 16,
+    elevation: 0,
+    marginTop: -2,
+    zIndex: 1000,
+  },
+  title: {
+    color: "black",
+    textAlign: "center",
+  },
+});
+
+export interface CalloutProps extends Omit<ViewProps, "style"> {
+  /**
+   * String that gets displayed in the default callout.
+   */
+  title?: string;
+
+  /**
+   * Style property for the CalloutNativeComponent.
+   *
+   * Use at your own risk.
+   */
+  style?: ViewStyle;
+
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  animatedStyle?: ViewStyle;
+
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+
+  /**
+   * Style property for the title in the content bubble.
+   */
+  titleStyle?: ViewStyle;
+}
+
+/**
+ * Callout that displays information about a selected annotation near the
+ * annotation.
+ */
+export const Callout = ({
+  title,
+  style,
+  animatedStyle,
+  contentStyle,
+  tipStyle,
+  titleStyle,
+  children,
+  testID,
+  ...props
+}: CalloutProps) => {
+  const calloutContent =
+    Children.count(children) > 0 ? (
+      <Animated.View
+        testID={testID ? `${testID}-animated` : undefined}
+        style={animatedStyle}
+        {...props}
+      >
+        {children}
+      </Animated.View>
+    ) : (
+      <Animated.View
+        testID={testID ? `${testID}-animated` : undefined}
+        style={[styles.animated, animatedStyle]}
+        {...props}
+      >
+        <View
+          testID={testID ? `${testID}-content` : undefined}
+          style={[styles.content, contentStyle]}
+        >
+          <Text
+            testID={testID ? `${testID}-title` : undefined}
+            style={[styles.title, titleStyle]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View
+          testID={testID ? `${testID}-tip` : undefined}
+          style={[styles.tip, tipStyle]}
+        />
+      </Animated.View>
+    );
+
+  return (
+    <CalloutNativeComponent
+      testID={testID}
+      style={[
+        {
+          position: "absolute",
+          zIndex: 999,
+          backgroundColor: "transparent",
+        },
+        style,
+      ]}
+    >
+      {calloutContent}
+    </CalloutNativeComponent>
+  );
+};

package/src/components/annotations/callout/CalloutNativeComponent.ts

@@ -0,0 +1,11 @@
+import {
+  codegenNativeComponent,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>(
+  "MLRNCallout",
+) as HostComponent<NativeProps>;

package/src/components/annotations/marker/Marker.tsx

@@ -0,0 +1,176 @@
+import {
+  Component,
+  type ComponentProps,
+  type ReactElement,
+  type Ref,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import {
+  type NativeSyntheticEvent,
+  Platform,
+  type ReactNativeElement,
+  View,
+  type ViewProps,
+} from "react-native";
+
+import MarkerViewNativeComponent from "./MarkerViewNativeComponent";
+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 {
+  ViewAnnotation,
+  type ViewAnnotationRef,
+} from "../view-annotation/ViewAnnotation";
+
+export type NativeMarkerRef = Component<
+  ComponentProps<typeof MarkerViewNativeComponent>
+> &
+  ReactNativeElement;
+
+/**
+ * Event emitted by a Marker on press.
+ */
+export type MarkerEvent = PressEvent & {
+  id: string;
+};
+
+export interface MarkerRef {
+  /**
+   * Returns the native ref for Reanimated v4 compatibility.
+   */
+  getAnimatableRef(): NativeMarkerRef | null;
+}
+
+export interface MarkerProps extends ViewProps {
+  /**
+   * A string that uniquely identifies the marker.
+   */
+  id?: string;
+
+  /**
+   * The center point (specified as a map coordinate) of the marker. See also
+   * #anchor.
+   */
+  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;
+
+  /**
+   * Manually selects/deselects the marker.
+   *
+   * @platform iOS
+   */
+  selected?: boolean;
+
+  /**
+   * This callback is fired when the marker is pressed.
+   */
+  onPress?: (event: NativeSyntheticEvent<MarkerEvent>) => void;
+
+  /**
+   * Expects one child - can be a View with multiple elements.
+   */
+  children: ReactElement;
+
+  /**
+   * Ref to access Marker methods.
+   */
+  ref?: Ref<MarkerRef>;
+}
+
+/**
+ * Marker allows you to place an interactive React Native View on the map.
+ *
+ * If you have static view consider using ViewAnnotation or SymbolLayer for
+ * better performance.
+ *
+ * Implemented through:
+ * - Android: Native Views placed on the map projection
+ * - iOS:
+ *   [MLNPointAnnotation](https://mapvina.com/mapvina-native/ios/latest/documentation/mapvina/mlnpointannotation/)
+ */
+export const Marker = ({
+  id,
+  anchor = "center",
+  offset,
+  ref,
+  ...props
+}: MarkerProps) => {
+  const nativeRef = useRef<NativeMarkerRef>(null);
+  const viewAnnotationRef = useRef<ViewAnnotationRef>(null);
+
+  const nativeAnchor = anchorToNative(anchor);
+  const nativeOffset = offset ? { x: offset[0], y: offset[1] } : undefined;
+
+  const frozenId = useFrozenId(id);
+
+  useImperativeHandle(ref, () => ({
+    // Reanimated v4 compatibility: createAnimatedComponent looks for _viewConfig but native has __viewConfig
+    getAnimatableRef: () => {
+      if (Platform.OS === "ios") {
+        return viewAnnotationRef.current?.getAnimatableRef() as NativeMarkerRef | null;
+      }
+      return 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;
+    },
+  }));
+
+  if (Platform.OS === "ios") {
+    return (
+      <ViewAnnotation
+        ref={viewAnnotationRef}
+        id={frozenId}
+        anchor={anchor}
+        offset={offset}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <MarkerViewNativeComponent
+      ref={nativeRef}
+      id={frozenId}
+      anchor={nativeAnchor}
+      offset={nativeOffset}
+      {...props}
+      style={[
+        { flex: 0, alignSelf: "flex-start", overflow: "visible" },
+        props.style,
+      ]}
+    >
+      <View
+        collapsable={false}
+        style={{ flex: 0, alignSelf: "flex-start", overflow: "visible" }}
+      >
+        {props.children}
+      </View>
+    </MarkerViewNativeComponent>
+  );
+};

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

@@ -0,0 +1,40 @@
+import {
+  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 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>(
+  "MLRNMarkerView",
+) as HostComponent<NativeProps>;