title: Fix Error: The component for route 'Home' must be a React component
body: <p>I'm trying to used react-navigation but I can not get it to work when I move each screens' components into multiple files.  I always get this error: "The component for route 'Home' must be a React component". This error doesn't happen if I move all of the code into one file, so I'm not sure what the difference is.</p>
  
  <p>Here is my App.js:</p>
  
  <pre><code>import React from 'react';
  import { StackNavigator } from 'react-navigation';
  import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
  
  import { HomeScreen } from './screens/HomeScreen';
  import { JoinScreen  from './screens/JoinScreen';
  import { HostScreen } from './screens/HostScreen';
  
  
  const Root = StackNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
      Details: {
        screen: JoinScreen,
      }
    }, 
    {
      initialRouteName: 'Home',
      headerMode: 'none',
    }
  );
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;Root /&gt;
      )
    }
  }
  </code></pre>
  
  <p>And here is my .screens/HomeScreen.js</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  
  export default class HomeScreen extends React.Component {
    render() {
      const { navigate } = this.props.navigation;
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.title}&gt;Hello World&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'space-around',
    }
  });
  </code></pre>