title: How do you stop hide a tab bar on a specific screen in a nested stack navigator before the screen renders in React Navigation v6?
body: <p>I need to make an app that has a structure as follows...</p>
  <pre><code>import HomeNavigator from './app/home-navigator';
  import InboxNavigator from './app/inbox-navigator';
  import ProfileNavigator from './app/profile-navigator';
  
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
  const App = createBottomTabNavigator();
  
  &lt;App.Navigator
       screenOptions={({ route }) =&gt; ({
                  tabBarLabelStyle: {
                      color: 'black',
                  },
              })}&gt;
              &lt;App.Screen
                  name=&quot;HomeStack&quot;
                  options={{
                      headerShown: false,
                      title: 'Home',
                      tabBarStyle: { display: 'flex' },
                  }}
                  component={HomeNavigator}
              /&gt;
              &lt;App.Screen
                  name=&quot;InboxStack&quot;
                  options={{ headerShown: false, title: 'Tours' }}
                  component={InboxNavigator}
              /&gt;
              &lt;App.Screen
                  name=&quot;ProfileStack&quot;
                  options={{ headerShown: false, title: 'Profile' }}
                  component={ProfileNavigator}
              /&gt;
  &lt;/App.Navigator&gt;
  </code></pre>
  <p>Basically, it is a Tab Navigator with stack navigators nested inside. I want to be able to hide the tab bar on specific pages though. For example, the <code>HomeNavigator</code> had 2 pages, HomeScreen and ViewStudentScreen. I want to see the tab bar on the HomeScreen, but not on the viewstudent screen.</p>
  <p>When I looked around for solutions I came across a couple, the first on <a href="https://reactnavigation.org/docs/hiding-tabbar-in-screens" rel="nofollow noreferrer">reacts website</a> which does not work for me because I still want the organizational structure and the navigational benefits (ie screen animations, stack poping, etc) of all of the similar pages being nested in the same navigator. If you follow their solution (and apply it to the scenario described above), then the ViewStudent screen, as well as all the other screens in the home stack, are now just in the root of the navigator with all other nested screens from the other tabs (Home, Inbox and Profile).</p>
  <p>When I try using any options that work to hide the screen using the routeName, or checking the focused route name, I get behavior that looks like this. <a href="https://media.giphy.com/media/c1ASFvHsN8daWNaKrJ/giphy.gif" rel="nofollow noreferrer">Gif of the incorrect behavior</a></p>
  <p><a href="https://i.stack.imgur.com/H0VGN.png" rel="nofollow noreferrer">console output from navigating from HomePage to view student page</a></p>
  <p>As you can see, the tab bar is hidden, but the page renders as if the tab bar is there. If we look at the console, we see the screen is updated when we click (the second <code>RouteName: Home</code>), then the navigation and the ViewStudent Page renders, then the RouteName switches, and hides the tab bar (second <code>RouteName: ViewStudent</code>). However, the page has already rendered thinking the tab bar is there.</p>
  <p>I found a jank solution that works, by putting the following code <code>navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' } });</code> on any page you want to hide.</p>
  <p>Basically, how do I hide the tab bar on pages that are in nested stack naviagtors? If this is confusing in any way, please let me know what else I can provide to help clarify! Thanks for the help!</p>
  <p>PS. Since I included the incorrect behavior, <a href="https://media.giphy.com/media/qC1F3YaJrahfrvLDoA/giphy.gif" rel="nofollow noreferrer">this is the correct behavior.</a></p>