title: Add Drawer on Tabs navigation with all tabs in drawer
body: <p>I'm new to React native, Before duplicating i've tried various solutions such as
  <a href="https://stackoverflow.com/questions/64301678/how-to-navigate-from-drawer-navigation-to-bottom-tab-bar-navigation-in-react-nat">How to Navigate from DRAWER NAVIGATION to BOTTOM TAB BAR NAVIGATION in react native?</a> and
  <a href="https://stackoverflow.com/questions/67797258/using-drawernavigator-alongside-stack-navigation-on-react-native">Using DrawerNavigator alongside stack navigation on react native</a>
  but none worked for my case.</p>
  <p>What i want to achieve is, There are 2 screen stacks ie Login and Home screen.
  I need the drawer only in home screen and not the login screen.
  And in home screen there is a bottom tab navigator.
  I want the drawer in home screen with all the tabs also when the screen in drawer is selected it should show the screen in bottom tab navigation.
  Even a basic example will suffice.</p>
  <p>Here's my code</p>
  <pre><code>const Tabs = () =&gt; {
  return (
  &lt;Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarShowLabel: false,
      tabBarHideOnKeyboard: true,
    }}
    barStyle={{ backgroundColor: &quot;white&quot; }}
  &gt;
    &lt;Tab.Screen
      name=&quot;Trade&quot;
      component={Trade}
      options={{
        tabBarIcon: ({ focused }) =&gt; (
          &lt;TabBarIcon icon=&quot;eye&quot; label=&quot;Trade&quot; focused={focused} /&gt;
        ),
      }}
    /&gt;
    &lt;Tab.Screen
      name=&quot;MyOrders&quot;
      component={MyOrders}
      options={{
        tabBarIcon: ({ focused }) =&gt; (
          &lt;TabBarIcon
            icon=&quot;shopping-bag&quot;
            label=&quot;My Orders&quot;
            focused={focused}
          /&gt;
        ),
      }}
    /&gt;
    &lt;Tab.Screen
      name=&quot;Transport&quot;
      component={Trade}
      options={{
        tabBarIcon: ({ focused }) =&gt; (
          &lt;TabBarIcon icon=&quot;truck&quot; label=&quot;Transport&quot; focused={focused} /&gt;
        ),
      }}
    /&gt;
    &lt;Tab.Screen
      name=&quot;Transaction&quot;
      component={Trade}
      options={{
        tabBarIcon: ({ focused }) =&gt; (
          &lt;TabBarIcon icon=&quot;wallet&quot; label=&quot;Transaction&quot; focused={focused} /&gt;
        ),
      }}
    /&gt;
    &lt;Tab.Screen
      name=&quot;Profile&quot;
      component={Trade}
      options={{
        tabBarIcon: ({ focused }) =&gt; (
          &lt;TabBarIcon icon=&quot;user&quot; label=&quot;Profile&quot; focused={focused} /&gt;
        ),
      }}
    /&gt;
  &lt;/Tab.Navigator&gt;
  );
  };
  
  const DrawerStack = () =&gt; {
  return (
  &lt;Drawer.Navigator screenOptions={{ headerShown: false }}&gt;
    {/* &lt;Drawer.Screen name=&quot;Trade&quot; component={Trade}&gt;&lt;/Drawer.Screen&gt;
    &lt;Drawer.Screen name=&quot;MyOrders&quot; component={MyOrders}&gt;&lt;/Drawer.Screen&gt; */}
    &lt;Drawer.Screen name=&quot;Tabs&quot; component={Tabs}&gt;&lt;/Drawer.Screen&gt;
  &lt;/Drawer.Navigator&gt;
  );
  };
  
  const AppStack = () =&gt; {
  return (
  &lt;Stack.Navigator screenOptions={{ headerShown: false }}&gt;
    &lt;Stack.Screen name=&quot;App&quot; component={LoginStack}&gt;&lt;/Stack.Screen&gt;
    &lt;Stack.Screen name=&quot;HomeScreen&quot; component={DrawerStack}&gt;&lt;/Stack.Screen&gt;
  &lt;/Stack.Navigator&gt;
  );
  };
  
  export default AppStack;
  </code></pre>