I have a component named EnterName in another folder I want to use in my Navigator in my index.ios file. When I put EnterName in the same file I get no problems, but when I try and import it from another file I get:

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`

I've tried two different ways of importing the EnterName component, and neither work:

import {EnterName} from './App/Components/EnterName';
var EnterName = require('./App/Components/EnterName');

Below is some text that uses Navigator and tries to use the component EnterName from another folder (this works when EnterName is declared in the same file).

  render() {

    return (

      <Navigator

        initialRoute={{name: 'Name entry', index: 0}}

        renderScene={(route, navigator) =>

            <EnterName

              name={route.name}

              onForward={() => {

                var nextIndex = route.index + 1;

                navigator.push({

                  name: 'Scene ' + nextIndex,

                  index: nextIndex,

                });

              }}

              onBack={() => {

                if (route.index > 0) {

                  navigator.pop();

                }

              }}

            />

        }

      />

    );

  }

}

And, if you want to see the EnterName file, it's here:

import React, {

  Text,

  View,

  Component,

  Image,

  StyleSheet

} from 'react-native';



class EnterName extends Component {

  render() {

    return (

      <View style={styles.center}>

        <View style={styles.flowRight}>

          <TextInput style={styles.inputName}

            placeholder=Enter your name

            textAlign=center

            onChangeText={(text) => this.setState({text})}

            //value={this.state.text}

          />



          <TouchableHighlight style={styles.button}

          underlayColor='#99d9f4'>

          <Text style={styles.buttonText}> Go </Text>

        </TouchableHighlight>

        </View>

      </View>

      )

  }

}

// The stylesheet is here, and then below it I have:

module.export = EnterName;

Can you help me figure out how to modularize my code?

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.