@maydon_tech/react-native-nitro-maps 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 alisher rakhimov
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NitroMap.podspec

@@ -0,0 +1,42 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "NitroMap"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => '16.0' }
+  s.source       = { :git => "https://github.com/maydongroup/react-native-nitro-maps.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{swift,h,m,mm}",
+    "cpp/**/*.{h,hpp,cpp}",
+  ]
+
+  # C++ settings for ClusterEngine
+  s.pod_target_xcconfig = {
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17',
+    'CLANG_CXX_LIBRARY' => 'libc++',
+    'HEADER_SEARCH_PATHS' => '"${PODS_TARGET_SRCROOT}/cpp"',
+    'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited)'
+  }
+
+  # Expose Objective-C++ wrapper header for Swift
+  s.public_header_files = [
+    "ios/Clustering/ClusterEngineWrapper.h"
+  ]
+
+  s.dependency 'React-jsi'
+  s.dependency 'React-callinvoker'
+  s.dependency 'GoogleMaps', '~> 10.7.0'
+  s.dependency 'Google-Maps-iOS-Utils', '~> 6.1.3'
+  load 'nitrogen/generated/ios/NitroMap+autolinking.rb'
+  add_nitrogen_files(s)
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,172 @@
+<p align="center">
+  <h1 align="center">@maydon_tech/react-native-nitro-maps</h1>
+</p>
+
+<p align="center">
+  <b>High-performance multi-provider maps for React Native</b><br/>
+  Built on <a href="https://nitro.margelo.com/">Nitro Modules</a> — C++ JSI, zero bridge overhead
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@maydon_tech/react-native-nitro-maps"><img src="https://img.shields.io/npm/v/@maydon_tech/react-native-nitro-maps?color=0a7fca&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/maydongroup/react-native-nitro-maps/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@maydon_tech/react-native-nitro-maps?color=41b883" alt="license" /></a>
+  <img src="https://img.shields.io/badge/platforms-iOS%20%7C%20Android-lightgrey" alt="platforms" />
+  <img src="https://img.shields.io/badge/architecture-New%20Architecture-blue" alt="new architecture" />
+</p>
+
+---
+
+## Why This Library?
+
+Most React Native map libraries were built on the old Bridge. We built ours on **C++ JSI** — native calls with zero serialization.
+
+|                      | react-native-maps | @rnmapbox | **nitro-maps** |
+|----------------------|-------------------|-----------|-----------------------------|
+| **Architecture**     | Old Bridge        | JS-heavy  | **C++ JSI (Nitro Modules)** |
+| **Clustering**       | JS thread (slow)  | JS thread | **C++ Supercluster engine** |
+| **Marker rendering** | React views       | Mixed     | **Native bitmaps**          |
+| **Vendors**          | Google, Apple     | Mapbox    | **Google, Apple, Yandex**   |
+| **30K markers**      | ❌ Freezes        | ⚠️ Slow   | **✅ < 40ms**               |
+
+## Highlights
+
+- 🚀 **C++ JSI** — Nitro Modules bridge, zero serialization overhead
+- 🗺️ **Multi-vendor** — Google Maps · Apple MapKit · Yandex MapKit, one unified API
+- 📍 **C++ clustering** — Supercluster + KDBush handles 30,000+ markers
+- 💰 **Native markers** — Price pills, images rendered as bitmaps — no React views
+- ⚡ **Live clustering** — Real-time cluster updates during pan/zoom gestures
+- 🌙 **Dark mode** — Built-in dark theme support across all vendors
+- 📱 **New Architecture** — Fabric-ready, TurboModules compatible
+
+## Quick Start
+
+```bash
+npm install @maydon_tech/react-native-nitro-maps react-native-nitro-modules
+cd ios && pod install
+```
+
+```tsx
+import {
+  NitroMap,
+  NitroMapInitialize,
+  PriceMarker,
+} from '@maydon_tech/react-native-nitro-maps';
+
+// Initialize once at app startup
+NitroMapInitialize('YOUR_API_KEY', 'google');
+
+export default function App() {
+  return (
+    <NitroMap
+      provider="google"
+      initialRegion={{
+        latitude: 41.2995,
+        longitude: 69.2401,
+        latitudeDelta: 0.05,
+        longitudeDelta: 0.05,
+      }}
+      clusterConfig={{
+        enabled: true,
+        strategy: 'supercluster',
+        radius: 80,
+      }}
+    >
+      <PriceMarker
+        coordinate={{ latitude: 41.2995, longitude: 69.2401 }}
+        price="150K"
+        currency="UZS"
+      />
+    </NitroMap>
+  );
+}
+```
+
+## Providers
+
+| Provider        | iOS | Android | API Key  | Notes                  |
+|-----------------|-----|---------|----------|------------------------|
+| **Google Maps** | ✅  | 🔜      | Required | Best global coverage   |
+| **Apple Maps**  | 🔜  | —       | Free     | iOS only, zero SDK     |
+| **Yandex Maps** | 🔜  | 🔜      | Required | Best for CIS countries |
+
+> ✅ Implemented · 🔜 Planned · — Not applicable
+
+## Clustering
+
+Two strategies, powered by a shared C++ engine:
+
+**`supercluster`** — Groups nearby markers. Overlaps acceptable.
+Best for general-purpose maps.
+
+**`hideOnOverlap`** — Same grouping, but hides lower-priority overlapping items.
+Every visible marker sits at its real geographic position.
+Best for real estate, hospitality — what Zillow and Airbnb use.
+
+```tsx
+<NitroMap
+  clusterConfig={{
+    enabled: true,
+    strategy: 'hideOnOverlap',
+    radius: 80,
+    realtimeClustering: true,   // live updates during gestures
+    renderBuffer: 0.5,           // pre-compute 50% beyond viewport
+    throttleInterval: 200,       // balance perf vs smoothness
+  }}
+>
+```
+
+| Markers | Clustering Time |
+|---------|-----------------|
+| 100     | < 1ms           |
+| 1,000   | ~ 2ms           |
+| 10,000  | ~ 15ms          |
+| 30,000  | ~ 40ms          |
+
+<sub>Measured on iPhone 12, including spatial index build + cluster query.</sub>
+
+## Documentation
+
+| Guide | Description |
+|---|---|
+| [**Setup & Installation**](docs/setup.md) | Per-vendor setup for iOS and Android |
+| [**API Reference**](docs/api.md) | Components, props, methods, types, events |
+| [**Clustering**](docs/clustering.md) | Strategies, live clustering, render buffer, performance |
+| [**Feature Support**](docs/features.md) | What's available on each provider |
+| [**Examples**](docs/examples.md) | Selection, dragging, clustering, overlays |
+| [**Migration**](docs/migration.md) | Breaking changes between versions |
+
+## Architecture
+
+```
+  React Native (JS)
+        │
+        ▼
+  ┌─────────────┐
+  │  NitroMap    │  ← React component
+  │  PriceMarker │  ← Declarative children
+  │  ImageMarker │
+  └──────┬──────┘
+         │ C++ JSI (zero-copy)
+         ▼
+  ┌──────────────────┐
+  │  Nitro Modules   │  ← C++ bridge layer
+  │  HybridObject    │
+  └──────┬───────────┘
+         │
+    ┌────┴─────┬──────────────┐
+    ▼          ▼              ▼
+  Google    Apple          Yandex
+  Provider  Provider       Provider
+  (Swift)   (Swift)        (Swift)
+    │          │              │
+    ▼          ▼              ▼
+  GMSMapView MKMapView    YMKMapView
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup.
+
+## License
+
+[MIT](LICENSE) · Made by [Maydon Tech](https://github.com/maydongroup)

package/android/CMakeLists.txt

@@ -0,0 +1,27 @@
+project(nitromap)
+cmake_minimum_required(VERSION 3.9.0)
+
+set(PACKAGE_NAME nitromap)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+set(CMAKE_CXX_STANDARD 20)
+
+# Enable 16KB page alignment for Android 15+ devices
+set(CMAKE_SHARED_LINKER_FLAGS "${CMAKE_SHARED_LINKER_FLAGS} -Wl,-z,max-page-size=16384")
+
+# Define C++ library and add all sources
+add_library(${PACKAGE_NAME} SHARED src/main/cpp/cpp-adapter.cpp)
+
+# Add Nitrogen specs :)
+include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/nitromap+autolinking.cmake)
+
+# Set up local includes
+include_directories("src/main/cpp" "../cpp")
+
+find_library(LOG_LIB log)
+
+# Link all libraries together
+target_link_libraries(
+        ${PACKAGE_NAME}
+        ${LOG_LIB}
+        android # <-- Android core
+)

package/android/build.gradle

@@ -0,0 +1,141 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['NitroMap_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply from: '../nitrogen/generated/android/nitromap+autolinking.gradle'
+
+if (rootProject.hasProperty('react')) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrIntegerDefault(name) {
+  if (rootProject.ext.has(name)) {
+    return rootProject.ext.get(name)
+  }
+  def prop = project.properties["NitroMap_" + name]
+  return prop != null ? prop.toInteger() : null
+}
+
+android {
+  namespace "com.margelo.nitro.nitromap"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+
+    externalNativeBuild {
+      cmake {
+        cppFlags "-frtti -fexceptions -Wall -fstack-protector-all"
+        arguments "-DANDROID_STL=c++_shared", "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
+        abiFilters (*reactNativeArchitectures())
+
+        buildTypes {
+          debug {
+            cppFlags "-O1 -g"
+          }
+          release {
+            cppFlags "-O2"
+          }
+        }
+      }
+    }
+  }
+
+  externalNativeBuild {
+    cmake {
+      path "CMakeLists.txt"
+    }
+  }
+
+  packagingOptions {
+    excludes = [
+            "META-INF",
+            "META-INF/**",
+            "**/libc++_shared.so",
+            "**/libfbjni.so",
+            "**/libjsi.so",
+            "**/libfolly_json.so",
+            "**/libfolly_runtime.so",
+            "**/libglog.so",
+            "**/libhermes.so",
+            "**/libhermes-executor-debug.so",
+            "**/libhermes_executor.so",
+            "**/libreactnative.so",
+            "**/libreactnativejni.so",
+            "**/libturbomodulejsijni.so",
+            "**/libreact_nativemodule_core.so",
+            "**/libjscexecutor.so"
+    ]
+  }
+
+  buildFeatures {
+    buildConfig true
+    prefab true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation project(":react-native-nitro-modules")
+
+  // Google Maps SDK
+  implementation "com.google.android.gms:play-services-maps:19.0.0"
+  implementation "com.google.android.gms:play-services-location:21.3.0"
+
+  // Coroutines for async operations
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+NitroMap_kotlinVersion=2.0.21
+NitroMap_minSdkVersion=24
+NitroMap_targetSdkVersion=34
+NitroMap_compileSdkVersion=35
+NitroMap_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+</manifest>

package/android/src/main/cpp/cpp-adapter.cpp

@@ -0,0 +1,6 @@
+#include <jni.h>
+#include "nitromapOnLoad.hpp"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
+  return margelo::nitro::nitromap::initialize(vm);
+}

package/android/src/main/java/com/margelo/nitro/nitromap/ClusterIconGenerator.kt

@@ -0,0 +1,108 @@
+package com.margelo.nitro.nitromap
+
+import android.content.Context
+import android.graphics.*
+import com.google.android.gms.maps.model.BitmapDescriptor
+import com.google.android.gms.maps.model.BitmapDescriptorFactory
+import kotlin.math.roundToInt
+import androidx.core.graphics.toColorInt
+
+/**
+ * Generator for cluster marker icons
+ */
+class ClusterIconGenerator(private val context: Context) {
+
+    private var backgroundColor = "#007AFF".toColorInt() // iOS blue
+    private var textColor = Color.WHITE
+    private var borderColor = Color.WHITE
+    private var borderWidth = 2f
+
+    private val iconCache = mutableMapOf<Int, BitmapDescriptor>()
+
+    fun updateConfig(config: ClusterConfig?) {
+        config?.let {
+            backgroundColor = ColorUtils.fromColorValue(it.backgroundColor)
+            textColor = ColorUtils.fromColorValue(it.textColor)
+            borderColor = ColorUtils.fromColorValue(it.borderColor)
+            borderWidth = it.borderWidth.toFloat()
+            // Clear cache when config changes
+            iconCache.clear()
+        }
+    }
+
+    fun getClusterIcon(count: Int): BitmapDescriptor {
+        // Check cache first
+        iconCache[count]?.let { return it }
+
+        val density = context.resources.displayMetrics.density
+
+        // Size based on count
+        val baseSize = when {
+            count < 10 -> 40
+            count < 100 -> 48
+            count < 1000 -> 56
+            else -> 64
+        }
+        val size = (baseSize * density).roundToInt()
+
+        val bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
+        val canvas = Canvas(bitmap)
+
+        // Draw background circle
+        val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+            color = backgroundColor
+            style = Paint.Style.FILL
+        }
+        canvas.drawCircle(size / 2f, size / 2f, size / 2f - borderWidth * density, bgPaint)
+
+        // Draw border
+        if (borderWidth > 0) {
+            val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+                color = borderColor
+                style = Paint.Style.STROKE
+                strokeWidth = borderWidth * density
+            }
+            canvas.drawCircle(
+                size / 2f,
+                size / 2f,
+                size / 2f - borderWidth * density / 2,
+                borderPaint
+            )
+        }
+
+        // Draw count text
+        val text = formatCount(count)
+        val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+            color = textColor
+            textSize = when {
+                count < 10 -> 16 * density
+                count < 100 -> 14 * density
+                count < 1000 -> 12 * density
+                else -> 10 * density
+            }
+            typeface = Typeface.DEFAULT_BOLD
+            textAlign = Paint.Align.CENTER
+        }
+
+        val textBounds = Rect()
+        textPaint.getTextBounds(text, 0, text.length, textBounds)
+        val textY = size / 2f + textBounds.height() / 2f
+        canvas.drawText(text, size / 2f, textY, textPaint)
+
+        val descriptor = BitmapDescriptorFactory.fromBitmap(bitmap)
+        iconCache[count] = descriptor
+        return descriptor
+    }
+
+    private fun formatCount(count: Int): String {
+        return when {
+            count >= 1000000 -> "${count / 1000000}M"
+            count >= 1000 -> "${count / 1000}K"
+            else -> count.toString()
+        }
+    }
+
+    fun clearCache() {
+        iconCache.clear()
+    }
+}

package/android/src/main/java/com/margelo/nitro/nitromap/ColorUtils.kt

@@ -0,0 +1,63 @@
+package com.margelo.nitro.nitromap
+
+import android.graphics.Color
+import androidx.core.graphics.toColorInt
+
+/**
+ * Utility functions for converting color types to Android color integers
+ */
+object ColorUtils {
+
+    /**
+     * Convert MarkerColor (RGBA) to Android color int
+     */
+    fun fromMarkerColor(color: MarkerColor): Int {
+        // Handle alpha: if <= 1.0, treat as 0-1 range and scale to 0-255
+        val alpha = if (color.a <= 1.0) (color.a * 255).toInt() else color.a.toInt()
+        return Color.argb(
+            alpha.coerceIn(0, 255),
+            color.r.toInt().coerceIn(0, 255),
+            color.g.toInt().coerceIn(0, 255),
+            color.b.toInt().coerceIn(0, 255)
+        )
+    }
+
+    /**
+     * Convert ColorValue (String | MarkerColor variant) to Android color int
+     */
+    fun fromColorValue(colorValue: ColorValue): Int {
+        return colorValue.match(
+            first = { hexString -> parseHexColor(hexString) },
+            second = { markerColor -> fromMarkerColor(markerColor) }
+        )
+    }
+
+    /**
+     * Convert Variant_String_MarkerColor to Android color int
+     */
+    fun fromVariant(variant: Variant_String_MarkerColor): Int {
+        return variant.match(
+            first = { hexString -> parseHexColor(hexString) },
+            second = { markerColor -> fromMarkerColor(markerColor) }
+        )
+    }
+
+    /**
+     * Parse hex color string to Android color int
+     * Supports formats: #RGB, #RRGGBB, #AARRGGBB, and color names
+     */
+    private fun parseHexColor(hexString: String): Int {
+        return try {
+            hexString.toColorInt()
+        } catch (e: Exception) {
+            Color.BLACK // Default fallback
+        }
+    }
+
+    /**
+     * Create a default ColorValue from a MarkerColor
+     */
+    fun defaultColorValue(r: Double, g: Double, b: Double, a: Double = 255.0): ColorValue {
+        return ColorValue.create(MarkerColor(r, g, b, a))
+    }
+}