Issue with Navigation in React Native - Organizing properly

Question

Am trying to start playing with React Native now. And I come from web development field.

Since start, am trying to organize my folder structure so that it would be easy for me to understand and make modifications later.

Right now the folder structure is as follows:

/screens
  HomeScreen.js
  ProfileScreen.js
/navigation
  MainNavigation.js
App.js
... etc

Am using Expo CLI as this is my first time working on React Native.

/navigation/MainNavigation.js

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 (
      <AppContainer />
    );
  }
}

/screens/HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';

export default function HomeScreen() {

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.blue_btn} onPress={() => this.props.navigation.navigate('Profile')}>
        <Text style={styles.white_text}>Profile</Text>
      </TouchableOpacity>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );

}

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',
  }
});  

/screens/ProfileScreen.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );

}


ProfileScreen.navigationOptions = {
  title: 'Profile',
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

App.js

import React from 'react';
import Navigation from './navigation/MainNavigation';

export default class App extends React.Component  {
  render() {
    return (
      <Navigation />
    );
  }
}

When I click on the Profile button in the HOME Screen, it is showing this message:

undefined is not an object(evaluating '_this.props.navigation')

Thank you

Answer 1

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';

const NavStack = createStackNavigator({
    ScreenOne: { 
        screen: ScreenOne,
    },
    ScreenTwo: { 
        screen: ScreenTwo,
    },
});

const App = createAppContainer(NavStack);

export default App;