thêm chức năng Sos và thêm glustack-ui

components/map/PolylineWithLabel.tsx

@@ -1,10 +1,12 @@
+import { ANDROID_PLATFORM } from "@/constants";
+import { usePlatform } from "@/hooks/use-platform";
 import {
   calculateTotalDistance,
   getMiddlePointOfPolyline,
 } from "@/utils/polyline";
-import React from "react";
+import React, { useRef } from "react";
 import { StyleSheet, Text, View } from "react-native";
-import { Marker, Polyline } from "react-native-maps";
+import { MapMarker, Marker, Polyline } from "react-native-maps";
 
 export interface PolylineWithLabelProps {
   coordinates: {
@@ -12,6 +14,7 @@ export interface PolylineWithLabelProps {
     longitude: number;
   }[];
   label?: string;
+  content?: string;
   strokeColor?: string;
   strokeWidth?: number;
   showDistance?: boolean;
@@ -24,6 +27,7 @@ export interface PolylineWithLabelProps {
 export const PolylineWithLabel: React.FC<PolylineWithLabelProps> = ({
   coordinates,
   label,
+  content,
   strokeColor = "#FF5733",
   strokeWidth = 4,
   showDistance = false,
@@ -35,14 +39,15 @@ export const PolylineWithLabel: React.FC<PolylineWithLabelProps> = ({
 
   const middlePoint = getMiddlePointOfPolyline(coordinates);
   const distance = calculateTotalDistance(coordinates);
-
+  const platform = usePlatform();
+  const markerRef = useRef<MapMarker>(null);
   let displayText = label || "";
   if (showDistance) {
     displayText += displayText
       ? ` (${distance.toFixed(2)}km)`
       : `${distance.toFixed(2)}km`;
   }
-
+  markerRef.current?.showCallout();
   return (
     <>
       <Polyline
@@ -53,10 +58,13 @@ export const PolylineWithLabel: React.FC<PolylineWithLabelProps> = ({
       />
       {displayText && (
         <Marker
+          ref={markerRef}
           coordinate={middlePoint}
           zIndex={zIndex + 10}
           tracksViewChanges={false}
           anchor={{ x: 0.5, y: 0.5 }}
+          title={platform === ANDROID_PLATFORM ? label : undefined}
+          description={platform === ANDROID_PLATFORM ? content : undefined}
         >
           <View style={styles.markerContainer}>
             <View style={styles.labelContainer}>