// Assuming the getRoute function exists but wasn't exported. // If the function signature or implementation is different, this will need adjustment. // This is a placeholder based on the error message. import { Coordinate } from "@/utils/coordinates"; // Placeholder function signature - replace with actual implementation export const getRoute = async (origin: Coordinate, destination: Coordinate): Promise => { console.log("Fetching route from", origin, "to", destination); // TODO: Implement actual TomTom API call to get route // Example placeholder return structure (adjust based on actual API response) return { routes: [ { summary: { lengthInMeters: 1000, travelTimeInSeconds: 300 }, legs: [{ points: [origin, destination] }] // Simplified points } ] }; }; // Add other exports if necessary import React, { useEffect, useState } from 'react'; import { View, StyleSheet, ActivityIndicator, Text } from 'react-native'; import NativeMap from '@/components/NativeMap.native'; // Assuming this is the correct import path import { getRoute } from '@/services/tomtomService'; // Corrected import import { Coordinate, validateCoordinate } from '@/utils/coordinates'; // Corrected import const MapScreen = () => { const [origin, setOrigin] = useState(null); const [destination, setDestination] = useState(null); const [routeInfo, setRouteInfo] = useState(null); // Use a more specific type if possible const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { // Example coordinates - replace with actual logic to get user/destination location const exampleOrigin = { latitude: 37.7749, longitude: -122.4194 }; // San Francisco const exampleDestination = { latitude: 34.0522, longitude: -118.2437 }; // Los Angeles // Use the corrected function name if (validateCoordinate(exampleOrigin) && validateCoordinate(exampleDestination)) { setOrigin(exampleOrigin); setDestination(exampleDestination); } else { setError("Invalid origin or destination coordinates."); } }, []); useEffect(() => { const fetchRoute = async () => { if (origin && destination) { setLoading(true); setError(null); try { const routeData = await getRoute(origin, destination); setRouteInfo(routeData); } catch (err) { console.error("Error fetching route:", err); setError("Failed to fetch route."); setRouteInfo(null); } finally { setLoading(false); } } }; fetchRoute(); }, [origin, destination]); return ( {loading && ( Calculating route... )} {error && ( {error} )} {/* Pass routeInfo to the map component */} ); }; const styles = StyleSheet.create({ container: { flex: 1, }, loadingOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(255, 255, 255, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 1, // Ensure it's above the map }, loadingText: { marginTop: 10, fontSize: 16, }, errorContainer: { position: 'absolute', top: 20, left: 20, right: 20, backgroundColor: 'rgba(255, 0, 0, 0.7)', padding: 10, borderRadius: 5, zIndex: 1, // Ensure it's above the map }, errorText: { color: 'white', textAlign: 'center', }, }); export default MapScreen; import React, { useRef, useEffect } from 'react'; import { StyleSheet, View } from 'react-native'; import MapView, { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps'; import { Coordinate } from '@/utils/coordinates'; // Assuming Coordinate type is here interface NativeMapProps { origin: Coordinate | null; destination: Coordinate | null; routeInfo: any | null; // Use a more specific type if possible } const NativeMap: React.FC = ({ origin, destination, routeInfo }) => { const mapRef = useRef(null); useEffect(() => { // Fit map to markers when origin or destination changes if (mapRef.current && origin && destination) { const coordinates = [origin, destination]; mapRef.current.fitToCoordinates(coordinates, { edgePadding: { top: 50, right: 50, bottom: 50, left: 50 }, animated: true, }); } else if (mapRef.current && origin) { // If only origin is available, center map on origin mapRef.current.animateToRegion({ latitude: origin.latitude, longitude: origin.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }); } }, [origin, destination]); // Extract polyline coordinates from routeInfo const polylineCoordinates = routeInfo?.routes?.[0]?.legs?.[0]?.points?.map((point: any) => ({ latitude: point.latitude, longitude: point.longitude, })) || []; // Add null/undefined checks and default to empty array return ( {origin && ( )} {destination && ( )} {/* Add check for routeInfo and polylineCoordinates */} {routeInfo && polylineCoordinates.length > 0 && ( )} ); }; const styles = StyleSheet.create({ container: { ...StyleSheet.absoluteFillObject, justifyContent: 'flex-end', alignItems: 'center', }, map: { ...StyleSheet.absoluteFillObject, }, }); export default NativeMap; // Assuming this file contains coordinate validation logic export interface Coordinate { latitude: number; longitude: number; } // Renamed from isValidCoordinate to validateCoordinate based on error message export const validateCoordinate = (coord: any): coord is Coordinate => { if (!coord || typeof coord.latitude !== 'number' || typeof coord.longitude !== 'number') { return false; } // Add more specific validation if needed (e.g., range checks) return true; }; // Add other coordinate-related utilities here