@lugg/maps 1.0.0-beta.2 → 1.0.0-beta.21

package/README.md

@@ -116,7 +116,10 @@ import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
 - [Marker](docs/MARKER.md) - Map markers with callout support
 - [Polyline](docs/POLYLINE.md) - Draw lines on the map
 - [Polygon](docs/POLYGON.md) - Draw filled shapes on the map
+- [Circle](docs/CIRCLE.md) - Draw circular overlays on the map
 - [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map
+- [GroundOverlay](docs/GROUND_OVERLAY.md) - Display images on the map
+- [TileOverlay](docs/TILE_OVERLAY.md) - Display custom tile layers on the map
 
 ## Types
 

package/android/src/main/java/com/luggmaps/LuggCalloutView.kt

@@ -4,19 +4,21 @@ import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.view.View
+import android.view.accessibility.AccessibilityEvent
 import androidx.core.graphics.createBitmap
 import androidx.core.view.isNotEmpty
+import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.views.view.ReactViewGroup
 
 class LuggCalloutView(context: Context) : ReactViewGroup(context) {
   val contentView: ReactViewGroup = ReactViewGroup(context)
   var bubbled: Boolean = true
-  var anchorX: Float = 0.5f
+  var offsetX: Float = 0f
     set(value) {
       field = value
       onUpdate?.invoke()
     }
-  var anchorY: Float = 1.0f
+  var offsetY: Float = 0f
     set(value) {
       field = value
       onUpdate?.invoke()
@@ -28,6 +30,7 @@ class LuggCalloutView(context: Context) : ReactViewGroup(context) {
 
   init {
     visibility = GONE
+    pointerEvents = PointerEvents.NONE
   }
 
   override fun addView(child: View, index: Int) {
@@ -49,6 +52,10 @@ class LuggCalloutView(context: Context) : ReactViewGroup(context) {
 
   override fun getChildAt(index: Int): View? = contentView.getChildAt(index)
 
+  // no-op: avoid accessibility traversal of detached callout children
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) {}
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean = false
+
   fun createContentBitmap(): Bitmap? {
     var maxWidth = 0
     var maxHeight = 0

package/android/src/main/java/com/luggmaps/LuggCalloutViewManager.kt

@@ -2,6 +2,7 @@ package com.luggmaps
 
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
@@ -22,9 +23,9 @@ class LuggCalloutViewManager :
     view.bubbled = value
   }
 
-  override fun setAnchor(view: LuggCalloutView, value: ReadableMap?) {
-    view.anchorX = value?.getDouble("x")?.toFloat() ?: 0.5f
-    view.anchorY = value?.getDouble("y")?.toFloat() ?: 1.0f
+  override fun setOffset(view: LuggCalloutView, value: ReadableMap?) {
+    view.offsetX = value?.getDouble("x")?.toFloat()?.dpToPx() ?: 0f
+    view.offsetY = value?.getDouble("y")?.toFloat()?.dpToPx() ?: 0f
   }
 
   override fun onDropViewInstance(view: LuggCalloutView) {

package/android/src/main/java/com/luggmaps/LuggCircleView.kt

@@ -0,0 +1,85 @@
+package com.luggmaps
+
+import android.content.Context
+import android.graphics.Color
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.maps.model.Circle
+import com.google.android.gms.maps.model.LatLng
+import com.luggmaps.events.CirclePressEvent
+import com.luggmaps.extensions.dispatchEvent
+
+interface LuggCircleViewDelegate {
+  fun circleViewDidUpdate(circleView: LuggCircleView)
+}
+
+class LuggCircleView(context: Context) : ReactViewGroup(context) {
+  var center: LatLng = LatLng(0.0, 0.0)
+    private set
+
+  var radius: Double = 0.0
+    private set
+
+  var strokeColor: Int = Color.BLACK
+    private set
+
+  var fillColor: Int = Color.argb(77, 0, 0, 0)
+    private set
+
+  var strokeWidth: Float = 1f
+    private set
+
+  var zIndex: Float = 0f
+    private set
+
+  var tappable: Boolean = false
+    private set
+
+  var delegate: LuggCircleViewDelegate? = null
+  var circle: Circle? = null
+
+  init {
+    visibility = GONE
+  }
+
+  fun setCenter(value: LatLng) {
+    center = value
+  }
+
+  fun setRadius(value: Double) {
+    radius = value
+  }
+
+  fun setStrokeColor(color: Int) {
+    strokeColor = color
+  }
+
+  fun setFillColor(color: Int) {
+    fillColor = color
+  }
+
+  fun setStrokeWidth(width: Float) {
+    strokeWidth = width
+  }
+
+  fun setZIndex(value: Float) {
+    zIndex = value
+  }
+
+  fun setTappable(value: Boolean) {
+    tappable = value
+  }
+
+  fun emitPressEvent() {
+    dispatchEvent(CirclePressEvent(this))
+  }
+
+  fun onAfterUpdateTransaction() {
+    delegate?.circleViewDidUpdate(this)
+  }
+
+  fun onDropViewInstance() {
+    delegate = null
+    circle?.remove()
+    circle = null
+  }
+}

package/android/src/main/java/com/luggmaps/LuggCircleViewManager.kt

@@ -0,0 +1,79 @@
+package com.luggmaps
+
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.LuggCircleViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggCircleViewManagerInterface
+import com.google.android.gms.maps.model.LatLng
+
+@ReactModule(name = LuggCircleViewManager.NAME)
+class LuggCircleViewManager :
+  ViewGroupManager<LuggCircleView>(),
+  LuggCircleViewManagerInterface<LuggCircleView> {
+  private val delegate: ViewManagerDelegate<LuggCircleView> = LuggCircleViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggCircleView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggCircleView = LuggCircleView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+    mapOf("topCirclePress" to mapOf("registrationName" to "onCirclePress"))
+
+  override fun onDropViewInstance(view: LuggCircleView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun onAfterUpdateTransaction(view: LuggCircleView) {
+    super.onAfterUpdateTransaction(view)
+    view.onAfterUpdateTransaction()
+  }
+
+  @ReactProp(name = "center")
+  override fun setCenter(view: LuggCircleView, value: ReadableMap?) {
+    value?.let { map ->
+      val lat = map.getDouble("latitude")
+      val lng = map.getDouble("longitude")
+      view.setCenter(LatLng(lat, lng))
+    }
+  }
+
+  @ReactProp(name = "radius", defaultDouble = 0.0)
+  override fun setRadius(view: LuggCircleView, value: Double) {
+    view.setRadius(value)
+  }
+
+  @ReactProp(name = "strokeColor", customType = "Color")
+  override fun setStrokeColor(view: LuggCircleView, value: Int?) {
+    view.setStrokeColor(value ?: android.graphics.Color.BLACK)
+  }
+
+  @ReactProp(name = "fillColor", customType = "Color")
+  override fun setFillColor(view: LuggCircleView, value: Int?) {
+    view.setFillColor(value ?: android.graphics.Color.argb(77, 0, 0, 0))
+  }
+
+  @ReactProp(name = "strokeWidth", defaultDouble = 1.0)
+  override fun setStrokeWidth(view: LuggCircleView, value: Double) {
+    view.setStrokeWidth(value.toFloat())
+  }
+
+  @ReactProp(name = "tappable")
+  override fun setTappable(view: LuggCircleView, value: Boolean) {
+    view.setTappable(value)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggCircleView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
+  companion object {
+    const val NAME = "LuggCircleView"
+  }
+}

package/android/src/main/java/com/luggmaps/LuggGroundOverlayView.kt

@@ -0,0 +1,81 @@
+package com.luggmaps
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.maps.model.GroundOverlay
+import com.google.android.gms.maps.model.LatLng
+import com.luggmaps.events.GroundOverlayPressEvent
+import com.luggmaps.extensions.dispatchEvent
+
+interface LuggGroundOverlayViewDelegate {
+  fun groundOverlayViewDidUpdate(groundOverlayView: LuggGroundOverlayView)
+}
+
+class LuggGroundOverlayView(context: Context) : ReactViewGroup(context) {
+  var imageUri: String = ""
+    private set
+
+  var northeast: LatLng = LatLng(0.0, 0.0)
+    private set
+
+  var southwest: LatLng = LatLng(0.0, 0.0)
+    private set
+
+  var overlayOpacity: Float = 1f
+    private set
+
+  var bearing: Float = 0f
+    private set
+
+  var zIndex: Float = 0f
+    private set
+
+  var tappable: Boolean = false
+    private set
+
+  var delegate: LuggGroundOverlayViewDelegate? = null
+  var groundOverlay: GroundOverlay? = null
+
+  init {
+    visibility = GONE
+  }
+
+  fun setImageUri(value: String) {
+    imageUri = value
+  }
+
+  fun setBounds(ne: LatLng, sw: LatLng) {
+    northeast = ne
+    southwest = sw
+  }
+
+  fun setOverlayOpacity(value: Float) {
+    overlayOpacity = value
+  }
+
+  fun setBearing(value: Float) {
+    bearing = value
+  }
+
+  fun setZIndex(value: Float) {
+    zIndex = value
+  }
+
+  fun setTappable(value: Boolean) {
+    tappable = value
+  }
+
+  fun emitPressEvent() {
+    dispatchEvent(GroundOverlayPressEvent(this))
+  }
+
+  fun onAfterUpdateTransaction() {
+    delegate?.groundOverlayViewDidUpdate(this)
+  }
+
+  fun onDropViewInstance() {
+    delegate = null
+    groundOverlay?.remove()
+    groundOverlay = null
+  }
+}

package/android/src/main/java/com/luggmaps/LuggGroundOverlayViewManager.kt

@@ -0,0 +1,82 @@
+package com.luggmaps
+
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.LuggGroundOverlayViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggGroundOverlayViewManagerInterface
+import com.google.android.gms.maps.model.LatLng
+
+@ReactModule(name = LuggGroundOverlayViewManager.NAME)
+class LuggGroundOverlayViewManager :
+  ViewGroupManager<LuggGroundOverlayView>(),
+  LuggGroundOverlayViewManagerInterface<LuggGroundOverlayView> {
+  private val delegate: ViewManagerDelegate<LuggGroundOverlayView> = LuggGroundOverlayViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggGroundOverlayView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggGroundOverlayView = LuggGroundOverlayView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+    mapOf("topGroundOverlayPress" to mapOf("registrationName" to "onGroundOverlayPress"))
+
+  override fun onDropViewInstance(view: LuggGroundOverlayView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun onAfterUpdateTransaction(view: LuggGroundOverlayView) {
+    super.onAfterUpdateTransaction(view)
+    view.onAfterUpdateTransaction()
+  }
+
+  @ReactProp(name = "image")
+  override fun setImage(view: LuggGroundOverlayView, value: String?) {
+    view.setImageUri(value ?: "")
+  }
+
+  @ReactProp(name = "bounds")
+  override fun setBounds(view: LuggGroundOverlayView, value: ReadableMap?) {
+    value?.let { map ->
+      val ne = map.getMap("northeast")
+      val sw = map.getMap("southwest")
+      val northeast = LatLng(
+        ne?.getDouble("latitude") ?: 0.0,
+        ne?.getDouble("longitude") ?: 0.0
+      )
+      val southwest = LatLng(
+        sw?.getDouble("latitude") ?: 0.0,
+        sw?.getDouble("longitude") ?: 0.0
+      )
+      view.setBounds(northeast, southwest)
+    }
+  }
+
+  @ReactProp(name = "opacity", defaultDouble = 1.0)
+  override fun setOpacity(view: LuggGroundOverlayView, value: Double) {
+    view.setOverlayOpacity(value.toFloat())
+  }
+
+  @ReactProp(name = "bearing", defaultDouble = 0.0)
+  override fun setBearing(view: LuggGroundOverlayView, value: Double) {
+    view.setBearing(value.toFloat())
+  }
+
+  @ReactProp(name = "tappable")
+  override fun setTappable(view: LuggGroundOverlayView, value: Boolean) {
+    view.setTappable(value)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggGroundOverlayView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
+  companion object {
+    const val NAME = "LuggGroundOverlayView"
+  }
+}

package/android/src/main/java/com/luggmaps/LuggMapView.kt

@@ -1,6 +1,7 @@
 package com.luggmaps
 
 import android.annotation.SuppressLint
+import android.content.res.Configuration
 import android.view.View
 import android.view.View.VISIBLE
 import com.facebook.react.uimanager.ThemedReactContext
@@ -58,16 +59,23 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
   private var initialLatitude: Double = 37.78
   private var initialLongitude: Double = -122.43
   private var initialZoom: Float = 14f
+  private var mapType: String = "standard"
   private var theme: String = "system"
   private var zoomEnabled: Boolean = true
   private var scrollEnabled: Boolean = true
   private var rotateEnabled: Boolean = true
   private var pitchEnabled: Boolean = true
+  private var compassEnabled: Boolean = true
+  private var staticMode: Boolean = false
   private var userLocationEnabled: Boolean = false
   private var userLocationButtonEnabled: Boolean = false
+  private var poiEnabled: Boolean = true
+  private var poiFilterMode: String = "including"
+  private var poiFilterCategories: List<String> = emptyList()
   private var minZoom: Double? = null
   private var maxZoom: Double? = null
   private var edgeInsets: EdgeInsets = EdgeInsets()
+  private var insetAdjustment: String = "never"
 
   // region View Lifecycle
 
@@ -78,6 +86,9 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
       is LuggMarkerView -> provider?.addMarkerView(child)
       is LuggPolylineView -> provider?.addPolylineView(child)
       is LuggPolygonView -> provider?.addPolygonView(child)
+      is LuggCircleView -> provider?.addCircleView(child)
+      is LuggGroundOverlayView -> provider?.addGroundOverlayView(child)
+      is LuggTileOverlayView -> provider?.addTileOverlayView(child)
     }
   }
 
@@ -87,6 +98,9 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
       is LuggMarkerView -> provider?.removeMarkerView(view)
       is LuggPolylineView -> provider?.removePolylineView(view)
       is LuggPolygonView -> provider?.removePolygonView(view)
+      is LuggCircleView -> provider?.removeCircleView(view)
+      is LuggGroundOverlayView -> provider?.removeGroundOverlayView(view)
+      is LuggTileOverlayView -> provider?.removeTileOverlayView(view)
     }
     super.removeViewAt(index)
   }
@@ -120,8 +134,13 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
   private fun initializeProvider() {
     if (provider != null || mapWrapperView == null) return
 
+    if (staticMode) {
+      applyStaticPlaceholder()
+    }
+
     val google = GoogleMapProvider(context)
     google.mapId = mapId
+    google.staticMode = staticMode
     google.delegate = this
     provider = google
 
@@ -135,10 +154,30 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
         is LuggMarkerView -> google.addMarkerView(child)
         is LuggPolylineView -> google.addPolylineView(child)
         is LuggPolygonView -> google.addPolygonView(child)
+        is LuggCircleView -> google.addCircleView(child)
+        is LuggGroundOverlayView -> google.addGroundOverlayView(child)
+        is LuggTileOverlayView -> google.addTileOverlayView(child)
       }
     }
   }
 
+  // Shown while the map loads, until the map covers it
+  private fun applyStaticPlaceholder() {
+    // A user-provided background acts as the placeholder
+    if (background != null) return
+
+    val isDark = when (theme) {
+      "dark" -> true
+
+      "light" -> false
+
+      else ->
+        (context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) ==
+          Configuration.UI_MODE_NIGHT_YES
+    }
+    mapWrapperView?.setBackgroundColor(if (isDark) COLOR_PLACEHOLDER_DARK else COLOR_PLACEHOLDER_LIGHT)
+  }
+
   // endregion
 
   // region MapProviderDelegate
@@ -172,12 +211,18 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
     provider?.setScrollEnabled(scrollEnabled)
     provider?.setRotateEnabled(rotateEnabled)
     provider?.setPitchEnabled(pitchEnabled)
+    provider?.setCompassEnabled(compassEnabled)
     provider?.setUserLocationEnabled(userLocationEnabled)
     provider?.setUserLocationButtonEnabled(userLocationButtonEnabled)
+    provider?.setMapType(mapType)
     provider?.setTheme(theme)
     minZoom?.let { provider?.setMinZoom(it) }
     maxZoom?.let { provider?.setMaxZoom(it) }
     provider?.setEdgeInsets(edgeInsets)
+    provider?.setInsetAdjustment(insetAdjustment)
+    provider?.setPoiEnabled(poiEnabled)
+    provider?.setPoiFilterMode(poiFilterMode)
+    provider?.setPoiFilterCategories(poiFilterCategories)
   }
 
   fun setProvider(value: String?) {
@@ -224,6 +269,16 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
     provider?.setPitchEnabled(enabled)
   }
 
+  fun setCompassEnabled(enabled: Boolean) {
+    if (compassEnabled == enabled) return
+    compassEnabled = enabled
+    provider?.setCompassEnabled(enabled)
+  }
+
+  fun setStaticMode(enabled: Boolean) {
+    staticMode = enabled
+  }
+
   fun setUserLocationEnabled(enabled: Boolean) {
     if (userLocationEnabled == enabled) return
     userLocationEnabled = enabled
@@ -248,12 +303,42 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
     provider?.setMaxZoom(zoom)
   }
 
+  fun setMapType(value: String) {
+    if (mapType == value) return
+    mapType = value
+    provider?.setMapType(value)
+  }
+
   fun setTheme(value: String) {
     if (theme == value) return
     theme = value
     provider?.setTheme(value)
   }
 
+  fun setPoiEnabled(enabled: Boolean) {
+    if (poiEnabled == enabled) return
+    poiEnabled = enabled
+    provider?.setPoiEnabled(enabled)
+  }
+
+  fun setPoiFilterMode(value: String) {
+    if (poiFilterMode == value) return
+    poiFilterMode = value
+    provider?.setPoiFilterMode(value)
+  }
+
+  fun setPoiFilterCategories(categories: List<String>) {
+    if (poiFilterCategories == categories) return
+    poiFilterCategories = categories
+    provider?.setPoiFilterCategories(categories)
+  }
+
+  fun setInsetAdjustment(value: String) {
+    if (insetAdjustment == value) return
+    insetAdjustment = value
+    provider?.setInsetAdjustment(value)
+  }
+
   fun setEdgeInsets(
     top: Int,
     left: Int,
@@ -287,4 +372,9 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
   }
 
   // endregion
+
+  companion object {
+    private const val COLOR_PLACEHOLDER_LIGHT = 0xFFF2F2F7.toInt()
+    private const val COLOR_PLACEHOLDER_DARK = 0xFF2C2C2E.toInt()
+  }
 }

package/android/src/main/java/com/luggmaps/LuggMapViewManager.kt

@@ -132,6 +132,20 @@ class LuggMapViewManager :
     view.setPitchEnabled(value)
   }
 
+  @ReactProp(name = "compassEnabled", defaultBoolean = true)
+  override fun setCompassEnabled(view: LuggMapView, value: Boolean) {
+    view.setCompassEnabled(value)
+  }
+
+  @ReactProp(name = "staticMode", defaultBoolean = false)
+  override fun setStaticMode(view: LuggMapView, value: Boolean) {
+    view.setStaticMode(value)
+  }
+
+  // iOS only - lite mode doesn't need snapshot caching
+  @ReactProp(name = "staticKey")
+  override fun setStaticKey(view: LuggMapView, value: String?) = Unit
+
   @ReactProp(name = "userLocationEnabled", defaultBoolean = false)
   override fun setUserLocationEnabled(view: LuggMapView, value: Boolean) {
     view.setUserLocationEnabled(value)
@@ -152,11 +166,42 @@ class LuggMapViewManager :
     view.setMaxZoom(value)
   }
 
+  @ReactProp(name = "mapType")
+  override fun setMapType(view: LuggMapView, value: String?) {
+    view.setMapType(value ?: "standard")
+  }
+
   @ReactProp(name = "theme")
   override fun setTheme(view: LuggMapView, value: String?) {
     view.setTheme(value ?: "system")
   }
 
+  @ReactProp(name = "poiEnabled", defaultBoolean = true)
+  override fun setPoiEnabled(view: LuggMapView, value: Boolean) {
+    view.setPoiEnabled(value)
+  }
+
+  @ReactProp(name = "poiFilterMode")
+  override fun setPoiFilterMode(view: LuggMapView, value: String?) {
+    view.setPoiFilterMode(value ?: "including")
+  }
+
+  @ReactProp(name = "poiFilterCategories")
+  override fun setPoiFilterCategories(view: LuggMapView, value: ReadableArray?) {
+    val categories = mutableListOf<String>()
+    value?.let { array ->
+      for (i in 0 until array.size()) {
+        array.getString(i)?.let { categories.add(it) }
+      }
+    }
+    view.setPoiFilterCategories(categories)
+  }
+
+  @ReactProp(name = "insetAdjustment")
+  override fun setInsetAdjustment(view: LuggMapView, value: String?) {
+    view.setInsetAdjustment(value ?: "never")
+  }
+
   @ReactProp(name = "edgeInsets")
   override fun setEdgeInsets(view: LuggMapView, value: ReadableMap?) {
     value?.let {

package/android/src/main/java/com/luggmaps/LuggMapWrapperView.kt

@@ -10,11 +10,30 @@ class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context)
 
   var touchEventHandler: ((MotionEvent) -> Unit)? = null
 
+  // React Native never runs an Android layout pass on Yoga-managed views, so
+  // a child's requestLayout (e.g. a lite mode MapView displaying its bitmap
+  // once loaded) would otherwise never result in a measure/layout. Live maps
+  // don't need this - their GL surface renders continuously once sized.
+  var relayoutChildOnRequest: Boolean = false
+
+  // Invoked on layout once the view has a non-zero size, so the map
+  // provider can create a map sized to the view
+  var onLayoutReady: (() -> Unit)? = null
+
+  private val measureAndLayoutChild = Runnable { layoutChild(width, height) }
+
   override fun dispatchTouchEvent(event: MotionEvent): Boolean {
     touchEventHandler?.invoke(event)
     return super.dispatchTouchEvent(event)
   }
 
+  override fun requestLayout() {
+    super.requestLayout()
+    if (relayoutChildOnRequest) {
+      post(measureAndLayoutChild)
+    }
+  }
+
   override fun onLayout(
     changed: Boolean,
     left: Int,
@@ -23,8 +42,14 @@ class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context)
     bottom: Int
   ) {
     super.onLayout(changed, left, top, right, bottom)
-    val w = right - left
-    val h = bottom - top
+    layoutChild(right - left, bottom - top)
+    if (right - left > 0 && bottom - top > 0) {
+      onLayoutReady?.invoke()
+    }
+  }
+
+  private fun layoutChild(w: Int, h: Int) {
+    if (w <= 0 || h <= 0) return
     getChildAt(0)?.let {
       it.measure(
         MeasureSpec.makeMeasureSpec(w, MeasureSpec.EXACTLY),