How to add navigation to a screen without it showing up in the drawer

I have this code in which I setup a drawer navigator

const Drawer = createDrawerNavigator();

const MyDrawer = () => {
  return(
    <Drawer.Navigator initialRouteName="Test">
      <Drawer.Screen name="Test" component={Test}/>
      <Drawer.Screen name="Menu" component={Menu}/>
      <Drawer.Screen name="Dish Detail" component={DishDetail} />
    </Drawer.Navigator>
  );
}

I want to be able to navigate to the Dish Detail screen by clicking a Button component in the Menu Screen. But I also want to be able to navigate between the Test and Menu screens using a drawer. So, when I add navigation to the Dish Detail screen, it shows up in the drawer which is not good because I need to pass different props to it depending on what button is clicked.

Answer

The docs have a similar situation, when you want to have a screen that is not shown in the bottom tab bar.

The solution is to create a Stack Navigator where MyDrawer is a Screen:

const Drawer = createDrawerNavigator();

const MyDrawer = () => {
  return(
    <Drawer.Navigator initialRouteName="Test">
      <Drawer.Screen name="Test" component={Test}/>
      <Drawer.Screen name="Menu" component={Menu}/>
    </Drawer.Navigator>
  );
}

const AppStack = createStackNavigator();

const MyStack = () => {
  return(
    <AppStack.Navigator initialRouteName="Drawer">
      <AppStack.Screen name="Drawer" component={MyDrawer}/>
      <AppStack.Screen name="Dish Detail" component={DishDetail} />
    </AppStack.Navigator>
  );
}