title: DrawerNavigator to show tab bar all the time with every option tapped
body: <p>I am trying to have a tab bar and each tab bar has its own stack navigator. Three tabs that i have are
  Home
  Profile
  Settings</p>
  <p>I want to show these three options in the drawer also. I have created a drawer but only tapping home shows the tab bar. I want to show tab bar just like if you press of profile tab and tab bar remains there.</p>
  <p><a href="https://i.stack.imgur.com/mj8tc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mj8tc.png" alt="Tabs with their stack navigators" /></a></p>
  <p><a href="https://i.stack.imgur.com/VT0r9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VT0r9.png" alt="Side drawer with same options" /></a></p>
  <p><a href="https://i.stack.imgur.com/vDHcf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vDHcf.png" alt="Tapping profile from drawer hides tab bar" /></a></p>
  <p>Here is my code:</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-js lang-js prettyprint-override"><code>const HomeStackNavigator = createStackNavigator();
  export const HomeNavigator = () =&gt; {
    return (
      &lt;HomeStackNavigator.Navigator screenOptions={defaultNavOptions}&gt;
        &lt;HomeStackNavigator.Screen
          name="Home"
          component={HomeScreen}
          options={homeScreenOptions}
        /&gt;
         &lt;HomeStackNavigator.Screen
          name="Details"
          component={DetailsScreen}
          options={detailsScreenOptions}
        /&gt;
      &lt;/HomeStackNavigator.Navigator&gt;
    );
  };
  
  const ProfileStackNavigator = createStackNavigator();
  export const ProfileNavigator = () =&gt; {
    return (
      &lt;ProfileStackNavigator.Navigator screenOptions={defaultNavOptions}&gt;
        &lt;ProfileStackNavigator.Screen
          name="Profile"
          component={ProfileScreen}
          options={profileScreenOptions}
        /&gt;
         &lt;ProfileStackNavigator.Screen
          name="EditProfile"
          component={EditProfileScreen}
          options={editProfileScreenOptions}
        /&gt;
      &lt;/ProfileStackNavigator.Navigator&gt;
    );
  };
  
  const SettingsStackNavigator = createStackNavigator();
  export const SettingsNavigator = () =&gt; {
    return (
      &lt;SettingsStackNavigator.Navigator screenOptions={defaultNavOptions}&gt;
        &lt;SettingsStackNavigator.Screen
          name="Settings"
          component={SettingsScreen}
          options={settingsScreenOptions}
        /&gt;
         &lt;SettingsStackNavigator.Screen
          name="AccountDetail"
          component={AccountDetailsScreen}
          options={accountDetailsScreenOptions}
        /&gt;
      &lt;/SettingsStackNavigator.Navigator&gt;
    );
  };
  
  
  
  
  const HomeTabNavigator = createBottomTabNavigator();
  export const TabNavigator = () =&gt; {
    return (
      &lt;HomeTabNavigator.Navigator screenOptions={defaultNavOptions}&gt;
        &lt;HomeTabNavigator.Screen
          name="Home"
          component={HomeNavigator}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color, size }) =&gt; (
              &lt;MaterialCommunityIcons name="home" color={color} size={size} /&gt;
            ),
          }}
        /&gt;
         &lt;HomeTabNavigator.Screen
          name="Profile"
          component={ProfileNavigator}
          options={{
            tabBarLabel: 'Profile',
            tabBarIcon: ({ color, size }) =&gt; (
              &lt;MaterialCommunityIcons name="face-profile" color={color} size={size} /&gt;
            ),
          }}
        /&gt;
        &lt;HomeTabNavigator.Screen
          name="Settings"
          component={SettingsNavigator}
          options={{
            tabBarLabel: 'Settings',
            tabBarIcon: ({ color, size }) =&gt; (
              &lt;MaterialCommunityIcons name="account-settings" color={color} size={size} /&gt;
            ),
          }}
        /&gt;
      &lt;/HomeTabNavigator.Navigator&gt;
    );
  };
  
  
  
  const AppDrawer = createDrawerNavigator();
  export const Drawer = () =&gt; {
    return(
        &lt;AppDrawer.Navigator initialRouteName="Home"&gt;
          &lt;AppDrawer.Screen name="Home" component={TabNavigator} /&gt;
          &lt;AppDrawer.Screen name="Profile" component={ProfileNavigator} /&gt;
          &lt;AppDrawer.Screen name="Settings" component={SettingsNavigator} /&gt;
        &lt;/AppDrawer.Navigator&gt;
    )
  };</code></pre>
  </div>
  </div>
  </p>
  <p>My goal is to have tabs all the time. Tabs should hide only if we go to the detail page of any of the tabs.</p>