@maydon_tech/react-native-nitro-maps 0.1.4 → 0.2.0

package/nitrogen/generated/shared/json/NitroMapConfig.json

@@ -6,6 +6,7 @@
   "validAttributes": {
     "provider": true,
     "initialRegion": true,
+    "region": true,
     "showsUserLocation": true,
     "zoomEnabled": true,
     "scrollEnabled": true,
@@ -13,9 +14,18 @@
     "pitchEnabled": true,
     "mapType": true,
     "customMapStyle": true,
-    "showsMyLocationButton": true,
     "clusterConfig": true,
+    "mapPadding": true,
+    "showsTraffic": true,
+    "showsBuildings": true,
+    "showsCompass": true,
+    "minZoom": true,
+    "maxZoom": true,
     "darkMode": true,
+    "userTrackingMode": true,
+    "userLocationImage": true,
+    "userLocationSize": true,
+    "userLocationAnchor": true,
     "onPress": true,
     "onLongPress": true,
     "onMapReady": true,
@@ -26,7 +36,14 @@
     "onMarkerDrag": true,
     "onMarkerDragEnd": true,
     "onClusterPress": true,
+    "onPolylinePress": true,
+    "onPolygonPress": true,
+    "onCirclePress": true,
     "onError": true,
+    "onUserLocationChange": true,
+    "onUserTrackingModeChange": true,
+    "onUserLocationError": true,
+    "onMapIdle": true,
     "hybridRef": true
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maydon_tech/react-native-nitro-maps",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A high-performance React Native map library powered by Nitro Modules with support for Apple Maps, Google Maps, and Yandex Maps. Features native clustering, custom markers, and seamless cross-platform integration.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -43,7 +43,8 @@
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "test": "jest",
-    "release": "release-it --only-version"
+    "release": "release-it --only-version",
+    "prepublishOnly": "bob build && tsc"
   },
   "keywords": [
     "react-native",
@@ -68,8 +69,10 @@
     "@react-native/babel-preset": "0.83.0",
     "@react-native/eslint-config": "0.83.0",
     "@release-it/conventional-changelog": "^10.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19",
     "commitlint": "^19.8.1",
     "del-cli": "^6.0.0",
     "eslint": "^9.35.0",
@@ -83,13 +86,15 @@
     "react-native": "0.83.0",
     "react-native-builder-bob": "^0.40.17",
     "react-native-nitro-modules": "^0.31.10",
+    "react-test-renderer": "19.2.0",
     "release-it": "^19.0.4",
     "turbo": "^2.5.6",
     "typescript": "^5.9.2"
   },
