@maydon_tech/react-native-nitro-maps 0.1.0

package/src/components/PriceMarker.tsx

@@ -0,0 +1,311 @@
+// src/components/PriceMarker.tsx
+import { memo, useCallback, useMemo } from 'react';
+import {
+  useNitroMarker,
+  type CommonMarkerProps,
+} from '../hooks/useNitroMarker';
+import type { MarkerColor } from '../types/marker';
+import { parseColor, type ColorValue } from '../utils/colors';
+
+/**
+ * Props for the PriceMarker component
+ */
+export interface PriceMarkerProps extends CommonMarkerProps {
+  /**
+   * Price text to display (e.g., "9M", "150K")
+   * @required
+   */
+  price: string;
+
+  /**
+   * Currency code to display (e.g., "UZS", "USD")
+   * If provided, uses the full price marker style with currency
+   */
+  currency?: string;
+
+  /**
+   * Whether the marker is in selected state
+   * Changes background and text colors when true
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Background color of the marker (hex string like "#FF0000" or MarkerColor object)
+   * @default Colors.white
+   */
+  backgroundColor?: ColorValue;
+
+  /**
+   * Text color of the marker (hex string like "#FF0000" or MarkerColor object)
+   * @default Colors.black
+   */
+  textColor?: ColorValue;
+
+  /**
+   * Font size in pixels
+   * @default 14
+   */
+  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)
+   */
+  selectedBackgroundColor?: ColorValue;
+
+  /**
+   * Text color when marker is selected (hex string like "#FF0000" or MarkerColor object)
+   */
+  selectedTextColor?: ColorValue;
+
+  /**
+   * Horizontal padding in pixels
+   */
+  paddingHorizontal?: number;
+
+  /**
+   * Vertical padding in pixels
+   */
+  paddingVertical?: number;
+
+  /**
+   * Shadow opacity (0-1)
+   */
+  shadowOpacity?: number;
+}
+
+// ============ Custom Memo Comparison ============
+const arePropsEqual = (
+  prevProps: PriceMarkerProps,
+  nextProps: PriceMarkerProps
+): boolean => {
+  // Compare primitive props
+  if (
+    prevProps.id !== nextProps.id ||
+    prevProps.price !== nextProps.price ||
+    prevProps.currency !== nextProps.currency ||
+    prevProps.selected !== nextProps.selected ||
+    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.fontSize !== nextProps.fontSize ||
+    prevProps.cornerRadius !== nextProps.cornerRadius ||
+    prevProps.paddingHorizontal !== nextProps.paddingHorizontal ||
+    prevProps.paddingVertical !== nextProps.paddingVertical ||
+    prevProps.shadowOpacity !== nextProps.shadowOpacity
+  ) {
+    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;
+  }
+
+  // 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(
+      prevProps.selectedBackgroundColor,
+      nextProps.selectedBackgroundColor
+    ) ||
+    !compareColors(prevProps.selectedTextColor, nextProps.selectedTextColor)
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * PriceMarker - Display price tags on the map
+ *
+ * @example Simple price tag
+ * ```tsx
+ * <PriceMarker
+ *   coordinate={{ latitude: 41.29, longitude: 69.24 }}
+ *   price="150K"
+ * />
+ * ```
+ *
+ * @example Full price marker with currency
+ * ```tsx
+ * <PriceMarker
+ *   coordinate={{ latitude: 41.30, longitude: 69.25 }}
+ *   price="9M"
+ *   currency="UZS"
+ *   selected={isSelected}
+ *   onPress={() => setSelected(true)}
+ * />
+ * ```
+ */
+export const PriceMarker = memo(function PriceMarker({
+  // Required
+  coordinate,
+  price,
+
+  // Identification
+  id,
+
+  // Price-specific props
+  currency,
+  selected = false,
+  backgroundColor,
+  textColor,
+  fontSize = 14,
+  // cornerRadius prop kept for backwards compatibility but not used
+  selectedBackgroundColor,
+  selectedTextColor,
+  paddingHorizontal,
+  paddingVertical,
+  shadowOpacity,
+
+  // Common props
+  title,
+  description,
+  draggable = false,
+  opacity = 1,
+  rotation = 0,
+  zIndex = 0,
+  anchor = { x: 0.5, y: 0.5 },
+  clusteringEnabled = true,
+  animation = 'none',
+
+  // Events
+  onPress,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+}: PriceMarkerProps) {
+  // Build marker config based on style
+  const buildMarkerConfig = useCallback(() => {
+    // Always use priceMarker style - 'price' is not a valid MarkerStyle
+    return {
+      style: 'priceMarker' as const,
+      priceMarker: {
+        price,
+        currency: currency ?? '', // Default to empty string if no currency
+        selected,
+        backgroundColor: parseColor(backgroundColor),
+        selectedBackgroundColor: parseColor(selectedBackgroundColor),
+        textColor: parseColor(textColor),
+        selectedTextColor: parseColor(selectedTextColor),
+        fontSize,
+        paddingHorizontal,
+        paddingVertical,
+        shadowOpacity,
+      },
+    };
+  }, [
+    price,
+    currency,
+    selected,
+    backgroundColor,
+    textColor,
+    fontSize,
+    selectedBackgroundColor,
+    selectedTextColor,
+    paddingHorizontal,
+    paddingVertical,
+    shadowOpacity,
+  ]);
+
+  // Memoize handlers
+  const handlers = useMemo(
+    () => ({
+      onPress,
+      onDragStart,
+      onDrag,
+      onDragEnd,
+    }),
+    [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: buildMarkerConfig(),
+      animation,
+    }),
+    [
+      coordinate,
+      title,
+      description,
+      draggable,
+      opacity,
+      rotation,
+      zIndex,
+      anchor,
+      clusteringEnabled,
+      buildMarkerConfig,
+      animation,
+    ]
+  );
+
+  // Use shared marker hook
+  useNitroMarker({
+    idPrefix: 'price_marker',
+    providedId: id,
+    handlers,
+    buildMarkerData,
+  });
+
+  // Render nothing - marker is rendered natively
+  return null;
+}, arePropsEqual);
+
+export default PriceMarker;

