title: React Native Invariant Violation: Element type is invalid
body: <p>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 <code>MapView</code> element I get the following error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>This is my <code>Main</code> component, which is exactly the same as demonstrated in the <a href="https://facebook.github.io/react-native/releases/0.31/docs/mapview.html" rel="nofollow noreferrer">MapView documentation</a> on the React Native website (except that I set <code>showsUserLocation</code> to <code>false</code>, which not causing the error):</p>
  
  <pre><code>import React, { Component } from 'react';
  import { MapView } from 'react-native';
  
  class Main extends Component {
    render() {
      return (
        &lt;MapView
          style={{height: 200, margin: 40}}
          showsUserLocation={false}
        /&gt;
      );
    }
  }
  
  export default Main;
  </code></pre>
  
  <p>The error refers to line 69 in <code>App.js</code> which is the <code>return</code> statement in the <code>render</code> method. For completeness, this is the <code>App</code> class:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import MainIOS from "./ios/Main";
  
  class App extends Component&lt;{}&gt; {
    render() {
      return (&lt;MainIOS /&gt;);
      )
    }
  }
  
  export default App;
  </code></pre>
  
  <p>How can I resolve this issue? I prefer not to use any 3rd party packages or libraries, rather just standard React Native components.</p>