title: Passing navigation props from parent to child component
body: <p>I am developing an application which starts from <code>App.js</code>. If user is using app, first time then <code>LoginScreen</code> rendered and if user is logged in already then <code>HomeScreen</code> rendered.</p>
  
  <p>Here's my <code>App.js</code>,</p>
  
  <pre><code>export default class App extends Component{
  
      state = {
          isFirstTime: true,
      }
  
      renderIf(condition, content) {
          if (condition) {
              return content;
          } else {
              return null;
          }
      }
  
      render(){
          const { navigate } = this.props;
          return(
              &lt;View style = {{flex: 1}} &gt;
                  {
                      this.renderIf(this.state.isFirstTime, &lt;LoginScreen /&gt;)
                  }
                  {
                      this.renderIf(!this.state.isFirstTime, &lt;HomeScreen /&gt;)
                  }
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>But now when I am trying to navigate from <code>LoginScreen</code> to <code>HomeScreen</code> using <code>StackNavigator</code>, I am getting an error that is,</p>
  
  <pre><code>Cannot read property 'navigate' of undefined
  </code></pre>
  
  <p>So, simply mine question is that how to pass props from parent component to child component. That is I want to pass, <code>this.props.navigation</code> from <code>App.js</code> to <code>LoginScreen.js</code></p>