Criado a página de exbição do mapa

Tracker/src/screens/MapScreen.jsx

@@ -1,12 +1,48 @@
-import { StyleSheet, Text, View } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import MapView, { Polyline, Marker } from 'react-native-maps';
+import Storage from '../system/database/storage';
+
+export default function MapScreen() {
+    const [coordinates, setCoordinates] = useState([]);
+    const storage = Storage.getInstance();
+
+    useEffect(() => {
+        const fetchCoordinates = async () => {
+            const data = await storage.listData();
+            if (data) {
+                const parsedCoordinates = data.map(([_, value]) => JSON.parse(value));
+                setCoordinates(parsedCoordinates);
+            }
+        };
+
+        // Buscar localização ao iniciar a tela
+        fetchCoordinates();
+
+        // Atualizar a cada 30 segundos para sincronizar com o App.js
+        const interval = setInterval(fetchCoordinates, 30000);
+
+        return () => clearInterval(interval); // Cleanup ao desmontar o componente
+    }, []);
 
-export default function MapScreen({navigation}){
     return (
-        <View>
-          <Text>Open up App.js to start working on your app!</Text>
-          <StatusBar style="auto" />
+        <View style={{ flex: 1 }}>
+            <MapView
+                style={{ flex: 1 }}
+                initialRegion={{
+                    latitude: coordinates.length > 0 ? coordinates[0].latitude : 37.78825,
+                    longitude: coordinates.length > 0 ? coordinates[0].longitude : -122.4324,
+                    latitudeDelta: 0.01,
+                    longitudeDelta: 0.01,
+                }}
+            >
+                {coordinates.length > 0 && (
+                    <>
+                        <Polyline coordinates={coordinates} strokeWidth={4} strokeColor="blue" />
+                        <Marker coordinate={coordinates[coordinates.length - 1]} title="Você está aqui" />
+                    </>
+                )}
+            </MapView>
         </View>
-      );
-    
+    );
 }