title: How to pass props to 'screens'/components in react-navigation
body: <p>I'm fairly new to programming in general and even newer to JS and React(Native) but I have worked on this for an entire day now and I still haven't figured it out so I have resorted to Stack Overflow in hopes that someone can help me.</p>
  
  <p>Basically what I want to accomplish is to set other <code>Components</code> as children of the <code>App</code> component because I want them to be able to access information that I will set in the <code>state</code> of <code>App</code>. However, at the same time, I am also using <code>react-navigation</code> to create bottom navigation bars and thus I have no idea on how I can pass <code>props</code> of <code>App</code> to these other <code>Components</code> such as the <code>ExplorePage</code> component which is representative of the other <code>children components</code>.</p>
  
  <p>App
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ExplorePage from './app/tabs/ExplorePage';
  import {createBottomTabNavigator} from 'react-navigation';
  
  ...other imports
  
  class App extends React.Component {
  
    state = {
        parentState: 'testing testing',
      }
  
  }
  
  const MainScreenNavigator = createBottomTabNavigator(
    {
      Home: {screen: ExplorePage},
      Search: {screen: SearchPage},
      Favorites: {screen: FavoritesPage},
    }
  );
  
  
  export default MainScreenNavigator;</code></pre>
  </div>
  </div>
  </p>
  
  <p>ExplorePage, which is just like SearchPage and FavoritesPage</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>...imports
  
  export default class ExplorePage extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
      }
    }
    
    componentDidMount() {
      console.log(this.props.parentState ? this.props.parentState : "Parent state does not exist what do :(");
    }
    
    render(){
      return(
      &lt;Text&gt;Testing&lt;/Text&gt;
      )
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And obviously every time the console prints that <code>parentState</code> does not exist. I thought that being in the same place would give the other <code>components</code> like <code>ExplorePage</code> props of <code>App</code>. Thanks for helping me!</p>