Add polygon support and property selection functionality to the map

src/screens/Map.tsx

@@ -15,7 +15,12 @@ import {
 } from 'react-native';
 
 import MapView from 'react-native-map-clustering';
-import { Marker, MapType, Region } from 'react-native-maps';
+import {
+  Marker,
+  MapType,
+  Region,
+  Polygon,
+} from 'react-native-maps';
 import Geolocation from '@react-native-community/geolocation';
 
 const { width } = Dimensions.get('window');
@@ -38,6 +43,14 @@ const formatPrice = (value: number) => {
   return value.toString();
 };
 
+const getPolygonCoords = (polygon: number[][]) => {
+  if (!polygon) return [];
+  return polygon.map(([lat, lng]) => ({
+    latitude: lat,
+    longitude: lng,
+  }));
+};
+
 /* ---------------- PRICE MARKER ---------------- */
 
 const PriceMarker = ({ item, onPress, selected }: any) => {
@@ -151,8 +164,6 @@ const MapScreen = () => {
 
         setProperties(json.properties || []);
         setRegion(newRegion);
-
-        // ✅ MOVE MAP TO SEARCH LOCATION
         mapRef.current?.animateToRegion(newRegion, 1000);
       }
     } catch (error) {
@@ -162,6 +173,27 @@ const MapScreen = () => {
     }
   };
 
+  /* ---------------- SELECT PROPERTY ---------------- */
+
+  const onSelectProperty = (item: any) => {
+    setSelectedItem(item);
+
+    if (item.polygon?.length) {
+      mapRef.current?.fitToCoordinates(
+        getPolygonCoords(item.polygon),
+        {
+          edgePadding: {
+            top: 80,
+            right: 80,
+            bottom: 300,
+            left: 80,
+          },
+          animated: true,
+        }
+      );
+    }
+  };
+
   const popupTranslateY = popupAnim.interpolate({
     inputRange: [0, 1],
     outputRange: [200, 0],
@@ -205,12 +237,28 @@ const MapScreen = () => {
         spiralEnabled={false}
         mapType={mapType}
       >
+        {/* ---- POLYGONS ---- */}
+        {properties.map((item) =>
+          item.polygon ? (
+            <Polygon
+              key={`poly-${item.id}`}
+              coordinates={getPolygonCoords(item.polygon)}
+              strokeColor={
+                selectedItem?.id === item.id ? '#F4C430' : '#8B0000'
+              }
+              fillColor="rgba(139, 0, 0, 0.15)"
+              strokeWidth={2}
+            />
+          ) : null
+        )}
+
+        {/* ---- MARKERS ---- */}
         {properties.map((item) => (
           <PriceMarker
             key={item.id}
             item={item}
             selected={selectedItem?.id === item.id}
-            onPress={setSelectedItem}
+            onPress={onSelectProperty}
           />
         ))}
       </MapView>