title: Trouble passing down this.props.navigation to child components
body: <p>I am having a little trouble accessing this.props.navigation.navigate in child pages within ViewPager. I have a page where there's a button called "Details" and upon clicking the button it should open up a new separate view (like a new Intent Activity).</p>
  
  <p>Structure is:
  Login page -> tap on "login" button -> opens MainPage having a custom CustomBottomNavigationBar with ViewPager component which takes {Object} of 5 different pages and renders them like: </p>
  
  <p>In the root App.js I've already defined this configuration:</p>
  
  <pre><code>// App.js
  
  import MainPage from './views/mainpage';
  import PageOne from './views/pageoneview';
  import PageTwo from './views/pagetwoview';
  import PageOneDetailView from './views/PageOneDetailView';
  
  const MainNavigator = createStackNavigator({
    Home: {screen: MainPage},
    PageOne: {screen: PageOne},
    PageTwo: {screen: PageTwo},
    PageOneDetailView: {screen: PageOneDetailView}
  },
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    }
   });
  
  </code></pre>
  
  <pre><code>// mainpage.js
  
  
  import React, { Component } from 'react';
  import { 
      StyleSheet,
      Image,
      View,
      TouchableOpacity,
      ToastAndroid
  } from 'react-native';
  import PageOne from './homepages/pageoneview';
  import PageTwo from './homepages/pagetwoview';
  import CustomBottomNavigationBar from './../components/CustomBottomNavigationBar';
  
  export default MainPage extends Component {
  
  constructor(props) {
    super(props);
  }
  
  screens = () =&gt; {
    return {
      p1: {page: &lt;PageOne/&gt;},
      p2: {page: &lt;PageTwo/&gt;}
    }
  }
  
  render() {
          return (
              &lt;CustomBottomNavigationBar
                  screensets={this.screens()}
              /&gt;
          );
      }
  }
  </code></pre>
  
  <p>Now in PageOne.js there is a button called "Details" and on tapping, it must open a new PageOneDetail.js</p>
  
  <pre><code>// pageoneview.js
  
  
  import React, { Component } from 'react';
  import { 
      StyleSheet,
      Image,
      View,
      TouchableOpacity,
      ToastAndroid
  } from 'react-native';
  import PageOneDetail from './homepages/PageOneDetailView';
  
  export default PageOne extends Component {
  
  constructor(props) {
    super(props);
  }
  
  OpenView = (navigateObject, whichScreen) =&gt; {
          navigateObject(whichScreen);
  }
  
  render() {
    const {navigate} = this.props.navigation;
  
          return (
              &lt;View style={{ flex: 1, alignSelf: 'flex-end' }}&gt;
                &lt;TouchableOpacity onPress={() =&gt; this.OpenView(navigate, 'PageOneDetailView')}&gt;
                  &lt;Text&gt; Details &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>The error I get when I land on the MainPage is: <code>undefined is not an object this.props.navigation.navigate</code> when mainpage.js tries to load pageoneview.js</p>
  
  <p>Please help me understanding how to fix this issue which I have been facing whole day.</p>
  
  <p>Thanks.</p>