title: Issue with Navigation in React Native - Organizing properly
body: <p>Am trying to start playing with React Native now. And I come from web development field.</p>
  
  <p>Since start, am trying to organize my folder structure so that it would be easy for me to understand and make modifications later.</p>
  
  <p>Right now the folder structure is as follows:</p>
  
  <pre><code>/screens
    HomeScreen.js
    ProfileScreen.js
  /navigation
    MainNavigation.js
  App.js
  ... etc
  </code></pre>
  
  <p>Am using Expo CLI as this is my first time working on React Native.</p>
  
  <p><strong>/navigation/MainNavigation.js</strong></p>
  
  <pre><code>import React from 'react';
  import { createStackNavigator, createAppContainer } from 'react-navigation';
  
  import HomeScreen from '../screens/HomeScreen';
  import ProfileScreen from '../screens/ProfileScreen';
  
  
  
  const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
      Profile: ProfileScreen,
    },
    {
      initialRouteName: 'Home',
    }
  );
  
  const AppContainer = createAppContainer(RootStack);
  
  export default class Navigation extends React.Component  {
    render() {
      return (
        &lt;AppContainer /&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>/screens/HomeScreen.js</strong></p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
  
  export default function HomeScreen() {
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity style={styles.blue_btn} onPress={() =&gt; this.props.navigation.navigate('Profile')}&gt;
          &lt;Text style={styles.white_text}&gt;Profile&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;Text&gt;Open up App.js to start working on your app!&lt;/Text&gt;
      &lt;/View&gt;
    );
  
  }
  
  HomeScreen.navigationOptions = {
    header: null,
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    blue_btn: {
      backgroundColor: '#13baa8',    
      padding: 10, 
    },
    white_text: {
      color: 'white',
    }
  });  
  </code></pre>
  
  <p><strong>/screens/ProfileScreen.js</strong></p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, Button } from 'react-native';
  
  export default function ProfileScreen() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Text&gt;Open up App.js to start working on your app!&lt;/Text&gt;
      &lt;/View&gt;
    );
  
  }
  
  
  ProfileScreen.navigationOptions = {
    title: 'Profile',
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import Navigation from './navigation/MainNavigation';
  
  export default class App extends React.Component  {
    render() {
      return (
        &lt;Navigation /&gt;
      );
    }
  }
  </code></pre>
  
  <p>When I click on the <code>Profile</code> button in the HOME Screen, it is showing this message:</p>
  
  <pre><code>undefined is not an object(evaluating '_this.props.navigation')
  </code></pre>
  
  <p>Thank you</p>