+  "react-native": "./lib/module/index.js",
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
+    "react": ">=18.2.0",
+    "react-native": ">=0.72.0",
     "react-native-nitro-modules": "^0.31.10"
   },
   "workspaces": [
@@ -133,10 +138,36 @@
   },
   "jest": {
     "preset": "react-native",
+    "setupFiles": [
+      "./jest.setup.js"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
-    ]
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-nitro-modules)/)"
+    ],
+    "collectCoverageFrom": [
+      "src/utils/**/*.ts",
+      "src/hooks/**/*.ts",
+      "src/context/**/*.tsx",
+      "!src/**/*.nitro.ts"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 70,
+        "functions": 40,
+        "lines": 65,
+        "statements": 65
+      },
+      "./src/utils/": {
+        "branches": 90,
+        "functions": 100,
+        "lines": 90,
+        "statements": 90
+      }
+    }
   },
   "commitlint": {
     "extends": [

package/src/components/ImageMarker.tsx

@@ -1,11 +1,31 @@
 // src/components/ImageMarker.tsx
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useEffect } from 'react';
 import {
   useNitroMarker,
+  useMarkerHandlers,
   type CommonMarkerProps,
 } from '../hooks/useNitroMarker';
-import type { MarkerColor } from '../types/marker';
-import { Colors, parseColor, type ColorValue } from '../utils/colors';
+import {
+  Colors,
+  parseColor,
+  areColorsEqual,
+  type ColorValue,
+} from '../utils/colors';
+
+const MAX_IMAGE_DIMENSION = 512;
+const MIN_IMAGE_DIMENSION = 1;
+
+/** Clamp a dimension to [1, 512] and warn in __DEV__ if clamped */
+function clampDimension(value: number, name: string): number {
+  if (value >= MIN_IMAGE_DIMENSION && value <= MAX_IMAGE_DIMENSION)
+    return value;
+  if (__DEV__) {
+    console.warn(
+      `[ImageMarker] ${name}=${value} clamped to [${MIN_IMAGE_DIMENSION}, ${MAX_IMAGE_DIMENSION}].`
+    );
+  }
+  return Math.max(MIN_IMAGE_DIMENSION, Math.min(MAX_IMAGE_DIMENSION, value));
+}
 
 /**
  * Props for the ImageMarker component
@@ -73,7 +93,10 @@ const arePropsEqual = (
     prevProps.rotation !== nextProps.rotation ||
     prevProps.zIndex !== nextProps.zIndex ||
     prevProps.clusteringEnabled !== nextProps.clusteringEnabled ||
-    prevProps.animation !== nextProps.animation
+    prevProps.animation !== nextProps.animation ||
+    prevProps.animationDuration !== nextProps.animationDuration ||
+    prevProps.animateOnReappear !== nextProps.animateOnReappear ||
+    prevProps.accessibilityLabel !== nextProps.accessibilityLabel
   ) {
     return false;
   }
@@ -92,28 +115,7 @@ const arePropsEqual = (
     return false;
   }
 
-  const compareColors = (
-    a: ColorValue | undefined,
-    b: ColorValue | undefined
-  ) => {
-    if (!a && !b) return true;
-    if (!a || !b) return false;
-    // If both are strings, compare directly
-    if (typeof a === 'string' && typeof b === 'string') return a === b;
-    // If types differ, not equal
-    if (typeof a !== typeof b) return false;
-    // Both are MarkerColor objects
-    const aColor = a as MarkerColor;
-    const bColor = b as MarkerColor;
-    return (
-      aColor.r === bColor.r &&
-      aColor.g === bColor.g &&
-      aColor.b === bColor.b &&
-      aColor.a === bColor.a
-    );
-  };
-
-  if (!compareColors(prevProps.borderColor, nextProps.borderColor)) {
+  if (!areColorsEqual(prevProps.borderColor, nextProps.borderColor)) {
     return false;
   }
 
@@ -172,6 +174,9 @@ export const ImageMarker = memo(function ImageMarker({
   anchor = { x: 0.5, y: 0.5 },
   clusteringEnabled = true,
   animation = 'none',
+  animationDuration = 0.3,
+  animateOnReappear = true,
+  accessibilityLabel,
 
   // Events
   onPress,
@@ -179,18 +184,23 @@ export const ImageMarker = memo(function ImageMarker({
   onDrag,
   onDragEnd,
 }: ImageMarkerProps) {
-  // Build marker config
-
-  // Memoize handlers
-  const handlers = useMemo(
-    () => ({
-      onPress,
-      onDragStart,
-      onDrag,
-      onDragEnd,
-    }),
-    [onPress, onDragStart, onDrag, onDragEnd]
-  );
+  // Dev-mode validation: at least one image source is required
+  useEffect(() => {
+    if (__DEV__ && !imageUrl && !imageBase64) {
+      console.warn(
+        'ImageMarker: either imageUrl or imageBase64 must be provided. ' +
+          'The marker will render without an image.'
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Clamp dimensions to safe range
+  const clampedWidth = clampDimension(width, 'width');
+  const clampedHeight = clampDimension(height, 'height');
+
+  // Memoize handlers via shared hook
+  const handlers = useMarkerHandlers(onPress, onDragStart, onDrag, onDragEnd);
 
   // Build full marker data
   const buildMarkerData = useCallback(
@@ -210,14 +220,17 @@ export const ImageMarker = memo(function ImageMarker({
         image: {
           imageUrl,
           imageBase64,
-          width,
-          height,
+          width: clampedWidth,
+          height: clampedHeight,
           cornerRadius,
           borderWidth,
           borderColor: parseColor(borderColor) ?? Colors.gray,
         },
       },
+      accessibilityLabel,
       animation,
+      animationDuration,
+      animateOnReappear,
     }),
     [
       coordinate,
@@ -231,12 +244,15 @@ export const ImageMarker = memo(function ImageMarker({
       clusteringEnabled,
       imageUrl,
       imageBase64,
-      width,
-      height,
+      clampedWidth,
+      clampedHeight,
       cornerRadius,
       borderWidth,
       borderColor,
+      accessibilityLabel,
       animation,
+      animationDuration,
+      animateOnReappear,
     ]
   );
 

package/src/components/Marker.tsx

@@ -0,0 +1,161 @@
+// src/components/Marker.tsx
+import { memo, useCallback } from 'react';
+import {
+  useNitroMarker,
+  useMarkerHandlers,
+  type CommonMarkerProps,
+} from '../hooks/useNitroMarker';
+
+/**
+ * Props for the Marker component (default Google Maps pin)
+ */
+export type MarkerProps = CommonMarkerProps;
+
+// ============ Custom Memo Comparison ============
+const arePropsEqual = (
+  prevProps: MarkerProps,
+  nextProps: MarkerProps
+): boolean => {
+  // Compare primitive props
+  if (
+    prevProps.id !== nextProps.id ||
+    prevProps.title !== nextProps.title ||
+    prevProps.description !== nextProps.description ||
+    prevProps.draggable !== nextProps.draggable ||
+    prevProps.opacity !== nextProps.opacity ||
+    prevProps.rotation !== nextProps.rotation ||
+    prevProps.zIndex !== nextProps.zIndex ||
+    prevProps.clusteringEnabled !== nextProps.clusteringEnabled ||
+    prevProps.animation !== nextProps.animation ||
+    prevProps.animationDuration !== nextProps.animationDuration ||
+    prevProps.animateOnReappear !== nextProps.animateOnReappear ||
+    prevProps.accessibilityLabel !== nextProps.accessibilityLabel
+  ) {
+    return false;
+  }
+
+  // Compare coordinate
+  if (
+    prevProps.coordinate?.latitude !== nextProps.coordinate?.latitude ||
+    prevProps.coordinate?.longitude !== nextProps.coordinate?.longitude
+  ) {
+    return false;
+  }
+
+  // Compare anchor
+  if (
+    prevProps.anchor?.x !== nextProps.anchor?.x ||
+    prevProps.anchor?.y !== nextProps.anchor?.y
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Marker - Display the default Google Maps pin on the map
+ *
+ * The simplest marker component. Uses the standard red Google Maps pin.
+ * For custom images, use `<ImageMarker>`. For price tags, use `<PriceMarker>`.
+ *
+ * @example Basic marker
+ * ```tsx
+ * <Marker
+ *   coordinate={{ latitude: 41.29, longitude: 69.24 }}
+ *   title="Hello World"
+ *   description="This is a default marker"
+ * />
+ * ```
+ *
+ * @example Draggable marker
+ * ```tsx
+ * <Marker
+ *   coordinate={{ latitude: 41.30, longitude: 69.25 }}
+ *   draggable={true}
+ *   onDragEnd={(coord) => console.log('Dropped at:', coord)}
+ * />
+ * ```
+ */
+export const Marker = memo(function Marker({
+  // Required
+  coordinate,
+
+  // Identification
+  id,
+
+  // Common props
+  title,
+  description,
+  draggable = false,
+  opacity = 1,
+  rotation = 0,
+  zIndex = 0,
+  anchor = { x: 0.5, y: 1.0 },
+  clusteringEnabled = true,
+  animation = 'none',
+  animationDuration = 0.3,
+  animateOnReappear = true,
+  accessibilityLabel,
+
+  // Events
+  onPress,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+}: MarkerProps) {
+  // Memoize handlers via shared hook
+  const handlers = useMarkerHandlers(onPress, onDragStart, onDrag, onDragEnd);
+
+  // Build full marker data
+  const buildMarkerData = useCallback(
+    (markerId: string) => ({
+      id: markerId,
+      coordinate,
+      title,
+      description,
+      draggable,
+      opacity,
+      rotation,
+      zIndex,
+      anchor,
+      clusteringEnabled,
+      config: {
+        style: 'default' as const,
+      },
+      accessibilityLabel,
+      animation,
+      animationDuration,
+      animateOnReappear,
+    }),
+    [
+      coordinate,
+      title,
+      description,
+      draggable,
+      opacity,
+      rotation,
+      zIndex,
+      anchor,
+      clusteringEnabled,
+      accessibilityLabel,
+      animation,
+      animationDuration,
+      animateOnReappear,
+    ]
+  );
+
+  // Use shared marker hook
+  useNitroMarker({
+    idPrefix: 'marker',
+    providedId: id,
+    handlers,
+    buildMarkerData,
+  });
+
+  // Render nothing - marker is rendered natively
+  return null;
+}, arePropsEqual);
+
+export { arePropsEqual as areMarkerPropsEqual };
+export default Marker;

package/src/components/NitroCircle.tsx

@@ -0,0 +1,183 @@
+// src/components/NitroCircle.tsx
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useNitroCircle } from '../hooks/useNitroCircle';
+import type { Coordinate } from '../types/map';
+import type { MarkerColor } from '../types/marker';
+import {
+  parseColor,
+  areColorsEqual,
+  type ColorValue,
+  Colors,
+} from '../utils/colors';
+import { validateCoordinate } from '../utils/validation';
+import type { CircleData } from '../types/overlay';
+
+/**
+ * Props for the NitroCircle component
+ */
+export interface NitroCircleProps {
+  /** Unique identifier for the circle */
+  id?: string;
+
+  /**
+   * Center coordinate of the circle.
+   * @required
+   */
+  center: Coordinate;
+
+  /**
+   * Radius of the circle in meters.
+   * @required
+   */
+  radius: number;
+
+  /**
+   * Fill color of the circle (hex string like \"#00000040\" or MarkerColor object).
+   * Use 8-char hex for alpha: "#RRGGBBAA"
+   * @default MarkerColor { r: 0, g: 0, b: 0, a: 77 } (~30% opacity black)
+   */
+  fillColor?: ColorValue;
+
+  /**
+   * Stroke color of the circle border (hex string or MarkerColor object).
+   * @default '#000000'
+   */
+  strokeColor?: ColorValue;
+
+  /**
+   * Stroke width of the circle border in pixels.
+   * @default 1
+   */
+  strokeWidth?: number;
+
+  /**
+   * Z-index for controlling overlay stacking order.
+   * Higher values render on top.
+   * @default 0
+   */
+  zIndex?: number;
+
+  /**
+   * Whether this circle responds to tap events.
+   * When true, `onCirclePress` on `<NitroMap>` fires with this circle's ID.
+   * @default false
+   */
+  tappable?: boolean;
+
+  /**
+   * Accessibility label read by screen readers (VoiceOver / TalkBack).
+   */
+  accessibilityLabel?: string;
+}
+
+// ID generator — monotonic counter, unique within a JS runtime session
+let circleIdCounter = 0;
+const generateCircleId = (): string => `circle_${++circleIdCounter}`;
+
+// Default colors
+const defaultFillColor: MarkerColor = { r: 0, g: 0, b: 0, a: 77 };
+const defaultStrokeColor: MarkerColor = Colors.black;
+
+// ============ Custom Memo Comparison ============
+const arePropsEqual = (
+  prev: NitroCircleProps,
+  next: NitroCircleProps
+): boolean => {
+  if (
+    prev.id !== next.id ||
+    prev.radius !== next.radius ||
+    prev.strokeWidth !== next.strokeWidth ||
+    prev.zIndex !== next.zIndex ||
+    prev.tappable !== next.tappable ||
+    prev.accessibilityLabel !== next.accessibilityLabel
+  ) {
+    return false;
+  }
+
+  // Compare center
+  if (
+    prev.center.latitude !== next.center.latitude ||
+    prev.center.longitude !== next.center.longitude
+  ) {
+    return false;
+  }
+
+  if (!areColorsEqual(prev.fillColor, next.fillColor)) return false;
+  if (!areColorsEqual(prev.strokeColor, next.strokeColor)) return false;
+
+  return true;
+};
+
+/**
+ * NitroCircle - Draw a circle overlay on the map
+ *
+ * @example Basic circle
+ * ```tsx
+ * <NitroCircle
+ *   center={{ latitude: 41.31, longitude: 69.26 }}
+ *   radius={500}
+ *   fillColor="#4285F440"
+ *   strokeColor="#4285F4"
+ *   strokeWidth={2}
+ * />
+ * ```
+ */
+export const NitroCircle = memo(function NitroCircle({
+  id,
+  center,
+  radius,
+  fillColor,
+  strokeColor,
+  strokeWidth = 1,
+  zIndex = 0,
+  tappable = false,
+  accessibilityLabel,
+}: NitroCircleProps) {
+  useEffect(() => {
+    if (__DEV__) {
+      if (radius <= 0) {
+        console.warn(
+          'NitroCircle: radius must be a positive number. ' +
+            `Received ${radius}.`
+        );
+      }
+      validateCoordinate(center, 'NitroCircle center');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const circleId = useRef(id || generateCircleId()).current;
+
+  const buildCircleData = useCallback(
+    (): CircleData => ({
+      id: circleId,
+      center,
+      radius,
+      fillColor: parseColor(fillColor) ?? defaultFillColor,
+      strokeColor: parseColor(strokeColor) ?? defaultStrokeColor,
+      strokeWidth,
+      zIndex,
+      tappable,
+      accessibilityLabel,
+    }),
+    [
+      circleId,
+      center,
+      radius,
+      fillColor,
+      strokeColor,
+      strokeWidth,
+      zIndex,
+      tappable,
+      accessibilityLabel,
+    ]
+  );
+
+  useNitroCircle(buildCircleData);
+
+  return null;
+},
+arePropsEqual);
+
+export { arePropsEqual as areCirclePropsEqual };
+export default NitroCircle;