title: Passing Navigation to a Function Component
body: <p>This Is My Home Page Code:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  //More Imports
  
  export default class Home extends React.Component {
   //Some Code
    render() {
      const { navigation } = this.props;
  
      return (
        &lt;ScrollView&gt;
        //Some Code
            &lt;View style={styles.barContainer}&gt;
              &lt;Button
                title=&quot;Add Lesson&quot;
                onPress={() =&gt; navigation.navigate(&quot;ThisLesson&quot;)}
              /&gt;
            &lt;/View&gt;
            //Some Code
            {ScrollViewWithCards}
        //Some Code
        &lt;/ScrollView&gt;
      );
    }
  }
  const styles = StyleSheet.create({
  //Some Style
  });
  
  const cards = [
    {
      day: &quot;3&quot;,
      month: &quot;Jan&quot;,
      numberOfPeople: &quot;4&quot;,
      time: &quot;17:00-18:00&quot;,
      title: &quot;Dance Class&quot;,
      image: require(&quot;../../../assets/images/image1.jpeg&quot;),
    },
    //More Cards...
  ];
  
  const ScrollViewWithCards = (
    &lt;ScrollView&gt;
      {cards.map((card, index) =&gt; (
        &lt;View key={index} style={styles.cardContainer}&gt;
          &lt;TouchableOpacity
            onPress={() =&gt;
              navigation.navigate(&quot;ThisLesson&quot;, {
                image: card.image,
                day: card.day,
                month: card.month,
                time: card.time,
                title: card.title,
                numberOfPeople: card.numberOfPeople,
              })
            }
          &gt;
            &lt;HomeCard
              image={card.image}
              day={card.day}
              month={card.month}
              time={card.time}
              title={card.title}
              numberOfPeople={card.numberOfPeople}
            /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      ))}
    &lt;/ScrollView&gt;
  );
  
  </code></pre>
  <p>I'm mapping through an array of static data and rendering cards unto the screen
  I made the cards pressable so that they take me to another page,
  when I click the card it <strong>Returns an error:</strong><code>Reference Error: Can't find variable: navigation</code>
  <strong>But the Button Above the Cards Works Just Fine</strong></p>
  <p>What Am I Doing Wrong?
  I tried the <code>useNavigation</code> Hook but it didn't work either</p>
  <p><strong>Update</strong>
  This is my HomeCard component:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  //More Imports
  
  const HomeCard = (props) =&gt; {
    
  
    return (
      &lt;View style={styles.container}&gt;
  //Some Code
      &lt;/View&gt;
    );
  };
  export default HomeCard;
  
  const styles = StyleSheet.create({
  //Some Style
  });
  
  const smallAvatars = [
  //Some Array
  ];
  
  </code></pre>
  <p>I passed <code>{navigation}</code> to  <code>ScrollViewWithCards</code> like so:</p>
  <pre class="lang-js prettyprint-override"><code>const ScrollViewWithCards =({navigation})=&gt;()
  </code></pre>
  <p>but now I'm Getting another Error <code>TypeError: undefined is not an object (evaluating 'navigation.navigate')</code></p>
  <h1>Solution</h1>
  <p>The Solution for this Problem is to transform <code>ScrollViewWithCards</code> to a function component, then pass props to it and add return:</p>
  <pre class="lang-js prettyprint-override"><code>const ScrollViewWithCards = (props) =&gt; {
    return (
      &lt;ScrollView&gt;
        {cards.map((card, index) =&gt; (
          &lt;View key={index} style={styles.cardContainer}&gt;
            &lt;TouchableOpacity
              onPress={() =&gt;
                props.navigation.navigate(&quot;ThisLesson&quot;, {
                  image: card.image,
                  day: card.day,
                  month: card.month,
                  time: card.time,
                  title: card.title,
                  numberOfPeople: card.numberOfPeople,
                })
              }
            &gt;
              &lt;HomeCard
                image={card.image}
                day={card.day}
                month={card.month}
                time={card.time}
                title={card.title}
                numberOfPeople={card.numberOfPeople}
              /&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        ))}
      &lt;/ScrollView&gt;
    );
  };
  </code></pre>
  <p>and then in the main render:
  <code>&lt;ScrollViewWithCards navigation={this.props.navigation} /&gt;</code></p>