title: Unable to Navigate to a StackNavigator nested in a DrawerNavigator
body: <p>I started with a drawer navigation to allow me to pick a category page as a starting point. From each category page I want to create a stack navigator so that it navigates with a stack without each page displayed in the drawer. I started by adding a StackNavigator to the &quot;product&quot; page, but was told to move it to the app page and used a nest navigator. So far, this is what I have...</p>
  <p>App.js ( Nested Navigators )</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export default function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Drawer.Navigator
          initialRouteName="LoL"
          drawerStyle={{
            backgroundColor: "#212121",
          }}
          drawerContentOptions={{
            activeTintColor: "orange",
            inactiveTintColor: "white",
          }}
        &gt;
          &lt;Drawer.Screen name="LoL" component={LoL} /&gt;
          &lt;Drawer.Screen name="CSGO" component={CSGO} /&gt;
          &lt;Drawer.Screen name="matchDetailsnav" component={matchDetailsNav} /&gt;
        &lt;/Drawer.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  const matchDetailsNav = () =&gt; {
    &lt;Stack.Navigator&gt;
    &lt;Stack.Screen name="MatchDetails" component={MatchDetails} /&gt;
  &lt;/Stack.Navigator&gt;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>If we navigate to <code>LoL.js</code> we will see a list of cards to click on. I am using the following code to generate routes for each card.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{matches.map((match, index) =&gt; {
            return (
              &lt;View&gt;
                &lt;TouchableOpacity
                  key={index}
                  onPress={() =&gt; navigation.navigate('matchDetailsNav', match)}
                &gt;
                  &lt;Card
                    .. passing some props here..&gt;&lt;/Card&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is where I started to get the following error...</p>
  <pre><code>The action 'NAVIGATE' with payload {** .. obj of the props im passing .. not important to question *} was not handled by any navigator.
  
  Do you have a screen named 'MatchDetails?
  
  If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
  </code></pre>
  <p>This was happening before I added the stack navigator but I am not sure why. I am importing the MatchDetails page into the <code>App.js</code>, there is not naming typo in my code, and I cannot seem to find why it doesn't see my match details page. Why is it not picking up my page?</p>
  <p><em><strong>EDIT:</strong></em> I just noticed that adding the nested navigator like I did in the example above put the name &quot;matchDetailsNav&quot; in my drawer nav as a clickable link, which is not what I want.</p>
  <p>I simply want to gave a drawer nav and then have regular stack navigation for the pages/screens that link within the drawer nav. This way, clicking on a card living on a screen that is accesable from the Drawer Nav should use a stack nav ( allowing for the back button and sliding animation ).</p>
  <p>I hope this edit clears up exactly what I am trying to do.</p>