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

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",
+  },
 });