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

Question

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

You can also check [this](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import) post. — rafon, Jul 28 '22 at 07:48

score 1 · Accepted Answer · answered Jul 18 '22 at 15:47

1

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

like

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

answered Jul 18 '22 at 15:47

mainak

1,886
2
9
19

score 1 · Answer 2 · answered Jul 18 '22 at 15:48

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

import Marker from 'react-native-maps';

to

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

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

2 Answers2