78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import MapView, { Marker, Polyline, PROVIDER_DEFAULT } from 'react-native-maps';
|
|
import { useAppTheme } from '@theme';
|
|
import { Coordinates } from '@app-types/index';
|
|
import { getStyles } from './mapView.styles';
|
|
|
|
interface MapViewComponentProps {
|
|
origin?: Coordinates;
|
|
destination?: Coordinates;
|
|
currentLocation?: Coordinates;
|
|
showRoute?: boolean;
|
|
style?: any;
|
|
}
|
|
|
|
export const MapViewComponent: React.FC<MapViewComponentProps> = ({
|
|
origin,
|
|
destination,
|
|
currentLocation,
|
|
showRoute = false,
|
|
style,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const defaultRegion = {
|
|
latitude: currentLocation?.latitude || origin?.latitude || 12.9716,
|
|
longitude: currentLocation?.longitude || origin?.longitude || 77.5946,
|
|
latitudeDelta: 0.05,
|
|
longitudeDelta: 0.05,
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<MapView
|
|
provider={PROVIDER_DEFAULT}
|
|
style={styles.map}
|
|
initialRegion={defaultRegion}
|
|
showsUserLocation={true}
|
|
loadingEnabled={true}
|
|
>
|
|
{currentLocation && (
|
|
<Marker
|
|
coordinate={currentLocation}
|
|
title="Your Location"
|
|
pinColor={colors.primary}
|
|
/>
|
|
)}
|
|
{origin && (
|
|
<Marker
|
|
coordinate={origin}
|
|
title="Pickup Location"
|
|
pinColor={colors.statusOffline}
|
|
/>
|
|
)}
|
|
{destination && (
|
|
<Marker
|
|
coordinate={destination}
|
|
title="Drop Location"
|
|
pinColor={colors.statusOnline}
|
|
/>
|
|
)}
|
|
{showRoute && origin && destination && (
|
|
<Polyline
|
|
coordinates={[origin, destination]}
|
|
strokeColor={colors.primary}
|
|
strokeWidth={4}
|
|
/>
|
|
)}
|
|
</MapView>
|
|
<View style={styles.mockOverlay}>
|
|
<Text style={styles.mockText}>📍 Live Navigation Map Active</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
export default MapViewComponent;
|