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>
   );
 }

app/(tabs)/sensor.tsx

@@ -1,14 +1,51 @@
-import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import ScanQRCode from "@/components/ScanQRCode";
+import { useState } from "react";
+import {
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function Sensor() {
+  const [scanModalVisible, setScanModalVisible] = useState(false);
+  const [scannedData, setScannedData] = useState<string | null>(null);
+  const handleQRCodeScanned = (data: string) => {
+    setScannedData(data);
+    // Alert.alert("QR Code Scanned", `Result: ${data}`);
+  };
+
+  const handleScanPress = () => {
+    setScanModalVisible(true);
+  };
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <View style={styles.container}>
           <Text style={styles.titleText}>Cảm biến trên tàu</Text>
+
+          <Pressable style={styles.scanButton} onPress={handleScanPress}>
+            <Text style={styles.scanButtonText}>📱 Scan QR Code</Text>
+          </Pressable>
+
+          {scannedData && (
+            <View style={styles.resultContainer}>
+              <Text style={styles.resultLabel}>Last Scanned:</Text>
+              <Text style={styles.resultText}>{scannedData}</Text>
+            </View>
+          )}
         </View>
       </ScrollView>
+
+      <ScanQRCode
+        visible={scanModalVisible}
+        onClose={() => setScanModalVisible(false)}
+        onScanned={handleQRCodeScanned}
+      />
     </SafeAreaView>
   );
 }
@@ -25,11 +62,48 @@ const styles = StyleSheet.create({
     fontSize: 32,
     fontWeight: "700",
     lineHeight: 40,
-    marginBottom: 10,
+    marginBottom: 30,
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
+  scanButton: {
+    backgroundColor: "#007AFF",
+    paddingVertical: 14,
+    paddingHorizontal: 30,
+    borderRadius: 10,
+    marginVertical: 15,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  scanButtonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  resultContainer: {
+    marginTop: 30,
+    padding: 15,
+    backgroundColor: "#f0f0f0",
+    borderRadius: 10,
+    minWidth: "80%",
+  },
+  resultLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#666",
+    marginBottom: 8,
+  },
+  resultText: {
+    fontSize: 14,
+    color: "#333",
+    fontFamily: "Menlo",
+    fontWeight: "500",
+  },
 });