title: I keep getting errors that "navigation" is not defined
body: <p>I am trying to create a login button that navigates to another page but I keep getting errors that &quot;navigation&quot; is not defined</p>
  <p>here's the screenshot of the error:
  <a href="https://i.stack.imgur.com/6QvvO.jpg" rel="nofollow noreferrer">screenshot here</a></p>
  <p><a href="https://i.stack.imgur.com/HPDwC.jpg" rel="nofollow noreferrer">screenshot here</a>
  that's the app component:</p>
  <pre><code>export default function App({navigation}) {
    const { navigate } = this.props.navigation;
    return (
      
      &lt;View style={styles.container}&gt;
       
       &lt;Image
          
          source={logo}
          style={styles.stretch}
        /&gt;
        &lt;Image
          
          source={logo2}
          style={styles.stretch2}
        /&gt;
        
    
    &lt;Button title=&quot;Login&quot; style={[styles.buttonContainer, styles.loginButton,styles.top]} onPress={() =&gt; navigation.navigate(&quot;Details&quot;)} &gt;
       &lt;Text style={styles.loginText}&gt;LOG IN&lt;/Text&gt;
     &lt;/Button&gt;  
     &lt;TouchableHighlight style={[styles.buttonContainer2, styles.loginButton2,styles.top2]} &gt;
       &lt;Text style={styles.loginText2}&gt;Register&lt;/Text&gt;
     &lt;/TouchableHighlight&gt;  
          &lt;NavigationContainer&gt;
            
    &lt;Stack.Navigator &gt;
    &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} /&gt;
          &lt;Stack.Screen name=&quot;Details&quot; component={Details} /&gt;
          &lt;/Stack.Navigator&gt;
          
  &lt;/NavigationContainer&gt;
          &lt;/View&gt;
      
    );
  }
  </code></pre>
  <p>here I got stuck after using the navigation Ref method:
  <a href="https://i.stack.imgur.com/56FZX.jpg" rel="nofollow noreferrer">link here</a></p>