title: Hide bottom navigation for inner screens in react navigation v5.x
body: <p>I am leveling up on react native and I am working on a project. So, I want to hide the bottom navigation on inners screens like</p>
  
  <pre><code>- Dashboard
  --- home &lt;- hide bottom navigation
  --- moment &lt;- hide bottom navigation
  --- period &lt;- hide bottom navigation
  --- contact &lt;- hide bottom navigation
  - Calendar
  - Notification
  - User
  </code></pre>
  
  <p>I have tried using <code>tabBarVisible: false</code> on Dashboard screen options but it hides the bottom navigation on Dashboard screen instead of the inner screen. Please what is the best way to hide the bottom navigation on inner screens?</p>
  
  <p>here is my navigation code:</p>
  
  <p><strong>BOTTOM NAVIGATION</strong></p>
  
  <pre><code>const BottomNavigation = () =&gt; (
    &lt;Tab.Navigator tabBar={props =&gt; &lt;MyTabBar {...props} /&gt;}&gt;
      &lt;Tab.Screen
        name={ScreenName.dashboard}
        options={{tabBarLabel: 'Dashboard'}}
        component={HomeNavigation}
      /&gt;
      &lt;Tab.Screen
        name={ScreenName.calendar}
        options={{
          tabBarLabel: 'Calendar',
        }}
        component={Calendar}
      /&gt;
      &lt;Tab.Screen
        name={ScreenName.notification}
        options={{
          tabBarLabel: 'Notification',
        }}
        component={Notification}
      /&gt;
      &lt;Tab.Screen
        name={ScreenName.user}
        options={{
          tabBarLabel: 'User',
        }}
        component={User}
      /&gt;
    &lt;/Tab.Navigator&gt;
  );
  </code></pre>
  
  <p><strong>HOME NAVIGATION</strong></p>
  
  <pre><code>const HomeNavigation = () =&gt; (
    &lt;Stack.Navigator
      screenOptions={{
        title: null,
        headerStyle: {elevation: 0, shadowOpacity: 0},
      }}&gt;
      &lt;Stack.Screen
        name={ScreenName.home}
        component={Home}
        options={() =&gt; ({
          headerShown: false,
        })}
      /&gt;
      &lt;Stack.Screen name={ScreenName.moment} component={Moment} /&gt;
      &lt;Stack.Screen name={ScreenName.period} component={Period} /&gt;
      &lt;Stack.Screen name={ScreenName.contact} component={Contact} /&gt;
    &lt;/Stack.Navigator&gt;
  );
  </code></pre>