sửa lỗi hiển thị polyline, polygon ở map, thêm component ScanQrCode

app/(tabs)/index.tsx

@@ -40,8 +40,8 @@ import MapView, { Circle, Marker } from "react-native-maps";
 
 
 export default function HomeScreen() {
-  const [gpsData, setGpsData] = useState<Model.GPSResonse | undefined>(
-    undefined
+  const [gpsData, setGpsData] = useState<Model.GPSResonse | null>(
+    null
   );
   const [alarmData, setAlarmData] = useState<Model.AlarmResponse | null>(null);
   const [entityData, setEntityData] = useState<
@@ -81,7 +81,7 @@ export default function HomeScreen() {
         // console.log("GPS Data: ", gpsData);
         setGpsData(gpsData);
       } else {
-        setGpsData(undefined);
+        setGpsData(null);
         setPolygonCoordinates([]);
         setPolylineCoordinates(null);
       }
@@ -133,23 +133,6 @@ export default function HomeScreen() {
       // console.log("Unsubscribed EVENT_TRACK_POINTS_DATA");
     };
   }, []);
-
-  useEffect(() => {
-    if (polylineCoordinates !== null) {
-      console.log("Polyline Khac null");
-    } else {
-      console.log("Polyline null");
-    }
-  }, [polylineCoordinates]);
-
-  useEffect(() => {
-    if (polygonCoordinates.length > 0) {
-      console.log("Polygon Khac null");
-    } else {
-      console.log("Polygon null");
-    }
-  }, [polygonCoordinates]);
-
   useEffect(() => {
     setPolylineCoordinates(null);
     setPolygonCoordinates([]);
@@ -336,7 +319,7 @@ export default function HomeScreen() {
                   latitude: point.lat,
                   longitude: point.lon,
                 }}
-                zIndex={50}
+                // zIndex={50}
                 // radius={platform === IOS_PLATFORM ? 200 : 50}
                 radius={circleRadius}
                 strokeColor="rgba(16, 85, 201, 0.7)"
@@ -347,13 +330,14 @@ export default function HomeScreen() {
           })}
         {polylineCoordinates && (
           <PolylineWithLabel
+            key={`polyline-${gpsData?.lat || 0}-${gpsData?.lon || 0}`}
             coordinates={polylineCoordinates.coordinates}
             label={polylineCoordinates.label}
             content={polylineCoordinates.content}
             strokeColor="#FF5733"
             strokeWidth={4}
             showDistance={false}
-            zIndex={50}
+            // zIndex={50}
           />
         )}
         {polygonCoordinates.length > 0 && (
@@ -367,22 +351,23 @@ export default function HomeScreen() {
 
               return (
                 <PolygonWithLabel
-                  key={polygonKey}
+                  key={`polygon-${index}-${gpsData?.lat || 0}-${gpsData?.lon || 0}`}
                   coordinates={polygon.coordinates}
                   label={polygon.label}
                   content={polygon.content}
                   fillColor="rgba(16, 85, 201, 0.6)"
                   strokeColor="rgba(16, 85, 201, 0.8)"
                   strokeWidth={2}
-                  zIndex={50}
+                  // zIndex={50}
                   zoomLevel={zoomLevel}
                 />
               );
             })}
           </>
         )}
-        {gpsData !== undefined && (
+        {gpsData !== null && (
           <Marker
+            key={platform === IOS_PLATFORM ? `${gpsData.lat}-${gpsData.lon}` : "gps-data"}
             coordinate={{
               latitude: gpsData.lat,
               longitude: gpsData.lon,
@@ -392,12 +377,13 @@ export default function HomeScreen() {
                 ? "Tàu của mình - iOS"
                 : "Tàu của mình - Android"
             }
-            zIndex={200}
+            zIndex={20}
             anchor={
               platform === IOS_PLATFORM
                 ? { x: 0.5, y: 0.5 }
                 : { x: 0.6, y: 0.4 }
             }
+            tracksViewChanges={platform === IOS_PLATFORM ? true : undefined}
           >
             <View className="w-8 h-8 items-center justify-center">
               <View style={styles.pingContainer}>
@@ -418,6 +404,7 @@ export default function HomeScreen() {
                       alarmData?.level || 0,
                       gpsData.fishing
                     );
+                    // console.log("Ship icon:", icon, "for level:", alarmData?.level, "fishing:", gpsData.fishing);
                     return typeof icon === "string" ? { uri: icon } : icon;
                   })()}
                   style={{
@@ -442,7 +429,7 @@ export default function HomeScreen() {
       <View className="absolute top-14 right-2 shadow-md">
         <SosButton />
       </View>
-      <GPSInfoPanel gpsData={gpsData} />
+      <GPSInfoPanel gpsData={gpsData!} />
     </View>
   );
 }