package/src/context/NitroMapContext.tsx

@@ -0,0 +1,33 @@
+// src/components/NitroMapContext.tsx
+import { createContext } from 'react';
+import type { NitroMapMethods } from '../specs/NitroMap.nitro';
+import type { Coordinate } from '../types/map';
+
+// Marker event handlers
+export interface MarkerHandlers {
+  onPress?: () => void;
+  onDragStart?: (coordinate: Coordinate) => void;
+  onDrag?: (coordinate: Coordinate) => void;
+  onDragEnd?: (coordinate: Coordinate) => void;
+}
+
+// Context value type
+export interface NitroMapContextValue {
+  // Map ref for calling native methods
+  mapRef: NitroMapMethods | null;
+
+  // Register marker event handlers
+  registerMarkerHandler: (markerId: string, handlers: MarkerHandlers) => void;
+
+  // Unregister marker event handlers
+  unregisterMarkerHandler: (markerId: string) => void;
+
+  // Get handlers for a specific marker (used internally)
+  getMarkerHandler: (markerId: string) => MarkerHandlers | undefined;
+}
+
+// Create context with null default
+export const NitroMapContext = createContext<NitroMapContextValue | null>(null);
+
+// Provider display name for debugging
+NitroMapContext.displayName = 'NitroMapContext';

package/src/hooks/useNitroMarker.ts

