error while updating property 'coordinate' of a view managed by airmapmarker

Viewed 32

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;

enter image description here

0 Answers
Related