title: Passing a component a navigation screen via props from screen component
body: <p>I am building an app that has a list on the home screen routing to a number of other screens. </p>
  
  <p>I created a list component that is rendered on the home page, and therefore, need to pass the navigation down to the list component. The list component, in turn, will determine which screen to display depending on which item is pressed. </p>
  
  <p>I am using a <code>Stack Navigator</code> on my <strong>router.js</strong> file</p>
  
  <pre><code>export const HomeStack = StackNavigator({
  
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Nutrition: {
     screen: Nutrition,
     navigationOptions: {
       title: 'Nutrition',
      }
    },
  });
  </code></pre>
  
  <p>In my <strong>home.js</strong> screen I have the below code inside the render method</p>
  
  <pre><code>render() {
   return (
    &lt;View&gt;
        &lt;View&gt;
          &lt;ListComponent navigate={this.props.navigation.navigate('')} /&gt;
          &lt;Button
          title="Go to Nutrition"
          onPress={() =&gt; this.props.navigation.navigate('Nutrition')}
          /&gt;
        &lt;/View&gt;
    &lt;/View&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <p>The Button successfully routes to the <strong>Nutrition.js</strong> screen. </p>
  
  <p>But, I try to get my <strong>ListComponent.js</strong> to handle where to route as this file maps through my list array. </p>
  
  <pre><code>  render() {
     return (
       &lt;List&gt;
         {ListData.map((listItem, i) =&gt; (
          &lt;ListItem
          key={i}
          title={listItem.title}
          leftIcon={{ name: listItem.icon }}
          onPress={this.onPressHandler(listItem.title)}
          /&gt;
        ))}
       &lt;/List&gt;
     );
   }
  </code></pre>
  
  <p>How can I properly pass the navigation as props down to <strong>ListComponent.js</strong> and then use the title from the list array to determine which screen to display?</p>