Add guide for hiding tab bar on some screens

Author: satya164

versioned_docs/version-5.x/auth-flow.md

@@ -44,6 +44,8 @@ This pattern has been in use by other routing libraries such as React Router for
 
 The magic happens when the value of the `isSignedIn` variable changes. Let's say, initially `isSignedIn` is `false`. This means, either `SignIn` or `SignUp` screens are shown. After the user signs in, the value of `isSignedIn` will change to `true`. React Navigation will see that the `SignIn` and `SignUp` screens are no longer defined and so it will remove them. Then it'll show the `Home` screen automatically because that's the first screen defined when `isSignedIn` is `true`.
 
+It's important to note that when using such a setup, you **don't need to navigate** to the `Home` screen manually by calling `navigation.navigate('Home')`. React Navigation will automatically navigate to the `Home` screen when `isSignedIn` becomes `true`.
+
 This takes advantage of a new feature in React Navigation: being able to dynamically define and alter the screen definitions of a navigator based on props or state. The example shows stack navigator, but you can use the same approach with any navigator.
 
 By conditionally defining different screens based on a variable, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown.

versioned_docs/version-5.x/bottom-tab-navigator.md

@@ -170,7 +170,7 @@ Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`
 
 `true` or `false` to show or hide the tab bar, if not set then defaults to `true`.
 
-> Note: Hiding tab bar can cause glitches and jumpy behavior. We recommend [nesting](nesting-navigators.md) the tab navigator inside of a stack navigator instead.
+> Note: Hiding tab bar can cause glitches and jumpy behavior. We recommend [the tab navigator inside of a stack navigator instead](hiding-tabbar-in-screens.md).
 
 #### `tabBarIcon`
 

versioned_docs/version-5.x/hiding-tabbar-in-screens.md

@@ -0,0 +1,59 @@
+---
+id: hiding-tabbar-in-screens
+title: Hiding tab bar in specific screens
+sidebar_label: Hiding tab bar in specific screens
+---
+
+Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens: `Home`, `Feed`, `Notifications`, `Profile` and `Settings`, and your navigation structure looks like this:
+
+```js
+function HomeStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={Home} />
+      <Stack.Screen name="Profile" component={Profile} />
+      <Stack.Screen name="Settings" component={Settings} />
+    </Stack.Navigator>
+  );
+}
+
+function App() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeStack} />
+      <Tab.Screen name="Feed" component={Feed} />
+      <Tab.Screen name="Settings" component={Settings} />
+    </Tab.Navigator>
+  );
+}
+```
+
+With this structure, when we navigate to the `Profile` or `Settings` screen, the tab bar is still stay visible over those screens.
+
+But if we want to show the tab bar only on the `Home`, `Feed` and `Notifications` screens, but not on the `Profile` and `Settings` screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the firs screen of the stack instead of nesting stack inside tab navigator:
+
+```js
+function HomeTabs() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={Home} />
+      <Tab.Screen name="Feed" component={Feed} />
+      <Tab.Screen name="Settings" component={Settings} />
+    </Tab.Navigator>
+  );
+}
+
+function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeTabs} />
+      <Stack.Screen name="Profile" component={Profile} />
+      <Stack.Screen name="Settings" component={Settings} />
+    </Stack.Navigator>
+  );
+}
+```
+
+After re-organizing the navigation structure, now if we navigate to the `Profile` or `Settings` screens, the tab bar won't be visible over the screen anymore.
+
+Some tab navigators such as [bottom tab navigator](bottom-tab-navigator.md) also have a `tabBarVisible` option which can be used to hide the tab bar based on instructions in the [Screen options resolution guide](screen-options-resolution.md). However, we don't recommend using it since showing/hiding the tab bar mid-navigation can affect the animation of the stack navigator causing glitchy behaviour.

versioned_docs/version-5.x/screen-options-resolution.md

@@ -181,7 +181,7 @@ So what's happening here? The `route` prop contains a `state` property which ref
 This approach can be used anytime you want to set options for a parent navigator based on a child navigator's state. Common use cases are:
 
 1. Show tab title in stack header: a stack contains a tab navigator and you want to set the title on the stack header (above example)
-2. Show screens without tab bar: a tab navigator contains a stack and you want to hide the tab bar on specific screens (not recommended, nest the tab navigator inside a stack navigator instead)
+2. Show screens without tab bar: a tab navigator contains a stack and you want to hide the tab bar on specific screens (not recommended, see [Hiding tab bar in specific screens](hiding-tabbar-in-screens.md) instead)
 3. Lock drawer on certain screens: a drawer has a stack inside of it and you want to lock the drawer on certain screens
 
 In many cases, similar behavior can be achieved by reorganizing our navigators. We usually recommend this option if it fits your use case.

versioned_sidebars/version-5.x-sidebars.json

@@ -22,6 +22,7 @@
       "version-5.x/drawer-based-navigation",
       "version-5.x/auth-flow",
       "version-5.x/handling-safe-area",
+      "version-5.x/hiding-tabbar-in-screens",
       "version-5.x/status-bar",
       "version-5.x/screen-options-resolution",
       "version-5.x/custom-android-back-button-handling",