title: React Native - Navigation to other components not working
body: <p>I'm trying to setup a button click to trigger another component to be opened. I'm trying open a component named &quot;NameView&quot; from my Landing view. However, I'm getting this error:</p>
  <pre><code>TypeError: undefined is not an object (evaluating 'navigation.navigate')
  </code></pre>
  <p><strong>landing.js:</strong></p>
  <pre><code>import React from 'react'
  import { View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native'
  import { Svg } from 'react-native-svg'
  import NameView from './name_view.js';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  
  export default function Welcome({ navigation }) {
  
      return (
          &lt;View style={WelcomeStyles.Welcome}&gt;
              &lt;TouchableHighlight style={WelcomeStyles.Button} activeOpacity={0.6} underlayColor=&quot;#11132b&quot; onPress={() =&gt; navigation.navigate('NameView')}&gt;
                      &lt;View&gt;
                          &lt;View style={WelcomeStyles.ButtonBG} /&gt;
                          &lt;Text style={WelcomeStyles.GetStarted}&gt;Get Started&lt;/Text&gt;&lt;/View&gt;
                  &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
      )
  }
  </code></pre>
  <p>Project structure:</p>
  <p><a href="https://i.stack.imgur.com/hH7Zp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hH7Zp.png" alt="enter image description here" /></a></p>
  <p>I have installed the react-navigation library as well. I'm guessing I'm declaring the navigation wrong here? Support with this is much appreciated.</p>