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

package/src/components/NitroPolygon.tsx

@@ -0,0 +1,229 @@
+// src/components/NitroPolygon.tsx
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useNitroPolygon } from '../hooks/useNitroPolygon';
+import type { Coordinate } from '../types/map';
+import type { MarkerColor } from '../types/marker';
+import {
+  parseColor,
+  areColorsEqual,
+  type ColorValue,
+  Colors,
+} from '../utils/colors';
+import { validateCoordinates } from '../utils/validation';
+import type { PolygonData } from '../types/overlay';
+
+/**
+ * Props for the NitroPolygon component
+ */
+export interface NitroPolygonProps {
+  /** Unique identifier for the polygon */
+  id?: string;
+
+  /**
+   * Array of geographic coordinates that form the polygon boundary.
+   * At least 3 coordinates are required to render a visible polygon.
+   * The polygon is automatically closed (first and last points are connected).
+   * @required
+   */
+  coordinates: Coordinate[];
+
+  /**
+   * Optional array of holes — each hole is an array of coordinates
+   * that will be cut out from the polygon fill.
+   * @default []
+   */
+  holes?: Coordinate[][];
+
+  /**
+   * Fill color of the polygon (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 polygon border (hex string or MarkerColor object).
+   * @default '#000000'
+   */
+  strokeColor?: ColorValue;
+
+  /**
+   * Stroke width of the polygon 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 polygon responds to tap events.
+   * When true, `onPolygonPress` on `<NitroMap>` fires with this polygon'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 polygonIdCounter = 0;
+const generatePolygonId = (): string => `polygon_${++polygonIdCounter}`;
+
+// Default colors
+const defaultFillColor: MarkerColor = { r: 0, g: 0, b: 0, a: 77 }; // ~30% opacity black
+const defaultStrokeColor: MarkerColor = Colors.black;
+
+// ============ Custom Memo Comparison ============
+const arePropsEqual = (
+  prev: NitroPolygonProps,
+  next: NitroPolygonProps
+): boolean => {
+  // Compare primitives
+  if (
+    prev.id !== next.id ||
+    prev.strokeWidth !== next.strokeWidth ||
+    prev.zIndex !== next.zIndex ||
+    prev.tappable !== next.tappable ||
+    prev.accessibilityLabel !== next.accessibilityLabel
+  ) {
+    return false;
+  }
+
+  if (!areColorsEqual(prev.fillColor, next.fillColor)) return false;
+  if (!areColorsEqual(prev.strokeColor, next.strokeColor)) return false;
+
+  // Compare coordinates array (deep)
+  const prevCoords = prev.coordinates;
+  const nextCoords = next.coordinates;
+  if (prevCoords.length !== nextCoords.length) return false;
+  for (let i = 0; i < prevCoords.length; i++) {
+    if (
+      prevCoords[i]!.latitude !== nextCoords[i]!.latitude ||
+      prevCoords[i]!.longitude !== nextCoords[i]!.longitude
+    ) {
+      return false;
+    }
+  }
+
+  // Compare holes
+  const prevHoles = prev.holes ?? [];
+  const nextHoles = next.holes ?? [];
+  if (prevHoles.length !== nextHoles.length) return false;
+  for (let i = 0; i < prevHoles.length; i++) {
+    const ph = prevHoles[i]!;
+    const nh = nextHoles[i]!;
+    if (ph.length !== nh.length) return false;
+    for (let j = 0; j < ph.length; j++) {
+      if (
+        ph[j]!.latitude !== nh[j]!.latitude ||
+        ph[j]!.longitude !== nh[j]!.longitude
+      ) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+/**
+ * NitroPolygon - Draw a closed polygon shape on the map
+ *
+ * @example Basic polygon
+ * ```tsx
+ * <NitroPolygon
+ *   coordinates={[
+ *     { latitude: 41.29, longitude: 69.24 },
+ *     { latitude: 41.31, longitude: 69.28 },
+ *     { latitude: 41.33, longitude: 69.26 },
+ *   ]}
+ *   fillColor="#4285F440"
+ *   strokeColor="#4285F4"
+ *   strokeWidth={2}
+ * />
+ * ```
+ *
+ * @example Polygon with a hole
+ * ```tsx
+ * <NitroPolygon
+ *   coordinates={outerBoundary}
+ *   holes={[innerHole]}
+ *   fillColor="#FF000040"
+ *   strokeColor="#FF0000"
+ * />
+ * ```
+ */
+export const NitroPolygon = memo(function NitroPolygon({
+  id,
+  coordinates,
+  holes = [],
+  fillColor,
+  strokeColor,
+  strokeWidth = 1,
+  zIndex = 0,
+  tappable = false,
+  accessibilityLabel,
+}: NitroPolygonProps) {
+  useEffect(() => {
+    if (__DEV__) {
+      if (coordinates.length < 3) {
+        console.warn(
+          'NitroPolygon: at least 3 coordinates are required to render a visible polygon. ' +
+            `Received ${coordinates.length}.`
+        );
+      }
+      validateCoordinates(coordinates, 'NitroPolygon');
+      holes.forEach((hole, i) =>
+        validateCoordinates(hole, `NitroPolygon hole[${i}]`)
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Generate stable ID
+  const polygonId = useRef(id || generatePolygonId()).current;
+
+  // Build polygon data
+  const buildPolygonData = useCallback(
+    (): PolygonData => ({
+      id: polygonId,
+      coordinates,
+      holes: holes.map((ring) => ({ coordinates: ring })),
+      fillColor: parseColor(fillColor) ?? defaultFillColor,
+      strokeColor: parseColor(strokeColor) ?? defaultStrokeColor,
+      strokeWidth,
+      zIndex,
+      tappable,
+      accessibilityLabel,
+    }),
+    [
+      polygonId,
+      coordinates,
+      holes,
+      fillColor,
+      strokeColor,
+      strokeWidth,
+      zIndex,
+      tappable,
+      accessibilityLabel,
+    ]
+  );
+
+  // Use polygon lifecycle hook
+  useNitroPolygon(buildPolygonData);
+
+  // Render nothing — polygon is rendered natively
+  return null;
+},
+arePropsEqual);
+
+export { arePropsEqual as arePolygonPropsEqual };
+export default NitroPolygon;

package/src/components/NitroPolyline.tsx

@@ -0,0 +1,208 @@
+// src/components/NitroPolyline.tsx
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { useNitroPolyline } from '../hooks/useNitroPolyline';
+import type { Coordinate } from '../types/map';
+import {
+  parseColor,
+  areColorsEqual,
+  type ColorValue,
+  Colors,
+} from '../utils/colors';
+import { validateCoordinates } from '../utils/validation';
+import type { PolylineData } from '../types/overlay';
+
+/**
+ * Props for the NitroPolyline component
+ */
+export interface NitroPolylineProps {
+  /** Unique identifier for the polyline */
+  id?: string;
+
+  /**
+   * Array of geographic coordinates that form the polyline path.
+   * At least 2 coordinates are required to render a visible line.
+   * @required
+   */
+  coordinates: Coordinate[];
+
+  /**
+   * Stroke color of the polyline (hex string like "#4285F4" or MarkerColor object).
+   * @default '#000000'
+   */
+  strokeColor?: ColorValue;
+
+  /**
+   * Stroke width in pixels.
+   * @default 1
+   */
+  strokeWidth?: number;
+
+  /**
+   * Whether the line follows Earth's curvature (great circle path).
+   * When true, the line curves on the Mercator projection to represent
+   * the shortest path on the sphere. Noticeable on long-distance lines.
+   * @default false
+   */
+  geodesic?: boolean;
+
+  /**
+   * Whether the line is rendered as dashed.
+   * @default false
+   */
+  dashed?: boolean;
+
+  /**
+   * Z-index for controlling overlay stacking order.
+   * Higher values render on top.
+   * @default 0
+   */
+  zIndex?: number;
+
+  /**
+   * Whether this polyline responds to tap events.
+   * When true, `onPolylinePress` on `<NitroMap>` fires with this polyline'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 polylineIdCounter = 0;
+const generatePolylineId = (): string => `polyline_${++polylineIdCounter}`;
+
+// Default stroke color (black)
+const defaultStrokeColor = Colors.black;
+
+// ============ Custom Memo Comparison ============
+const arePropsEqual = (
+  prev: NitroPolylineProps,
+  next: NitroPolylineProps
+): boolean => {
+  // Compare primitives
+  if (
+    prev.id !== next.id ||
+    prev.strokeWidth !== next.strokeWidth ||
+    prev.geodesic !== next.geodesic ||
+    prev.dashed !== next.dashed ||
+    prev.zIndex !== next.zIndex ||
+    prev.tappable !== next.tappable ||
+    prev.accessibilityLabel !== next.accessibilityLabel
+  ) {
+    return false;
+  }
+
+  // Compare strokeColor
+  if (!areColorsEqual(prev.strokeColor, next.strokeColor)) {
+    return false;
+  }
+
+  // Compare coordinates array (deep)
+  const prevCoords = prev.coordinates;
+  const nextCoords = next.coordinates;
+  if (prevCoords.length !== nextCoords.length) return false;
+  for (let i = 0; i < prevCoords.length; i++) {
+    if (
+      prevCoords[i]!.latitude !== nextCoords[i]!.latitude ||
+      prevCoords[i]!.longitude !== nextCoords[i]!.longitude
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/**
+ * NitroPolyline - Draw a line connecting multiple geographic points on the map
+ *
+ * @example Basic route line
+ * ```tsx
+ * <NitroPolyline
+ *   coordinates={[
+ *     { latitude: 41.29, longitude: 69.24 },
+ *     { latitude: 41.31, longitude: 69.28 },
+ *   ]}
+ *   strokeColor="#4285F4"
+ *   strokeWidth={4}
+ * />
+ * ```
+ *
+ * @example Geodesic dashed line
+ * ```tsx
+ * <NitroPolyline
+ *   coordinates={routeCoordinates}
+ *   strokeColor="#FF0000"
+ *   strokeWidth={2}
+ *   geodesic={true}
+ *   dashed={true}
+ * />
+ * ```
+ */
+export const NitroPolyline = memo(function NitroPolyline({
+  id,
+  coordinates,
+  strokeColor,
+  strokeWidth = 1,
+  geodesic = false,
+  dashed = false,
+  zIndex = 0,
+  tappable = false,
+  accessibilityLabel,
+}: NitroPolylineProps) {
+  useEffect(() => {
+    if (__DEV__) {
+      if (coordinates.length < 2) {
+        console.warn(
+          'NitroPolyline: at least 2 coordinates are required to render a visible line. ' +
+            `Received ${coordinates.length}.`
+        );
+      }
+      validateCoordinates(coordinates, 'NitroPolyline');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Generate stable ID
+  const polylineId = useRef(id || generatePolylineId()).current;
+
+  // Build polyline data
+  const buildPolylineData = useCallback(
+    (): PolylineData => ({
+      id: polylineId,
+      coordinates,
+      strokeColor: parseColor(strokeColor) ?? defaultStrokeColor,
+      strokeWidth,
+      geodesic,
+      dashed,
+      zIndex,
+      tappable,
+      accessibilityLabel,
+    }),
+    [
+      polylineId,
+      coordinates,
+      strokeColor,
+      strokeWidth,
+      geodesic,
+      dashed,
+      zIndex,
+      tappable,
+      accessibilityLabel,
+    ]
+  );
+
+  // Use polyline lifecycle hook
+  useNitroPolyline(buildPolylineData);
+
+  // Render nothing — polyline is rendered natively
+  return null;
+},
+arePropsEqual);
+
+export { arePropsEqual as arePolylinePropsEqual };
+export default NitroPolyline;

package/src/components/PriceMarker.tsx

@@ -1,11 +1,11 @@
 // src/components/PriceMarker.tsx
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import {
   useNitroMarker,
+  useMarkerHandlers,
   type CommonMarkerProps,
 } from '../hooks/useNitroMarker';
-import type { MarkerColor } from '../types/marker';
-import { parseColor, type ColorValue } from '../utils/colors';
+import { parseColor, areColorsEqual, type ColorValue } from '../utils/colors';
 
 /**
  * Props for the PriceMarker component
@@ -48,12 +48,6 @@ export interface PriceMarkerProps extends CommonMarkerProps {
    */
   fontSize?: number;
 
-  /**
-   * Corner radius in pixels (only for simple price style)
-   * @default 8
-   */
-  cornerRadius?: number;
-
   /**
    * Background color when marker is selected (hex string like "#FF0000" or MarkerColor object)
    */
@@ -99,11 +93,13 @@ const arePropsEqual = (
     prevProps.zIndex !== nextProps.zIndex ||
     prevProps.clusteringEnabled !== nextProps.clusteringEnabled ||
     prevProps.animation !== nextProps.animation ||
+    prevProps.animationDuration !== nextProps.animationDuration ||
+    prevProps.animateOnReappear !== nextProps.animateOnReappear ||
     prevProps.fontSize !== nextProps.fontSize ||
-    prevProps.cornerRadius !== nextProps.cornerRadius ||
     prevProps.paddingHorizontal !== nextProps.paddingHorizontal ||
     prevProps.paddingVertical !== nextProps.paddingVertical ||
-    prevProps.shadowOpacity !== nextProps.shadowOpacity
+    prevProps.shadowOpacity !== nextProps.shadowOpacity ||
+    prevProps.accessibilityLabel !== nextProps.accessibilityLabel
   ) {
     return false;
   }
@@ -124,36 +120,14 @@ const arePropsEqual = (
     return false;
   }
 
-  // Compare colors (handles both hex strings and MarkerColor objects)
-  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.backgroundColor, nextProps.backgroundColor) ||
-    !compareColors(prevProps.textColor, nextProps.textColor) ||
-    !compareColors(
+    !areColorsEqual(prevProps.backgroundColor, nextProps.backgroundColor) ||
+    !areColorsEqual(prevProps.textColor, nextProps.textColor) ||
+    !areColorsEqual(
       prevProps.selectedBackgroundColor,
       nextProps.selectedBackgroundColor
     ) ||
-    !compareColors(prevProps.selectedTextColor, nextProps.selectedTextColor)
+    !areColorsEqual(prevProps.selectedTextColor, nextProps.selectedTextColor)
   ) {
     return false;
   }
@@ -197,7 +171,7 @@ export const PriceMarker = memo(function PriceMarker({
   backgroundColor,
   textColor,
   fontSize = 14,
-  // cornerRadius prop kept for backwards compatibility but not used
+  // cornerRadius was removed — not forwarded to native
   selectedBackgroundColor,
   selectedTextColor,
   paddingHorizontal,
@@ -214,6 +188,9 @@ export const PriceMarker = memo(function PriceMarker({
   anchor = { x: 0.5, y: 0.5 },
   clusteringEnabled = true,
   animation = 'none',
+  animationDuration = 0.3,
+  animateOnReappear = true,
+  accessibilityLabel,
 
   // Events
   onPress,
@@ -254,16 +231,8 @@ export const PriceMarker = memo(function PriceMarker({
     shadowOpacity,
   ]);
 
-  // Memoize handlers
-  const handlers = useMemo(
-    () => ({
-      onPress,
-      onDragStart,
-      onDrag,
-      onDragEnd,
-    }),
-    [onPress, onDragStart, onDrag, onDragEnd]
-  );
+  // Memoize handlers via shared hook
+  const handlers = useMarkerHandlers(onPress, onDragStart, onDrag, onDragEnd);
 
   // Build full marker data
   const buildMarkerData = useCallback(
@@ -279,7 +248,10 @@ export const PriceMarker = memo(function PriceMarker({
       anchor,
       clusteringEnabled,
       config: buildMarkerConfig(),
+      accessibilityLabel,
       animation,
+      animationDuration,
+      animateOnReappear,
     }),
     [
       coordinate,
@@ -292,7 +264,10 @@ export const PriceMarker = memo(function PriceMarker({
       anchor,
       clusteringEnabled,
       buildMarkerConfig,
+      accessibilityLabel,
       animation,
+      animationDuration,
+      animateOnReappear,
     ]
   );
 

package/src/context/NitroMapContext.tsx

@@ -24,6 +24,10 @@ export interface NitroMapContextValue {
 
   // Get handlers for a specific marker (used internally)
   getMarkerHandler: (markerId: string) => MarkerHandlers | undefined;
+
+  // Track active marker IDs for duplicate detection (__DEV__ only)
+  trackMarkerId: (markerId: string) => void;
+  untrackMarkerId: (markerId: string) => void;
 }
 
 // Create context with null default

package/src/hooks/useNitroCircle.ts

@@ -0,0 +1,25 @@
+// src/hooks/useNitroCircle.ts
+import { useCallback } from 'react';
+import { useNitroOverlay } from './useNitroOverlay';
+import type { CircleData } from '../types/overlay';
+
+/**
+ * Hook for circle lifecycle management.
+ * Adds circle on mount, updates on prop changes, removes on unmount.
+ */
+export function useNitroCircle(buildCircleData: () => CircleData): void {
+  const getMethods = useCallback(
+    (mapRef: {
+      addCircle: (d: CircleData) => void;
+      updateCircle: (d: CircleData) => void;
+      removeCircle: (id: string) => void;
+    }) => ({
+      add: (data: CircleData) => mapRef.addCircle(data),
+      update: (data: CircleData) => mapRef.updateCircle(data),
+      remove: (id: string) => mapRef.removeCircle(id),
+    }),
+    []
+  );
+
+  useNitroOverlay(buildCircleData, getMethods);
+}