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

package/src/hooks/useNitroMarker.ts

@@ -1,11 +1,12 @@
 // src/hooks/useNitroMarker.ts
-import { useContext, useEffect, useRef, useCallback } from 'react';
+import { useContext, useEffect, useRef, useMemo } from 'react';
 import {
   NitroMapContext,
   type MarkerHandlers,
 } from '../context/NitroMapContext';
 import type { MarkerConfig, MarkerAnimation } from '../types/marker';
 import type { Coordinate, Point } from '../types/map';
+import { validateCoordinate } from '../utils/validation';
 
 /**
  * Base marker data structure for internal use
@@ -22,7 +23,10 @@ export interface BaseMarkerData {
   anchor: Point;
   clusteringEnabled: boolean;
   config: MarkerConfig;
+  accessibilityLabel?: string;
   animation: MarkerAnimation;
+  animationDuration: number;
+  animateOnReappear: boolean;
 }
 
 /**
@@ -59,9 +63,29 @@ export interface CommonMarkerProps {
   /** Whether this marker should be included in clustering */
   clusteringEnabled?: boolean;
 
+  /**
+   * Accessibility label read by screen readers (VoiceOver / TalkBack).
+   * Falls back to `title` if not set.
+   */
+  accessibilityLabel?: string;
+
   /** Animation when marker appears on the map */
   animation?: MarkerAnimation;
 
+  /**
+   * Animation duration in seconds
+   * @default 0.3
+   */
+  animationDuration?: number;
+
+  /**
+   * Whether the marker should animate every time it reappears on the map
+   * (e.g., emerging from a cluster, scrolling back into viewport).
+   * When false, the animation only plays on the initial mount.
+   * @default true
+   */
+  animateOnReappear?: boolean;
+
   /** Called when the marker is tapped */
   onPress?: () => void;
 
@@ -75,10 +99,10 @@ export interface CommonMarkerProps {
   onDragEnd?: (coordinate: Coordinate) => void;
 }
 
-// ID generator
+// Module-level monotonic counter for generating unique marker IDs.
+// Monotonically increasing — guaranteed unique within a JS runtime session.
 let markerIdCounter = 0;
-const generateMarkerId = (prefix: string) =>
-  `${prefix}_${++markerIdCounter}_${Date.now()}`;
+const generateMarkerId = (prefix: string) => `${prefix}_${++markerIdCounter}`;
 
 /**
  * Hook options for useNitroMarker
@@ -119,7 +143,9 @@ export function useNitroMarker({
   // ============ Register Event Handlers ============
   useEffect(() => {
     if (!mapContext) {
-      console.warn(`${idPrefix} must be used inside NitroMap`);
+      if (__DEV__) {
+        console.warn(`${idPrefix} must be used inside NitroMap`);
+      }
       return;
     }
 
@@ -130,7 +156,8 @@ export function useNitroMarker({
     return () => {
       mapContext.unregisterMarkerHandler(markerId);
     };
-    // We intentionally depend on individual handler properties instead of the handlers object
+    // Handlers are spread into individual deps so the effect re-runs
+    // only when a specific handler changes, not when the object ref changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     markerId,
@@ -151,15 +178,25 @@ export function useNitroMarker({
       return;
     }
 
+    // Track marker ID for duplicate detection
+    mapContext?.trackMarkerId(markerId);
+
+    // Validate coordinate in dev mode
+    const markerData = buildMarkerData(markerId);
+    validateCoordinate(markerData.coordinate, `marker "${markerId}"`);
+
     // Add marker on mount
-    mapRef.addMarker(buildMarkerData(markerId));
+    mapRef.addMarker(markerData);
     isAddedRef.current = true;
 
     // Remove marker only on unmount
     return () => {
+      mapContext?.untrackMarkerId(markerId);
       mapRef?.removeMarker(markerId);
       isAddedRef.current = false;
     };
+    // buildMarkerData is intentionally excluded — we only want mount/unmount behavior.
+    // Updates are handled by the third useEffect below.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapRef, markerId]); // mapRef is now properly tracked
 
@@ -171,7 +208,9 @@ export function useNitroMarker({
     }
 
     // Update marker with new data
-    mapContext.mapRef.updateMarker(buildMarkerData(markerId));
+    const updatedData = buildMarkerData(markerId);
+    validateCoordinate(updatedData.coordinate, `marker "${markerId}"`);
+    mapContext.mapRef.updateMarker(updatedData);
   }, [mapContext, buildMarkerData, markerId]);
 
   return markerId;
@@ -186,7 +225,7 @@ export function useMarkerHandlers(
   onDrag?: (coordinate: Coordinate) => void,
   onDragEnd?: (coordinate: Coordinate) => void
 ): MarkerHandlers {
-  return useCallback(
+  return useMemo(
     () => ({
       onPress,
       onDragStart,
@@ -194,5 +233,5 @@ export function useMarkerHandlers(
       onDragEnd,
     }),
     [onPress, onDragStart, onDrag, onDragEnd]
-  )();
+  );
 }

package/src/hooks/useNitroOverlay.ts

@@ -0,0 +1,68 @@
+// src/hooks/useNitroOverlay.ts
+import { useContext, useEffect, useRef } from 'react';
+import { NitroMapContext } from '../context/NitroMapContext';
+import type { NitroMapMethods } from '../specs/NitroMap.nitro';
+
+/**
+ * Overlay method names used by the generic hook.
+ * Maps each overlay type to its add/update/remove native methods.
+ */
+interface OverlayMethods<T extends { id: string }> {
+  add: (data: T) => void;
+  update: (data: T) => void;
+  remove: (id: string) => void;
+}
+
+/**
+ * Generic hook for overlay lifecycle management (polyline, polygon, circle).
+ * Adds overlay on mount, updates on prop changes, removes on unmount.
+ *
+ * Eliminates copy-paste between useNitroPolyline/useNitroPolygon/useNitroCircle.
+ *
+ * @param buildData - Memoized function that builds the overlay data object.
+ * @param getMethods - Function that extracts add/update/remove methods from the map ref.
+ */
+export function useNitroOverlay<T extends { id: string }>(
+  buildData: () => T,
+  getMethods: (mapRef: NitroMapMethods) => OverlayMethods<T>
+): void {
+  const mapContext = useContext(NitroMapContext);
+  const isAddedRef = useRef(false);
+  const idRef = useRef<string | null>(null);
+  const isInitialMount = useRef(true);
+
+  const mapRef = mapContext?.mapRef;
+
+  // Add on mount, remove on unmount.
+  // buildData is intentionally excluded from deps — we only want mount/unmount behavior.
+  // Updates are handled by the second useEffect below.
+  useEffect(() => {
+    if (!mapRef) return;
+
+    const data = buildData();
+    const methods = getMethods(mapRef);
+    idRef.current = data.id;
+    methods.add(data);
+    isAddedRef.current = true;
+
+    return () => {
+      if (idRef.current) {
+        methods.remove(idRef.current);
+      }
+      isAddedRef.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mapRef]);
+
+  // Update when props change (buildData reference changes on prop changes via useCallback).
+  // Skip the initial mount — the first useEffect already added the overlay.
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    if (!isAddedRef.current || !mapContext?.mapRef) return;
+    const methods = getMethods(mapContext.mapRef);
+    methods.update(buildData());
+  }, [mapContext, buildData, getMethods]);
+}

