@maydon_tech/react-native-nitro-maps 0.1.0

package/package.json

@@ -0,0 +1,176 @@
+{
+  "name": "@maydon_tech/react-native-nitro-maps",
+  "version": "0.1.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",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./nitrogen/generated/shared/json/NitroMapConfig.json": "./nitrogen/generated/shared/json/NitroMapConfig.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "nitrogen",
+    "nitro.json",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "example": "yarn workspace react-native-nitro-maps-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "nitrogen": "nitrogen",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maydongroup/react-native-nitro-maps.git"
+  },
+  "author": "Maydon Tech <uktam.kh@maydongroup.com> (https://github.com/maydongroup)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/maydongroup/react-native-nitro-maps/issues"
+  },
+  "homepage": "https://github.com/maydongroup/react-native-nitro-maps#readme",
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "nitrogen": "^0.31.10",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-nitro-modules": "^0.31.10",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-nitro-modules": "^0.31.10"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "custom",
+        {
+          "script": "nitrogen",
+          "clean": "nitrogen/"
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "nitro-view",
+    "languages": "kotlin-swift",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.0"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,16 @@
+/**
+ * React Native autolinking configuration.
+ *
+ * This tells the React Native CLI how to find the native modules
+ * provided by this package.
+ *
+ * @see https://github.com/react-native-community/cli/blob/main/docs/dependencies.md
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: {},
+      android: {},
+    },
+  },
+};

package/src/components/ImageMarker.tsx

@@ -0,0 +1,254 @@
+// src/components/ImageMarker.tsx
+import { memo, useCallback, useMemo } from 'react';
+import {
+  useNitroMarker,
+  type CommonMarkerProps,
+} from '../hooks/useNitroMarker';
+import type { MarkerColor } from '../types/marker';
+import { Colors, parseColor, type ColorValue } from '../utils/colors';
+
+/**
+ * Props for the ImageMarker component
+ */
+export interface ImageMarkerProps extends CommonMarkerProps {
+  /**
+   * URL of the image to display
+   * Either imageUrl or imageBase64 is required
+   */
+  imageUrl?: string;
+
+  /**
+   * Base64-encoded image data (alternative to imageUrl)
+   * Either imageUrl or imageBase64 is required
+   */
+  imageBase64?: string;
+
+  /**
+   * Image width in pixels
+   * @default 50
+   */
+  width?: number;
+
+  /**
+   * Image height in pixels
+   * @default 50
+   */
+  height?: number;
+
+  /**
+   * Corner radius in pixels
+   * @default 8
+   */
+  cornerRadius?: number;
+
+  /**
+   * Border thickness in pixels
+   * @default 0
+   */
+  borderWidth?: number;
+
+  /**
+   * Border color (hex string like "#FF0000" or MarkerColor object)
+   */
+  borderColor?: ColorValue;
+}
+
+// ============ Custom Memo Comparison ============
+const arePropsEqual = (
+  prevProps: ImageMarkerProps,
+  nextProps: ImageMarkerProps
+): boolean => {
+  if (
+    prevProps.id !== nextProps.id ||
+    prevProps.imageUrl !== nextProps.imageUrl ||
+    prevProps.imageBase64 !== nextProps.imageBase64 ||
+    prevProps.width !== nextProps.width ||
+    prevProps.height !== nextProps.height ||
+    prevProps.cornerRadius !== nextProps.cornerRadius ||
+    prevProps.borderWidth !== nextProps.borderWidth ||
+    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
+  ) {
+    return false;
+  }
+
+  if (
+    prevProps.coordinate?.latitude !== nextProps.coordinate?.latitude ||
+    prevProps.coordinate?.longitude !== nextProps.coordinate?.longitude
+  ) {
+    return false;
+  }
+
+  if (
+    prevProps.anchor?.x !== nextProps.anchor?.x ||
+    prevProps.anchor?.y !== nextProps.anchor?.y
+  ) {
+    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)) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * ImageMarker - Display images as map markers
+ *
+ * @example With URL
+ * ```tsx
+ * <ImageMarker
+ *   coordinate={{ latitude: 41.29, longitude: 69.24 }}
+ *   imageUrl="https://example.com/image.jpg"
+ *   width={60}
+ *   height={60}
+ * />
+ * ```
+ *
+ * @example With Base64 and styling
+ * ```tsx
+ * <ImageMarker
+ *   coordinate={{ latitude: 41.30, longitude: 69.25 }}
+ *   imageBase64={base64Data}
+ *   width={50}
+ *   height={50}
+ *   cornerRadius={25}
+ *   borderWidth={2}
+ *   borderColor={Colors.white}
+ * />
+ * ```
+ */
+export const ImageMarker = memo(function ImageMarker({
+  // Required
+  coordinate,
+
+  // Identification
+  id,
+
+  // Image-specific props
+  imageUrl,
+  imageBase64,
+  width = 50,
+  height = 50,
+  cornerRadius = 8,
+  borderWidth = 0,
+  borderColor,
+
+  // 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,
+}: ImageMarkerProps) {
+  // Build marker config
+
+  // 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: {
+        style: 'image' as const,
+        image: {
+          imageUrl,
+          imageBase64,
+          width,
+          height,
+          cornerRadius,
+          borderWidth,
+          borderColor: parseColor(borderColor) ?? Colors.gray,
+        },
+      },
+      animation,
+    }),
+    [
+      coordinate,
+      title,
+      description,
+      draggable,
+      opacity,
+      rotation,
+      zIndex,
+      anchor,
+      clusteringEnabled,
+      imageUrl,
+      imageBase64,
+      width,
+      height,
+      cornerRadius,
+      borderWidth,
+      borderColor,
+      animation,
+    ]
+  );
+
+  // Use shared marker hook
+  useNitroMarker({
+    idPrefix: 'image_marker',
+    providedId: id,
+    handlers,
+    buildMarkerData,
+  });
+
+  return null;
+}, arePropsEqual);
+
+export default ImageMarker;