Open uchitchakma opened 2 years ago
import { StyleSheet, Text, View } from 'react-native' import React from 'react' import MapView, {Marker} from 'react-native-maps' import tw from 'twrnc'; import { useSelector } from 'react-redux'; import { selectDestination, selectOrigin } from '../../navSlice/navSlice'; import MapViewDirections from 'react-native-maps-directions'; import {GOOGLE_MAPS_APIKEY} from "@env";
const Map = () => { const origin = useSelector(selectOrigin); const destination = useSelector(selectDestination); return ( <MapView style={twflex-1} mapType= {'hybrid'} initialRegion={{
flex-1
latitude: origin.location.lat, longitude: origin.location.lng, latitudeDelta: 0.005, longitudeDelta: 0.005, }}
{!!origin && !!destination && ( <MapViewDirections origin={origin.description} destination={destination.description} apikey={GOOGLE_MAPS_APIKEY} lineDashPattern={[0]} onError={error => console.log("Directions error: ", error)} strokeWidth={3} strokeColor="black" />
)}
{origin?.location && ( <Marker coordinate = {{ latitude: origin.location.lat, longitude: origin.location.lng,
}} title= "Origin" description={origin.description} identifier="origin" />
)} {destination?.loaction && ( <Marker coordinate={{ latitude: destination?.loaction.lat, longitude: destination?.loaction.lng, }} title="Destination" description={destination.description} identifier="destination"
</Marker> )}
) }
export default Map
// const styles = StyleSheet.create({})
import { StyleSheet, Text, View } from 'react-native' import React from 'react' import MapView, {Marker} from 'react-native-maps' import tw from 'twrnc'; import { useSelector } from 'react-redux'; import { selectDestination, selectOrigin } from '../../navSlice/navSlice'; import MapViewDirections from 'react-native-maps-directions'; import {GOOGLE_MAPS_APIKEY} from "@env";
const Map = () => { const origin = useSelector(selectOrigin); const destination = useSelector(selectDestination); return ( <MapView style={tw
flex-1
} mapType= {'hybrid'} initialRegion={{)}
{origin?.location && ( <Marker
coordinate = {{ latitude: origin.location.lat, longitude: origin.location.lng,
)} {destination?.loaction && ( <Marker coordinate={{ latitude: destination?.loaction.lat, longitude: destination?.loaction.lng, }} title="Destination" description={destination.description} identifier="destination"
) }
export default Map
// const styles = StyleSheet.create({})