React-native MapViewer causes You likely forgot to export your component from the file it's def-CodePudding

I am using MapView of react-native-maps as shown below but when I try to run my code I get the error ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. If I replace the MapView with a Text tag the text content renders without any issues. Any help,

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import MapView from 'react-native-maps';
import Marker from 'react-native-maps';

const MyMapView = props => {
  const region = {
    latitude: 37.419857,
    longitude: -122.078827,
    latitudeDelta: 0.003,
    longitudeDelta: 0.003,
  };
  return (
    <MapView
      style={{flex: 1}}
      region={region}
      showUserLocation={true}
      onRegionChange={region}>
      <Marker coordinate={region} />
    </MapView>
  );
};
export default MyMapView;

please

CodePudding user response：

can you try importing all of react-native-maps together?

import MapView, {Marker} from 'react-native-maps'

CodePudding user response：

You need to modify the import of Marker component from :-

import Marker from 'react-native-maps';

import { Marker } from 'react-native-maps';

as it is a named export , not a default export .

For more details , please check npm documentation of react-native-maps here