title: react-navigation - navigating from child component
body: <p>I have a leaderboard which calls a component and passes it data to it like so:</p>
  
  <pre><code>   _renderItem =({item}) =&gt; (
      &lt;childComponent
          key={item._id}
          id={item._id}
          name={item.name}
      /&gt;
     );
  </code></pre>
  
  <p>And inside the childComponent I try do this:</p>
  
  <pre><code>    &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate("Profile", { id: this.props.id})} &gt;
         &lt;View&gt;
           &lt;Right&gt;
                {arrowIcon}
           &lt;/Right&gt;
         &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>Where I am hoping that it will then go to the profile page and grab the correct data based on the id passed to it. The issue is that when I click the arrow to go to the profile page I get the error <strong>Cannot read property 'navigate of undefined</strong>. I have put both the leaderboard and childComponent in my HomeDrawerrRoutes.js and MainStackRouter.js. Any help would be great, thanks.</p>