I am facing this error the code is given
In SearchResult component I passed the props origin and destination to the RouteMap component and when I run the code I am facing an error of
error while updating property 'coordinate' of a view managed by airmapmarker
component 1:
import { useRoute } from '@react-navigation/native';
const SearchResults = (props) => {
const route = useRoute();
const {originPlace, destinationPlace} = route.params;
console.log(route.params);
return (
<View style={{display: 'flex', justifyContent: 'space-between'}}>
<View style={{height: Dimensions.get('window').height - 400}}>
<RouteMap origin={originPlace} destination={destinationPlace} />
</View>
<View style={{height: 400}}>
<UberType />
</View>
</View>
);
};
export default SearchResults;
component 2
const RouteMap = ({ origin, destination }) => {
const originLoc = {
latitude: origin.details.geometry.location.lat,
longitude: origin.details.geometry.location.lng,
};
const destinationLoc = {
latitude: destination.details.geometry.location.lat,
longitude: destination.details.geometry.location.lng,
};
return (
<MapView
style={{ width: '100%', height: '100%' }}
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
initialRegion={{
latitude: 28.450627,
longitude: -16.263045,
latitudeDelta: 0.0222,
longitudeDelta: 0.0121,
}}>
<MapViewDirections
origin={originLoc}
destination={destinationLoc}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={5}
strokeColor="black"
/>
<Marker
coordinate={origin}
title={'Origin'}
/>
<Marker
coordinate={destination}
title={"Destination"}
/>
</MapView>
);
};
export default RouteMap;