@superrouteca/smap-react-native 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 1.0.0 (unreleased)
+
+- `<SMap>` (a New Architecture native view over the sMap Android and iOS SDKs) with access, style, language, camera and
+  3D building props; the ref and `useSMap()` give the map.
+- `<Points>`, `<Lines>` and `<Polygons>` added, updated and removed with the components, with `onTap`.
+- Tokens from `getToken`, renewed before they expire; map keys (`apiKey`).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Goodneo Solutions
+
+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/README.md

@@ -1,3 +1,117 @@
-# Temporary Holding Version
+# @superrouteca/smap-react-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React Native map view for Superroute's sMap service, over the sMap Android and iOS SDKs: five colour schemes,
+labels in any language, your points, lines and areas drawn on the GPU (clustered or not), 3D buildings and areas, and
+tokens that renew themselves. The same components as [`@superrouteca/smap-react`](../react): `<SMap>`, `<Points>`,
+`<Lines>`, `<Polygons>`, `useSMap()`.
+
+- Version 1.0.0, MIT licence (see `LICENSE` at the repository root)
+- React Native 0.81 or later with the New Architecture (a Fabric component); built and tested with 0.88
+- Android 7.0 (API 24) and later, iOS 15.1 and later
+
+## Installation
+
+```sh
+npm install @superrouteca/smap-react-native
+```
+
+**Android.** The sMap Android SDK comes from JitPack (`com.github.Goodneo-Solutions:smap-sdk:1.0.0`); the package
+adds the JitPack repository itself. Set `smapAndroidVersion` in the root `ext { }` of `android/build.gradle` to use
+another release tag.
+
+**iOS.** The sMap iOS SDK is a Swift package, added to the pod by CocoaPods. Add two lines to `ios/Podfile`, then run
+`pod install`:
+
+```ruby
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve("@superrouteca/smap-react-native/ios/smap_react_native.rb", {paths: [process.argv[1]]})',
+  __dir__]).strip
+
+# ... inside the target:
+  post_install do |installer|
+    react_native_post_install(installer, config[:reactNativePath], :mac_catalyst_enabled => false)
+    SMapReactNative.post_install(installer)   # embeds the map framework in the app
+  end
+```
+
+## A minimal map
+
+```tsx
+import { useRef } from 'react';
+import { SMap, Points, Lines, Polygons, type SMapHandle } from '@superrouteca/smap-react-native';
+
+export function Deliveries({ stops, route, zones }) {
+  const map = useRef<SMapHandle>(null);
+  return (
+    <SMap ref={map} apiKey="smk_…" style="light" language="en" center={[-79.38, 43.65]} zoom={11}
+      containerStyle={{ flex: 1 }} onReady={(m) => m.fitLayer('stops')}>
+      <Points id="stops" data={stops} options={{ cluster: true, label: 'name' }}
+        onTap={(properties) => console.log(properties.name)} />
+      <Lines id="route" data={route} options={{ color: '#16a34a', width: 5 }} />
+      <Polygons id="zones" data={zones} options={{ fill: '#f97316', extrude: { height: 'height' } }} />
+    </SMap>
+  );
+}
+```
+
+### `<SMap>` props
+
+| Prop | |
+|---|---|
+| `apiKey`, `token`, `getToken` | access, see below |
+| `style` | `light`, `white`, `grayscale`, `dark`, `black`; a change keeps the layers (a style object here is taken as `containerStyle`) |
+| `language` | label language (`en`, `fr`, `zh-Hans`, …), the device language by default; a change keeps the layers |
+| `center`, `zoom`, `bearing`, `pitch` | the camera; it follows a change |
+| `buildings3D` | buildings in 3D |
+| `nodes`, `baseUrl`, `nearest` | the service (default `https://tile.srsr.ca`) |
+| `containerStyle` | the layout of the map view (default `flex: 1`) |
+| `onReady(map)`, `onError(error)` | |
+
+`apiKey`, `token`, `getToken`, `baseUrl`, `nodes` and `nearest` are read when the map is created; changing one creates
+the map again (its layers are added again).
+
+The ref (and `useSMap()` inside `<SMap>`) is the map once it is ready, null before: `addPoints`, `addLines`,
+`addPolygons`, `setData`, `setVisible`, `removeLayer`, `layers()`, `fitLayer(id, {padding, maxZoom})`,
+`flyTo(center, zoom?)`, `onTap(id, handler)`, `setStyle`, `setLanguage`, `setBuildings3D`.
+
+### Layers
+
+`<Points>`, `<Lines>` and `<Polygons>` take `id`, `data` (GeoJSON, or an array of `{lng, lat, …properties}`),
+`options`, `onTap(properties, {lat, lng})` and `visible`; they are added when the map is ready and removed on unmount.
+
+- Points: `cluster` (`true` or `{radius, maxZoom}`), `color`, `radius`, `strokeColor`, `icon` (an image registered
+  with the native map), `iconSize`, `label` (a property), `minZoom`, `maxZoom`, `zIndex`
+- Lines: `color`, `width`, `dash`, `opacity`, `minZoom`, `maxZoom`, `zIndex`
+- Polygons: `fill`, `opacity`, `outline`, `outlineWidth`, `extrude` (`{height, base}`: numbers or property names),
+  `minZoom`, `maxZoom`, `zIndex`
+
+Higher `zIndex` draws on top, then the order added.
+
+## Map keys and tokens
+
+- **Map key** (`apiKey="smk_…"`): created in the Superroute developer center with the apps it may be used from
+  (Android: package name and signing certificate; iOS: bundle id). Safe to ship inside the app. The SDK sends the
+  app's identity, read from the system, with every request to the map service.
+- **Token** (`token`, or `getToken={async () => …}`): signed by your own server for a limited time; with `getToken` a
+  new token is asked for two minutes before the current one expires.
+- With both, both are sent and the token is checked first.
+
+The identity reaches the map's own requests through an app-wide hook of the native map; an app that sets its own
+HTTP client (Android) or network delegate (iOS) for the map afterwards replaces it, and those requests then go
+without the identity.
+
+## Data attribution
+
+The map data credit stays visible on every map, as the data licence requires.
+
+## Example and tests
+
+```sh
+npm install && npm test                 # the JS layer
+cd example && npm install
+npx react-native run-android            # or: cd ios && pod install && cd .. && npx react-native run-ios
+```
+
+The example builds against the Android and iOS SDKs in this repository (`example/android/settings.gradle` includes
+`../../android/smap`; the podspec uses `../ios` when it exists, or `SMAP_IOS_PACKAGE_PATH`). Put a map key that allows
+`ca.superroute.smap.rnexample` in `SMAP_KEY` in `example/App.tsx`.

