React Native Invariant Violation: Element type is invalid

Question

I'm building an iOS app with React Native and I'm trying to display a map. However, I'm running into a problem. Whenever I'm trying to display the MapView element I get the following error:

Invariant Violation: 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.

Check the render method of `Main`.

This error is located at:
    in Main (at App.js:69)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

createFiberFromElementType
    ReactNativeFiber-dev.js:974:90
createFiberFromElement
    ReactNativeFiber-dev.js:954:20
reconcileSingleElement
    ReactNativeFiber-dev.js:1403:26
reconcileChildFibers
    ReactNativeFiber-dev.js:1457:40
reconcileChildrenAtPriority
    ReactNativeFiber-dev.js:1634:54
reconcileChildren
    ReactNativeFiber-dev.js:1631:12
finishClassComponent
    ReactNativeFiber-dev.js:1669:12
updateClassComponent
    ReactNativeFiber-dev.js:1659:12
beginWork
    ReactNativeFiber-dev.js:1786:23

This is my Main component, which is exactly the same as demonstrated in the MapView documentation on the React Native website (except that I set showsUserLocation to false, which not causing the error):

import React, { Component } from 'react';
import { MapView } from 'react-native';

class Main extends Component {
  render() {
    return (
      <MapView
        style={{height: 200, margin: 40}}
        showsUserLocation={false}
      />
    );
  }
}

export default Main;

The error refers to line 69 in App.js which is the return statement in the render method. For completeness, this is the App class:

import React, { Component } from 'react';

import MainIOS from "./ios/Main";

class App extends Component<{}> {
  render() {
    return (<MainIOS />);
    )
  }
}

export default App;

How can I resolve this issue? I prefer not to use any 3rd party packages or libraries, rather just standard React Native components.

Answer 1

As it states in react-native docs for MapView (v0.38),

MapView

IMPORTANT: This component is now DEPRECATED and will be removed in January 2017 (React Native version 0.42). This component only supports iOS.

Please use react-native-maps by Airbnb instead of this component. Our friends at Airbnb have done an amazing job building a cross-platform MapView component that is more feature complete. It is used extensively (over 9k installs / month).