title: React Native can't find variable: navigate
body: <p>I am doing stack navigation but I can't seem to be able to navigate I will get this error &quot;Can't find variable: navigate&quot; Here is the screenshot of my android emulator</p>
    <img src="https://i.stack.imgur.com/zox0g.png"> 
  <p>This is my App class(main)</p>
  <pre><code>export default class App extends Component {
  render() {
  return (
    &lt;View style={styles.container}&gt;
      &lt;Header/&gt;
      &lt;AppNavigator/&gt;
    &lt;/View&gt;
  );
  }
  }
  
  const AppNavigator = StackNavigator({
  Cluster1: { 
    screen: Cluster1,
    },
  Play: { 
    screen: Play,
    },
  });
  </code></pre>
  <p>This is my Cluster1 class</p>
  <pre><code>export default class Cluster1 extends Component{
  render(){
      return(
          &lt;View&gt;
              &lt;SectionList          
               
               renderSectionHeader={({ section }) =&gt; {
                  return (&lt;SectionHeader section={section} /&gt;);
              }}
               sections={ClusterData}
               keyExtractor={(item, index) =&gt; item.name}
          &gt;
          &lt;/SectionList&gt;
          &lt;/View&gt;
      );
    }
  } 
   class SectionHeader extends Component {
      render() {
          return (
              &lt;View style={styles.header}&gt;  
                  &lt;Text style={styles.headertext}&gt;
                  {this.props.section.title}       
                  &lt;/Text&gt;
                  &lt;TouchableOpacity onPress={() =&gt; { navigate(&quot;Play&quot;);}}&gt;
                  &lt;Text style ={styles.Play}&gt;Play
                  &lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          );
      }
      }
  </code></pre>