react-navigation - navigating from child component : <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>
