title: How can I properly import a Component into my Navigator in React Native?
body: <p>I have a component named <code>EnterName</code> in another folder I want to use in my <code>Navigator</code> in my <code>index.ios</code> file. When I put <code>EnterName</code> in the same file I get no problems, but when I try and import it from another file I get:</p>
  
  <pre><code>Element type is invalid: expected a string (for built-in components 
  or a class/function (for composite components) but got: undefined. 
  Check the render method of `Navigator`
  </code></pre>
  
  <p>I've tried two different ways of importing the EnterName component, and neither work:</p>
  
  <p><code>import {EnterName} from './App/Components/EnterName';
  var EnterName = require('./App/Components/EnterName');</code></p>
  
  <p>Below is some text that uses <code>Navigator</code> and tries to use the component <code>EnterName</code> from another folder (this works when EnterName is declared in the same file).</p>
  
  <pre><code>  render() {
      return (
        &lt;Navigator
          initialRoute={{name: 'Name entry', index: 0}}
          renderScene={(route, navigator) =&gt;
              &lt;EnterName
                name={route.name}
                onForward={() =&gt; {
                  var nextIndex = route.index + 1;
                  navigator.push({
                    name: 'Scene ' + nextIndex,
                    index: nextIndex,
                  });
                }}
                onBack={() =&gt; {
                  if (route.index &gt; 0) {
                    navigator.pop();
                  }
                }}
              /&gt;
          }
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>And, if you want to see the EnterName file, it's here:</p>
  
  <pre><code>import React, {
    Text,
    View,
    Component,
    Image,
    StyleSheet
  } from 'react-native';
  
  class EnterName extends Component {
    render() {
      return (
        &lt;View style={styles.center}&gt;
          &lt;View style={styles.flowRight}&gt;
            &lt;TextInput style={styles.inputName}
              placeholder="Enter your name"
              textAlign="center"
              onChangeText={(text) =&gt; this.setState({text})}
              //value={this.state.text}
            /&gt;
  
            &lt;TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'&gt;
            &lt;Text style={styles.buttonText}&gt; Go &lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        )
    }
  }
  // The stylesheet is here, and then below it I have:
  module.export = EnterName;
  </code></pre>
  
  <p>Can you help me figure out how to modularize my code?</p>
  
  <p><strong>EDIT: I just forgot the "s" at the end of module.exports. Seems like export default class _classname extends Component { is the way to go.</strong></p>