feat: add Polygon component

README.md

@@ -77,7 +77,7 @@ function App() {
 ## Usage
 
 ```tsx
-import { MapView, Marker, Polyline } from '@lugg/maps';
+import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
 
 <MapView
   style={{ flex: 1 }}
@@ -96,6 +96,17 @@ import { MapView, Marker, Polyline } from '@lugg/maps';
     ]}
     strokeWidth={3}
   />
+  <Polygon
+    coordinates={[
+      { latitude: 37.784, longitude: -122.428 },
+      { latitude: 37.784, longitude: -122.422 },
+      { latitude: 37.779, longitude: -122.422 },
+      { latitude: 37.779, longitude: -122.428 },
+    ]}
+    fillColor="rgba(66, 133, 244, 0.3)"
+    strokeColor="#4285F4"
+    strokeWidth={2}
+  />
 </MapView>
 ```
 
@@ -104,6 +115,7 @@ import { MapView, Marker, Polyline } from '@lugg/maps';
 - [MapView](docs/MAPVIEW.md) - Main map component
 - [Marker](docs/MARKER.md) - Map markers
 - [Polyline](docs/POLYLINE.md) - Draw lines on the map
+- [Polygon](docs/POLYGON.md) - Draw filled shapes on the map
 
 ## Types
 

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

@@ -63,6 +63,7 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
       is LuggMapWrapperView -> mapWrapperView = child
       is LuggMarkerView -> provider?.addMarkerView(child)
       is LuggPolylineView -> provider?.addPolylineView(child)
+      is LuggPolygonView -> provider?.addPolygonView(child)
     }
   }
 
@@ -71,6 +72,7 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
     when (view) {
       is LuggMarkerView -> provider?.removeMarkerView(view)
       is LuggPolylineView -> provider?.removePolylineView(view)
+      is LuggPolygonView -> provider?.removePolygonView(view)
     }
     super.removeViewAt(index)
   }
@@ -118,6 +120,7 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
       when (val child = getChildAt(i)) {
         is LuggMarkerView -> google.addMarkerView(child)
         is LuggPolylineView -> google.addPolylineView(child)
+        is LuggPolygonView -> google.addPolygonView(child)
       }
     }
   }

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

@@ -1,13 +1,20 @@
 package com.luggmaps
 
 import android.annotation.SuppressLint
-import android.util.Log
+import android.view.MotionEvent
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 
 @SuppressLint("ViewConstructor")
 class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context) {
 
+  var touchEventHandler: ((MotionEvent) -> Unit)? = null
+
+  override fun dispatchTouchEvent(event: MotionEvent): Boolean {
+    touchEventHandler?.invoke(event)
+    return super.dispatchTouchEvent(event)
+  }
+
   override fun requestLayout() {
     super.requestLayout()
     getChildAt(0)?.let {

android/src/main/java/com/luggmaps/LuggPackage.kt

@@ -6,5 +6,5 @@ import com.facebook.react.uimanager.ViewManager
 
 class LuggPackage : ReactPackage {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
-    listOf(LuggMapViewManager(), LuggMarkerViewManager(), LuggMapWrapperViewManager(), LuggPolylineViewManager())
+    listOf(LuggMapViewManager(), LuggMarkerViewManager(), LuggMapWrapperViewManager(), LuggPolylineViewManager(), LuggPolygonViewManager())
 }

android/src/main/java/com/luggmaps/LuggPolygonView.kt

@@ -0,0 +1,78 @@
+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.LatLng
+import com.google.android.gms.maps.model.Polygon
+import com.luggmaps.events.PolygonPressEvent
+import com.luggmaps.extensions.dispatchEvent
+
+interface LuggPolygonViewDelegate {
+  fun polygonViewDidUpdate(polygonView: LuggPolygonView)
+}
+
+class LuggPolygonView(context: Context) : ReactViewGroup(context) {
+  var coordinates: List<LatLng> = emptyList()
+    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: LuggPolygonViewDelegate? = null
+  var polygon: Polygon? = null
+
+  init {
+    visibility = GONE
+  }
+
+  fun setCoordinates(coords: List<LatLng>) {
+    coordinates = coords
+  }
+
+  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(PolygonPressEvent(this))
+  }
+
+  fun onAfterUpdateTransaction() {
+    delegate?.polygonViewDidUpdate(this)
+  }
+
+  fun onDropViewInstance() {
+    delegate = null
+    polygon?.remove()
+    polygon = null
+  }
+}

android/src/main/java/com/luggmaps/LuggPolygonViewManager.kt

@@ -0,0 +1,76 @@
+package com.luggmaps
+
+import com.facebook.react.bridge.ReadableArray
+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.LuggPolygonViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggPolygonViewManagerInterface
+import com.google.android.gms.maps.model.LatLng
+
+@ReactModule(name = LuggPolygonViewManager.NAME)
+class LuggPolygonViewManager :
+  ViewGroupManager<LuggPolygonView>(),
+  LuggPolygonViewManagerInterface<LuggPolygonView> {
+  private val delegate: ViewManagerDelegate<LuggPolygonView> = LuggPolygonViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggPolygonView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggPolygonView = LuggPolygonView(context)
+
+  override fun onDropViewInstance(view: LuggPolygonView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun onAfterUpdateTransaction(view: LuggPolygonView) {
+    super.onAfterUpdateTransaction(view)
+    view.onAfterUpdateTransaction()
+  }
+
+  @ReactProp(name = "coordinates")
+  override fun setCoordinates(view: LuggPolygonView, value: ReadableArray?) {
+    value?.let { array ->
+      val coords = mutableListOf<LatLng>()
+      for (i in 0 until array.size()) {
+        val coord = array.getMap(i)
+        val lat = coord?.getDouble("latitude") ?: 0.0
+        val lng = coord?.getDouble("longitude") ?: 0.0
+        coords.add(LatLng(lat, lng))
+      }
+      view.setCoordinates(coords)
+    }
+  }
+
+  @ReactProp(name = "strokeColor", customType = "Color")
+  override fun setStrokeColor(view: LuggPolygonView, value: Int?) {
+    view.setStrokeColor(value ?: android.graphics.Color.BLACK)
+  }
+
+  @ReactProp(name = "fillColor", customType = "Color")
+  override fun setFillColor(view: LuggPolygonView, value: Int?) {
+    view.setFillColor(value ?: android.graphics.Color.argb(77, 0, 0, 0))
+  }
+
+  @ReactProp(name = "strokeWidth", defaultDouble = 1.0)
+  override fun setStrokeWidth(view: LuggPolygonView, value: Double) {
+    view.setStrokeWidth(value.toFloat())
+  }
+
+  @ReactProp(name = "tappable")
+  override fun setTappable(view: LuggPolygonView, value: Boolean) {
+    view.setTappable(value)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggPolygonView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
+  companion object {
+    const val NAME = "LuggPolygonView"
+  }
+}