package/SMapReactNative.podspec

@@ -0,0 +1,23 @@
+require "json"
+require_relative "ios/smap_react_native"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "SMapReactNative"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = { :type => package["license"] }
+  s.authors      = package["author"]
+  s.platforms    = { :ios => "15.1" }
+  s.source       = { :git => "https://github.com/Goodneo-Solutions/smap-sdk.git", :tag => s.version.to_s }
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.swift_version = "5.9"
+  s.pod_target_xcconfig = { "DEFINES_MODULE" => "YES" }
+
+  install_modules_dependencies(s)
+
+  # The sMap iOS SDK (Swift package); see ios/smap_react_native.rb for which copy and for the app's Podfile line.
+  SMapReactNative.add_to_pod(s)
+end

package/android/build.gradle

@@ -0,0 +1,46 @@
+// The React Native module over the sMap Android SDK (ca.superroute.smap).
+//
+// The SDK comes from JitPack (com.github.Goodneo-Solutions:smap-sdk:<version>, the tag of this release) unless
+// the app includes the SDK's source as the project ':smap-android' (the example does, so it builds against the
+// SDK in this repository). Set `smapAndroidVersion` in the app's root `ext` to pick another tag.
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+apply plugin: "com.android.library"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+android {
+    namespace "ca.superroute.smap.reactnative"
+    compileSdk safeExtGet("compileSdkVersion", 36)
+
+    defaultConfig {
+        minSdk safeExtGet("minSdkVersion", 24)
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+}
+
+kotlin {
+    jvmToolchain(17)
+}
+
+repositories {
+    google()
+    mavenCentral()
+    maven { url "https://jitpack.io" }
+}
+
+dependencies {
+    implementation "com.facebook.react:react-android"
+    def localSdk = rootProject.findProject(":smap-android")
+    if (localSdk != null) {
+        api localSdk
+    } else {
+        api "com.github.Goodneo-Solutions:smap-sdk:${safeExtGet("smapAndroidVersion", "1.0.0")}"
+    }
+}

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/java/ca/superroute/smap/reactnative/SMapPackage.kt

@@ -0,0 +1,17 @@
+package ca.superroute.smap.reactnative
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+/** Registers the map view with React Native (found by autolinking). */
+class SMapPackage : BaseReactPackage() {
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+        listOf(SMapViewManager())
+
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider { emptyMap() }
+}

package/android/src/main/java/ca/superroute/smap/reactnative/SMapReactView.kt

@@ -0,0 +1,314 @@
+package ca.superroute.smap.reactnative
+
+import android.net.Uri
+import android.widget.FrameLayout
+import ca.superroute.smap.SMap
+import ca.superroute.smap.SMapCluster
+import ca.superroute.smap.SMapExtrude
+import ca.superroute.smap.SMapFlavor
+import ca.superroute.smap.SMapGeoJson
+import ca.superroute.smap.SMapLineOptions
+import ca.superroute.smap.SMapOptions
+import ca.superroute.smap.SMapPointOptions
+import ca.superroute.smap.SMapPolygonOptions
+import ca.superroute.smap.SMapValue
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import kotlinx.coroutines.CompletableDeferred
+import org.json.JSONArray
+import org.json.JSONObject
+import org.maplibre.android.camera.CameraPosition
+import org.maplibre.android.camera.CameraUpdateFactory
+import org.maplibre.android.geometry.LatLng
+
+/**
+ * The view behind `<SMap>`: holds one [SMap], created when the first props arrive (the `config` prop is read then,
+ * and a new config arrives as a new view). Props switch the style, the language, the camera and 3D buildings;
+ * commands add and change layers; events report readiness, errors, taps and token requests.
+ */
+class SMapReactView(private val reactContext: ThemedReactContext) : FrameLayout(reactContext), LifecycleEventListener {
+    var config: String? = null
+    private var flavor: String? = null
+    private var language: String? = null
+    private var camera: String? = null
+    private var buildings = false
+
+    private var map: SMap? = null
+    private var appliedFlavor: String? = null
+    private var appliedLanguage: String? = null
+    private var appliedCamera: String? = null
+    private var appliedBuildings = false
+    private var destroyed = false
+    private var nextTokenRequest = 0
+    private val tokenRequests = HashMap<Int, CompletableDeferred<String>>()
+
+    init {
+        reactContext.addLifecycleEventListener(this)
+    }
+
+    // ------------------------------------------------------------------ props
+
+    fun setFlavor(value: String?) { flavor = value }
+    fun setLanguageTag(value: String?) { language = value }
+    fun setCamera(value: String?) { camera = value }
+    fun setBuildings(value: Boolean) { buildings = value }
+
+    /** Called once all props of an update are set: creates the map on the first update, then applies changes. */
+    fun commitProps() {
+        if (destroyed) return
+        val m = map ?: run { create(); return }
+        if (flavor != appliedFlavor) {
+            appliedFlavor = flavor
+            m.setStyle(SMapFlavor.fromId(flavor))
+        }
+        val tag = language?.takeIf { it.isNotEmpty() }
+        if (language != appliedLanguage) {
+            appliedLanguage = language
+            if (tag != null) m.setLanguage(tag)
+        }
+        if (camera != appliedCamera) {
+            appliedCamera = camera
+            moveCamera(m, camera)
+        }
+        if (buildings != appliedBuildings) {
+            appliedBuildings = buildings
+            m.setBuildings3D(buildings)
+        }
+    }
+
+    private fun create() {
+        val c = try { JSONObject(config ?: "{}") } catch (e: Exception) { JSONObject() }
+        val cam = parseObject(camera)
+        val wantsToken = c.optBoolean("getToken", false)
+        val options = SMapOptions(
+            baseUrl = c.optStringOrNull("baseUrl") ?: SMapOptions.DEFAULT_BASE_URL,
+            nodes = c.optJSONArray("nodes")?.let { a -> (0 until a.length()).map { a.getString(it) } } ?: emptyList(),
+            token = c.optStringOrNull("token"),
+            getToken = if (wantsToken) ({ requestToken() }) else null,
+            apiKey = c.optStringOrNull("apiKey"),
+            nearest = c.optBoolean("nearest", true),
+            style = SMapFlavor.fromId(flavor),
+            language = language?.takeIf { it.isNotEmpty() },
+            center = if (cam.has("lat") && cam.has("lng")) LatLng(cam.getDouble("lat"), cam.getDouble("lng")) else null,
+            zoom = cam.optDoubleOrNull("zoom"),
+            bearing = cam.optDoubleOrNull("bearing"),
+            pitch = cam.optDoubleOrNull("pitch"),
+            onError = { e -> emit("mapError") { putString("message", e.message ?: e.toString()) } },
+        )
+        appliedFlavor = flavor
+        appliedLanguage = language
+        appliedCamera = camera
+        appliedBuildings = buildings
+        val m = SMap(context, options)
+        map = m
+        addView(m, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        m.onCreate(null)
+        m.onStart()
+        m.onResume()
+        if (buildings) m.setBuildings3D(true)
+        m.ready { ready ->
+            if (destroyed) return@ready
+            val node = Uri.parse(ready.styleUrl).let { "${it.scheme}://${it.authority}" }
+            emit("mapReady") { putString("node", node) }
+        }
+    }
+
+    private fun moveCamera(m: SMap, json: String?) {
+        val engine = m.engine ?: return
+        val cam = parseObject(json)
+        val b = CameraPosition.Builder(engine.cameraPosition)
+        if (cam.has("lat") && cam.has("lng")) b.target(LatLng(cam.getDouble("lat"), cam.getDouble("lng")))
+        cam.optDoubleOrNull("zoom")?.let { b.zoom(it) }
+        cam.optDoubleOrNull("bearing")?.let { b.bearing(it) }
+        cam.optDoubleOrNull("pitch")?.let { b.tilt(it) }
+        engine.moveCamera(CameraUpdateFactory.newCameraPosition(b.build()))
+    }
+
+    // ------------------------------------------------------------------ commands
+
+    fun addLayer(kind: String, id: String, data: String, options: String) {
+        val m = map ?: return
+        val o = parseObject(options)
+        try {
+            val fc = SMapGeoJson.toFeatureCollection(data)
+            when (kind) {
+                "points" -> m.addPoints(id, fc, pointOptions(o))
+                "lines" -> m.addLines(id, fc, lineOptions(o))
+                "polygons" -> m.addPolygons(id, fc, polygonOptions(o))
+                else -> throw IllegalArgumentException("sMap: unknown layer kind $kind")
+            }
+            m.onTap(id) { properties, latLng ->
+                emit("layerTap") {
+                    putString("layerId", id)
+                    putString("properties", JSONObject(jsonSafe(properties)).toString())
+                    putDouble("lat", latLng.latitude)
+                    putDouble("lng", latLng.longitude)
+                }
+            }
+        } catch (e: Exception) {
+            emit("mapError") { putString("message", e.message ?: e.toString()) }
+        }
+    }
+
+    fun setLayerData(id: String, data: String) {
+        try {
+            map?.setData(id, data)
+        } catch (e: Exception) {
+            emit("mapError") { putString("message", e.message ?: e.toString()) }
+        }
+    }
+
+    fun setLayerVisible(id: String, visible: Boolean) { map?.setVisible(id, visible) }
+
+    fun removeLayer(id: String) { map?.removeLayer(id) }
+
+    fun fitLayer(id: String, padding: Double, maxZoom: Double) { map?.fitLayer(id, padding.toInt(), maxZoom) }
+
+    fun flyTo(lat: Double, lng: Double, zoom: Double) { map?.flyTo(LatLng(lat, lng), if (zoom < 0) null else zoom) }
+
+    fun resolveToken(requestId: Int, token: String, error: String) {
+        val d = tokenRequests.remove(requestId) ?: return
+        if (token.isNotEmpty()) d.complete(token) else d.completeExceptionally(IllegalStateException(error.ifEmpty { "sMap: no token" }))
+    }
+
+    private suspend fun requestToken(): String {
+        val id = ++nextTokenRequest
+        val d = CompletableDeferred<String>()
+        tokenRequests[id] = d
+        emit("tokenRequest") { putInt("requestId", id) }
+        return d.await()
+    }
+
+    // ------------------------------------------------------------------ lifecycle and layout
+
+    override fun onHostResume() { map?.onResume() }
+    override fun onHostPause() { map?.onPause() }
+    override fun onHostDestroy() { destroy() }
+
+    fun destroy() {
+        if (destroyed) return
+        destroyed = true
+        reactContext.removeLifecycleEventListener(this)
+        tokenRequests.values.forEach { it.cancel() }
+        tokenRequests.clear()
+        map?.let {
+            it.onPause()
+            it.onStop()
+            it.onDestroy()
+            removeView(it)
+        }
+        map = null
+    }
+
+    // React Native lays out its own views only; the map's native views are measured and placed here.
+    // Nullable: requestLayout() is also called by the super constructor, before this field is set.
+    private val measureAndLayout: Runnable? = Runnable {
+        measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+        layout(left, top, right, bottom)
+    }
+
+    override fun requestLayout() {
+        super.requestLayout()
+        measureAndLayout?.let { post(it) }
+    }
+
+    // ------------------------------------------------------------------ events
+
+    private fun emit(name: String, fill: WritableMap.() -> Unit) {
+        val data = Arguments.createMap().apply(fill)
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        UIManagerHelper.getEventDispatcher(reactContext)?.dispatchEvent(SMapEvent(surfaceId, id, name, data))
+    }
+
+    private class SMapEvent(surfaceId: Int, viewTag: Int, private val name: String, private val data: WritableMap) :
+        Event<SMapEvent>(surfaceId, viewTag) {
+        override fun getEventName(): String = "top" + name.replaceFirstChar(Char::uppercaseChar)
+        override fun getEventData(): WritableMap = data
+    }
+
+    companion object {
+        val EVENTS = listOf("mapReady", "mapError", "layerTap", "tokenRequest")
+
+        private fun parseObject(json: String?): JSONObject =
+            try { if (json.isNullOrEmpty()) JSONObject() else JSONObject(json) } catch (e: Exception) { JSONObject() }
+
+        private fun JSONObject.optStringOrNull(name: String): String? =
+            if (has(name) && !isNull(name)) optString(name).takeIf { it.isNotEmpty() } else null
+
+        private fun JSONObject.optDoubleOrNull(name: String): Double? =
+            if (has(name) && !isNull(name)) optDouble(name).takeIf { !it.isNaN() } else null
+
+        private fun JSONObject.optFloat(name: String, alt: String? = null): Float? =
+            (optDoubleOrNull(name) ?: alt?.let { optDoubleOrNull(it) })?.toFloat()
+
+        private fun value(o: JSONObject, name: String, fallback: Double): SMapValue = when {
+            !o.has(name) || o.isNull(name) -> SMapValue.Fixed(fallback)
+            o.get(name) is String -> SMapValue.Property(o.getString(name))
+            else -> SMapValue.Fixed(o.optDouble(name, fallback))
+        }
+
+        /** Point options from JSON; names as in every sMap SDK (`minzoom` / `maxzoom` as in the Web SDK too). */
+        fun pointOptions(o: JSONObject): SMapPointOptions {
+            val d = SMapPointOptions()
+            val cluster = when (val c = o.opt("cluster")) {
+                is JSONObject -> SMapCluster(radius = c.optInt("radius", 50), maxZoom = c.optInt("maxZoom", 14))
+                true -> SMapCluster()
+                else -> null
+            }
+            return SMapPointOptions(
+                cluster = cluster,
+                color = o.optStringOrNull("color") ?: d.color,
+                radius = o.optFloat("radius") ?: d.radius,
+                strokeColor = o.optStringOrNull("strokeColor") ?: d.strokeColor,
+                icon = o.optStringOrNull("icon"),
+                iconSize = o.optFloat("iconSize") ?: d.iconSize,
+                label = o.optStringOrNull("label"),
+                minZoom = o.optFloat("minZoom", "minzoom"),
+                maxZoom = o.optFloat("maxZoom", "maxzoom"),
+                zIndex = o.optInt("zIndex", 0),
+            )
+        }
+
+        fun lineOptions(o: JSONObject): SMapLineOptions {
+            val d = SMapLineOptions()
+            val dash = o.optJSONArray("dash")?.let { a -> (0 until a.length()).map { a.getDouble(it).toFloat() } }
+            return SMapLineOptions(
+                color = o.optStringOrNull("color") ?: d.color,
+                width = o.optFloat("width") ?: d.width,
+                dash = dash,
+                opacity = o.optFloat("opacity") ?: d.opacity,
+                minZoom = o.optFloat("minZoom", "minzoom"),
+                maxZoom = o.optFloat("maxZoom", "maxzoom"),
+                zIndex = o.optInt("zIndex", 0),
+            )
+        }
+
+        fun polygonOptions(o: JSONObject): SMapPolygonOptions {
+            val d = SMapPolygonOptions()
+            val extrude = o.optJSONObject("extrude")?.let { e -> SMapExtrude(height = value(e, "height", 20.0), base = value(e, "base", 0.0)) }
+            return SMapPolygonOptions(
+                fill = o.optStringOrNull("fill") ?: o.optStringOrNull("color") ?: d.fill,
+                opacity = o.optFloat("opacity") ?: d.opacity,
+                outline = o.optStringOrNull("outline"),
+                outlineWidth = o.optFloat("outlineWidth") ?: d.outlineWidth,
+                extrude = extrude,
+                minZoom = o.optFloat("minZoom", "minzoom"),
+                maxZoom = o.optFloat("maxZoom", "maxzoom"),
+                zIndex = o.optInt("zIndex", 0),
+            )
+        }
+
+        private fun jsonSafe(value: Map<String, Any?>): Map<String, Any?> = value.mapValues { (_, v) -> toJsonValue(v) }
+
+        private fun toJsonValue(v: Any?): Any? = when (v) {
+            null -> JSONObject.NULL
+            is Map<*, *> -> JSONObject(v.entries.associate { it.key.toString() to toJsonValue(it.value) })
+            is List<*> -> JSONArray(v.map { toJsonValue(it) })
+            else -> v
+        }
+    }
+}

package/android/src/main/java/ca/superroute/smap/reactnative/SMapViewManager.kt

@@ -0,0 +1,71 @@
+package ca.superroute.smap.reactnative
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.SMapNativeViewManagerDelegate
+import com.facebook.react.viewmanagers.SMapNativeViewManagerInterface
+
+/** The Fabric view manager of `SMapNativeView`; props and commands are routed by the generated delegate. */
+@ReactModule(name = SMapViewManager.NAME)
+class SMapViewManager : SimpleViewManager<SMapReactView>(), SMapNativeViewManagerInterface<SMapReactView> {
+    private val delegate: ViewManagerDelegate<SMapReactView> = SMapNativeViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<SMapReactView> = delegate
+
+    override fun getName(): String = NAME
+
+    override fun createViewInstance(context: ThemedReactContext): SMapReactView = SMapReactView(context)
+
+    override fun onAfterUpdateTransaction(view: SMapReactView) {
+        super.onAfterUpdateTransaction(view)
+        view.commitProps()
+    }
+
+    override fun onDropViewInstance(view: SMapReactView) {
+        view.destroy()
+        super.onDropViewInstance(view)
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> = SMapReactView.EVENTS.associate {
+        "top" + it.replaceFirstChar(Char::uppercaseChar) to mapOf("registrationName" to "on" + it.replaceFirstChar(Char::uppercaseChar))
+    }
+
+    @ReactProp(name = "config")
+    override fun setConfig(view: SMapReactView, value: String?) { view.config = value }
+
+    @ReactProp(name = "mapStyle")
+    override fun setMapStyle(view: SMapReactView, value: String?) { view.setFlavor(value) }
+
+    @ReactProp(name = "language")
+    override fun setLanguage(view: SMapReactView, value: String?) { view.setLanguageTag(value) }
+
+    @ReactProp(name = "camera")
+    override fun setCamera(view: SMapReactView, value: String?) { view.setCamera(value) }
+
+    @ReactProp(name = "buildings3D")
+    override fun setBuildings3D(view: SMapReactView, value: Boolean) { view.setBuildings(value) }
+
+    override fun addLayer(view: SMapReactView, kind: String, id: String, data: String, options: String) =
+        view.addLayer(kind, id, data, options)
+
+    override fun setData(view: SMapReactView, id: String, data: String) = view.setLayerData(id, data)
+
+    override fun setVisible(view: SMapReactView, id: String, visible: Boolean) = view.setLayerVisible(id, visible)
+
+    override fun removeLayer(view: SMapReactView, id: String) = view.removeLayer(id)
+
+    override fun fitLayer(view: SMapReactView, id: String, padding: Double, maxZoom: Double) =
+        view.fitLayer(id, padding, maxZoom)
+
+    override fun flyTo(view: SMapReactView, lat: Double, lng: Double, zoom: Double) = view.flyTo(lat, lng, zoom)
+
+    override fun resolveToken(view: SMapReactView, requestId: Int, token: String, error: String) =
+        view.resolveToken(requestId, token, error)
+
+    companion object {
+        const val NAME = "SMapNativeView"
+    }
+}