@@ -0,0 +1,198 @@
+// src/hooks/useNitroMarker.ts
+import { useContext, useEffect, useRef, useCallback } from 'react';
+import {
+  NitroMapContext,
+  type MarkerHandlers,
+} from '../context/NitroMapContext';
+import type { MarkerConfig, MarkerAnimation } from '../types/marker';
+import type { Coordinate, Point } from '../types/map';
+
+/**
+ * Base marker data structure for internal use
+ */
+export interface BaseMarkerData {
+  id: string;
+  coordinate: Coordinate;
+  title?: string;
+  description?: string;
+  draggable: boolean;
+  opacity: number;
+  rotation: number;
+  zIndex: number;
+  anchor: Point;
+  clusteringEnabled: boolean;
+  config: MarkerConfig;
+  animation: MarkerAnimation;
+}
+
+/**
+ * Props shared by all marker components
+ */
+export interface CommonMarkerProps {
+  /** Unique identifier for the marker */
+  id?: string;
+
+  /** Geographic coordinates where the marker should be placed */
+  coordinate: Coordinate;
+
+  /** Title shown in info window when marker is tapped */
+  title?: string;
+
+  /** Description shown in info window below the title */
+  description?: string;
+
+  /** Whether the marker can be dragged by the user */
+  draggable?: boolean;
+
+  /** Marker opacity (0 = transparent, 1 = opaque) */
+  opacity?: number;
+
+  /** Rotation angle in degrees (clockwise from north) */
+  rotation?: number;
+
+  /** Z-index for controlling overlap order */
+  zIndex?: number;
+
+  /** Anchor point for positioning (0-1 range) */
+  anchor?: Point;
+
+  /** Whether this marker should be included in clustering */
+  clusteringEnabled?: boolean;
+
+  /** Animation when marker appears on the map */
+  animation?: MarkerAnimation;
+
+  /** Called when the marker is tapped */
+  onPress?: () => void;
+
+  /** Called when the marker starts being dragged */
+  onDragStart?: (coordinate: Coordinate) => void;
+
+  /** Called continuously while the marker is being dragged */
+  onDrag?: (coordinate: Coordinate) => void;
+
+  /** Called when the marker is dropped (drag ends) */
+  onDragEnd?: (coordinate: Coordinate) => void;
+}
+
+// ID generator
+let markerIdCounter = 0;
+const generateMarkerId = (prefix: string) =>
+  `${prefix}_${++markerIdCounter}_${Date.now()}`;
+
+/**
+ * Hook options for useNitroMarker
+ */
+export interface UseNitroMarkerOptions {
+  /** ID prefix for auto-generated IDs */
+  idPrefix: string;
+
+  /** User-provided ID (optional) */
+  providedId?: string;
+
+  /** Event handlers */
+  handlers: MarkerHandlers;
+
+  /** Function to build marker data - receives the generated/provided markerId */
+  buildMarkerData: (markerId: string) => BaseMarkerData;
+}
+
+/**
+ * Shared hook for all marker components
+ * Handles ID generation, context registration, and marker lifecycle
+ */
+export function useNitroMarker({
+  idPrefix,
+  providedId,
+  handlers,
+  buildMarkerData,
+}: UseNitroMarkerOptions): string {
+  // Generate stable ID
+  const markerId = useRef(providedId || generateMarkerId(idPrefix)).current;
+
+  // Get map context
+  const mapContext = useContext(NitroMapContext);
+
+  // Track if marker has been added
+  const isAddedRef = useRef(false);
+
+  // ============ Register Event Handlers ============
+  useEffect(() => {
+    if (!mapContext) {
+      console.warn(`${idPrefix} must be used inside NitroMap`);
+      return;
+    }
+
+    // Register handlers
+    mapContext.registerMarkerHandler(markerId, handlers);
+
+    // Cleanup on unmount
+    return () => {
+      mapContext.unregisterMarkerHandler(markerId);
+    };
+    // We intentionally depend on individual handler properties instead of the handlers object
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    markerId,
+    mapContext,
+    handlers.onPress,
+    handlers.onDragStart,
+    handlers.onDrag,
+    handlers.onDragEnd,
+    idPrefix,
+  ]);
+
+  // ============ Add Marker on Mount, Remove on Unmount ============
+  // NOTE: mapContext is a ref object, so we must track mapContext.mapRef separately
+  const mapRef = mapContext?.mapRef;
+
+  useEffect(() => {
+    if (!mapRef) {
+      return;
+    }
+
+    // Add marker on mount
+    mapRef.addMarker(buildMarkerData(markerId));
+    isAddedRef.current = true;
+
+    // Remove marker only on unmount
+    return () => {
+      mapRef?.removeMarker(markerId);
+      isAddedRef.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mapRef, markerId]); // mapRef is now properly tracked
+
+  // ============ Update Marker when props change ============
+  useEffect(() => {
+    // Skip if not yet added or no map ref
+    if (!isAddedRef.current || !mapContext?.mapRef) {
+      return;
+    }
+
+    // Update marker with new data
+    mapContext.mapRef.updateMarker(buildMarkerData(markerId));
+  }, [mapContext, buildMarkerData, markerId]);
+
+  return markerId;
+}
+
+/**
+ * Create stable handlers object that won't cause unnecessary re-renders
+ */
+export function useMarkerHandlers(
+  onPress?: () => void,
+  onDragStart?: (coordinate: Coordinate) => void,
+  onDrag?: (coordinate: Coordinate) => void,
+  onDragEnd?: (coordinate: Coordinate) => void
+): MarkerHandlers {
+  return useCallback(
+    () => ({
+      onPress,
+      onDragStart,
+      onDrag,
+      onDragEnd,
+    }),
+    [onPress, onDragStart, onDrag, onDragEnd]
+  )();
+}

package/src/index.tsx

@@ -0,0 +1,62 @@
+// src/index.ts
+
+// ============ Components ============
+export { NitroMap, default } from './components/NitroMap';
+
+// New specialized marker components
+export { PriceMarker } from './components/PriceMarker';
+export { ImageMarker } from './components/ImageMarker';
+
+// ============ Types ============
+export type { NitroMapProps, NitroMapRef } from './components/NitroMap';
+
+export type {
+  Region,
+  Coordinate,
+  MapType,
+  MapPressEvent,
+  RegionChangeEvent,
+  EdgePadding,
+  Camera,
+  MapBoundaries,
+  MapStyleElement,
+  MapStyler,
+  MapProvider,
+  MapStyle,
+  MapError,
+  Point,
+} from './types/map';
+
+export type {
+  MarkerStyle,
+  PriceMarkerStyle,
+  MarkerColor,
+  PriceMarkerConfig,
+  ImageMarkerConfig,
+  ClusterPressEvent,
+  ClusterConfig,
+  ClusterStrategy,
+  ClusterAnimationStyle,
+  MarkerAnimation,
+  MarkerConfig,
+  MarkerData,
+  MarkerDragEvent,
+  MarkerPressEvent,
+} from './types/marker';
+
+export {
+  NitroMapInitialize,
+  IsNitroMapInitialized,
+  getDefaultProvider,
+  type NitroMapInitConfig,
+} from './modules';
+
+// Marker component props
+
+export type { PriceMarkerProps } from './components/PriceMarker';
+export type { ImageMarkerProps } from './components/ImageMarker';
+
+// ============ Utilities ============
+// Color helpers - use these to create colors for markers and clusters
+export { rgb, hex, Colors } from './utils/colors';
+export type { ColorValue } from './utils/colors';

package/src/modules/index.ts

@@ -0,0 +1,6 @@
+export {
+  NitroMapInitialize,
+  IsNitroMapInitialized,
+  getDefaultProvider,
+  type NitroMapInitConfig,
+} from './module';

package/src/modules/module.ts

@@ -0,0 +1,45 @@
+import { NitroModules } from 'react-native-nitro-modules';
+import type { NitroMapConfig } from '../specs/NitroMapConfig.nitro';
+import type { MapProvider } from '../types/map';
+
+const NitroMapConfig =
+  NitroModules.createHybridObject<NitroMapConfig>('NitroMapConfig');
+
+// Store the default provider set during initialization
+let defaultProvider: MapProvider = 'google';
+
+/**
+ * Configuration for NitroMap initialization.
+ */
+export interface NitroMapInitConfig {
+  /** Map provider to use ('google' | 'apple' | 'yandex') */
+  provider: MapProvider;
+  /** Google Maps API key (required for Google provider) */
+  googleApiKey?: string;
+  /** Yandex Maps API key (required for Yandex provider) */
+  yandexApiKey?: string;
+}
+
+/**
+ * Initialize the NitroMap SDK. Must be called before rendering <NitroMap>.
+ *
+ * @example
+ * NitroMapInitialize({ provider: 'google', googleApiKey: 'YOUR_KEY' });
+ */
+export function NitroMapInitialize(config: NitroMapInitConfig): void {
+  const apiKey =
+    config.provider === 'yandex'
+      ? config.yandexApiKey ?? ''
+      : config.googleApiKey ?? '';
+
+  defaultProvider = config.provider;
+  NitroMapConfig.NitroMapInitialize(apiKey, config.provider);
+}
+
+export function IsNitroMapInitialized(): boolean {
+  return NitroMapConfig.IsNitroMapInitialized();
+}
+
+export function getDefaultProvider(): MapProvider {
+  return defaultProvider;
+}