package/src/hooks/useNitroPolygon.ts

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

package/src/hooks/useNitroPolyline.ts

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

package/src/index.tsx

@@ -6,9 +6,16 @@ export { NitroMap, default } from './components/NitroMap';
 // New specialized marker components
 export { PriceMarker } from './components/PriceMarker';
 export { ImageMarker } from './components/ImageMarker';
+export { Marker } from './components/Marker';
+export { NitroPolyline } from './components/NitroPolyline';
+export { NitroPolygon } from './components/NitroPolygon';
+export { NitroCircle } from './components/NitroCircle';
 
 // ============ Types ============
 export type { NitroMapProps, NitroMapRef } from './components/NitroMap';
+export type { NitroMapMethods } from './specs/NitroMap.nitro';
+export { NitroMapContext } from './context/NitroMapContext';
+export type { NitroMapContextValue } from './context/NitroMapContext';
 
 export type {
   Region,
@@ -25,18 +32,18 @@ export type {
   MapStyle,
   MapError,
   Point,
+  UserLocationChangeEvent,
+  UserTrackingMode,
 } from './types/map';
 
 export type {
   MarkerStyle,
   PriceMarkerStyle,
   MarkerColor,
-  PriceMarkerConfig,
   ImageMarkerConfig,
   ClusterPressEvent,
   ClusterConfig,
   ClusterStrategy,
-  ClusterAnimationStyle,
   MarkerAnimation,
   MarkerConfig,
   MarkerData,
@@ -44,6 +51,16 @@ export type {
   MarkerPressEvent,
 } from './types/marker';
 
+export type { PolylineData, PolygonData, CircleData } from './types/overlay';
+
+export type {
+  GoogleMapTheme,
+  AppleMapTheme,
+  YandexMapTheme,
+  ThemeForProvider,
+  MapTheme,
+} from './types/theme';
+
 export {
   NitroMapInitialize,
   IsNitroMapInitialized,
@@ -55,6 +72,10 @@ export {
 
 export type { PriceMarkerProps } from './components/PriceMarker';
 export type { ImageMarkerProps } from './components/ImageMarker';
+export type { MarkerProps } from './components/Marker';
+export type { NitroPolylineProps } from './components/NitroPolyline';
+export type { NitroPolygonProps } from './components/NitroPolygon';
+export type { NitroCircleProps } from './components/NitroCircle';
 
 // ============ Utilities ============
 // Color helpers - use these to create colors for markers and clusters