title: react native navigation problem ( nesting stack, drawer and bottom tab)
body: <p>I'm using RN navigation v5 for my app and I'm gonna build my navigation like image below:
  <a href="https://i.stack.imgur.com/ElA4l.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ElA4l.jpg" alt="enter image description here" /></a></p>
  <p>as you can see this app has an intro then some authentication screens and after sign in user view the home screen. so what I want is stack for intro, drawer and bottom tab navigation for my home screen. you can see my code below:</p>
  <pre><code>const IntroStack = createStackNavigator();
  
  const IntroNavigation = () =&gt; {
    return (
      &lt;NavigationContainer&gt;
        &lt;IntroStack.Navigator&gt;
          &lt;IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} /&gt;
          &lt;IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} /&gt;
          &lt;IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} /&gt;
          &lt;IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} /&gt;
          &lt;IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} /&gt;
          &lt;IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} /&gt;
          &lt;IntroStack.Screen name='home' component={Home} options={{ headerShown: false }} /&gt;
        &lt;/IntroStack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    )
  }
  
  const Drawer = createDrawerNavigator();
  const Tab = createBottomTabNavigator();
  
  const TabNavigation = () =&gt; {
    return (
      &lt;Tab.Navigator&gt;
        &lt;Tab.Screen name=&quot;home&quot; component={Home} /&gt;
        &lt;Tab.Screen name=&quot;worldTour&quot; component={WorldTour} /&gt;
        &lt;Tab.Screen name=&quot;Outlet&quot; component={Outlet} /&gt;
        &lt;Tab.Screen name=&quot;Profile&quot; component={Profile} /&gt;
        &lt;Tab.Screen name=&quot;OutTherapists&quot; component={OurTherapists} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  
  const DrawerNavigation = () =&gt; {
    const dimentions = useWindowDimensions();
  
    return (
      &lt;Drawer.Navigator drawerStyle={{ width: dimentions.width }} drawerContent={props =&gt; &lt;DrawerContent /&gt;}&gt;
        &lt;Drawer.Screen name=&quot;home&quot; component={IntroNavigation} /&gt;
      &lt;/Drawer.Navigator&gt;
  
    );
  }
  
  export default TabNavigation;
  </code></pre>
  <p>but this did not work. I tried to read docs and watch some tutorials but I couldn't find something similar. I know somehow I must nest this stacks to each other but none of my tried ways achieve what I want. any help would be appreciated.</p>