title: "Route 'HomeScreen' should declare a screen" occuring for one of my components and i dont know why
body: <p>I have been trying to implement react-navigation to my project to very little success. </p>
  
  <p>Every time i import a screen to the navigator it comes up as "undefined". </p>
  
  <p>I have tried loading just the screen to the top level and it seems to work but when i put it inside the navigation it returns to being undefined. </p>
  
  <p>Heres my code: </p>
  
  <p>index.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Root from './navigator/router';
  //import Home from './screens/Home';
  
  export class App extends Component {
  render() {
      return &lt;Root /&gt;;
      }
  }
  </code></pre>
  
  <p>Home.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Slider,
  Image,
  ListView,
  ScrollView,
  TouchableOpacity
  } from 'react-native';
  import HeatingSliderComponent from '../components/HeatingSliderComponent';
  
  export default class Home extends Component {
  
  _onPressDial = () =&gt; {
  this.props.navigation.navigate('DialScreen');
  };
  
  render() {
  return (
  
    &lt;View style={styles.container}&gt;
  
      {/* Navigation bar */}
      &lt;View style={styles.navBarOuter}&gt;
        &lt;View style={styles.navBarInner}&gt;
  
          {/* item 1 */}
          &lt;TouchableOpacity flex = {1}&gt;
            &lt;Image 
              //style={styles.button}
              source={require('../../images/menu_logout.png')}
            /&gt;
          &lt;/TouchableOpacity&gt;
  
          {/* item 2 */}
          &lt;Image
            flex = {3}
            style = {{resizeMode: 'contain'}}
            source={require('../../images/background_text.png')}
          /&gt;
  
          {/* item 3 */}
          &lt;TouchableOpacity flex = {1}&gt;
            &lt;Image 
              //style={styles.button}
              source={require('../../images/menu_about.png')}
            /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      &lt;/View&gt;
  
      &lt;View style = {styles.oneFlexGap}/&gt;
  
      {/* Main Dial Button */}
      &lt;View style={styles.dialButton}&gt;
        &lt;TouchableOpacity onPress={this._onPressDial}&gt; 
          &lt;Image
          //figure out how to make this work and maybe look into making a custom wheel of some kind.
          //probably by writing in native android
            style={styles.button}
            source={require('../../images/menu_edit_4.png')}
          /&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
  
      {/*&lt;View style = {styles.oneFlexGap}/&gt;*/}
  
      {/* Vertical Slider */}
      {/*&lt;View style = {styles.vertSliderContainer}&gt;
        &lt;HeatingSliderComponent
          step={1}
          minimumValue={0}
          maximumValue={100}
          value={0}
        /&gt;
      &lt;/View&gt;*/}
    &lt;/View&gt;
  );
  }
  }
  
  const styles = StyleSheet.create({
  container: {
  flex: 5,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  },
  welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  },
  instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  },
  navBarInner: {
  flex: 1,
  flexDirection: 'row',
  height: '5%',
  width: '100%',
  alignItems: 'center',
  },
  navBarOuter: {
  flex: 2,
  alignItems: 'center',
  },
  vertSliderContainer: {
  flex: 2,
  alignItems: 'center',
  },
  dialButton: {
  flex: 2,
  alignItems: 'center',
  },
  button: {
  flex: 1
  },
  oneFlexGap: {
  flex: 1
  },
  });
  
  
  AppRegistry.registerComponent('Home', () =&gt; Home);
  </code></pre>
  
  <p>router.js:</p>
  
  <pre><code>import React from 'react';
  import { StackNavigator } from 'react-navigation';
  
  import DialScreen from '../screens/DialScreen';
  import Home from '../screens/Home';
  
  export const Root = StackNavigator({
      HomeScreen: {
          screen: Home,
      },
      DialScreen: {
          screen: DialScreen,
          navigationOptions: {
              title: 'DialScreen',
          },
      },
  });
  </code></pre>
  
  <p>I have tried a multitude of things to try and get it to work including making the project again in a new location. </p>
  
  <p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p>UPDATE: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p>I am still facing these errors but now i am facing the error "Route 'HomeScreen' should declare a screen error.</p>
  
  <p>With my last change i did this to the router.js</p>
  
  <pre><code>// import DialScreen from '../screens/DialScreen';
  // import Home from '../screens/Home';
  
  var DialScreen = require('../screens/DialScreen');
  var Home = require('../screens/Home');
  </code></pre>
  
  <p>and then structured the objects like this</p>
  
  <pre><code>DialScreen: {
          screen: DialScreen.DialScreen,
          navigationOptions: {
              title: 'DialScreen',
          },
  </code></pre>
  
  <p>from these changes i seem to get this error instead.</p>
  
  <pre><code>Route 'DialScreen' should declare a screen. For example:
  
  import MyScreen from './MyScreen';
  ...
  DialScreen: {
  screen: MyScreen,
  }
  &lt;unknown&gt;
      C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:22:6
  validateRouteConfigMap
      C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:18:21
  default
      C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\StackRouter.js:36:25
  default
      C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\navigators\StackNavigator.js:44:29
  loadModuleImplementation
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:174:12
  guardedLoadModule
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:119:45
  _require
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:110:24
  _accept
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:274:12
  &lt;unknown&gt;
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:121:27
  onmessage
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:101:26
  dispatchEvent
      C:\Users\Dell\Documents\DSMReact\node_modules\event-target-shim\lib\event-target.js:172:43
  &lt;unknown&gt;
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\WebSocket\WebSocket.js:148:27
  emit
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\EventEmitter\EventEmitter.js:182:12
  __callFunction
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:245:47
  &lt;unknown&gt;
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:101:26
  __guard
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:213:6
  callFunctionReturnFlushedQueue
      C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:100:17
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Jpbi3.png" rel="nofollow noreferrer">error message</a></p>