title: Showing Bottom Tab Navigator in every single screen
body: <p><strong>Background</strong></p>
  <p>Quite simple question, really, I have designed a bottom tab navigator for my app which shows only 5 icons/buttons. I need that nav to show in almost every screen.</p>
  <p><strong>Problem</strong></p>
  <p>This is my app structure:</p>
  <pre><code>&lt;NavigationContainer&gt; 
    &lt;Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
      screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}&gt; 
      &lt;Stack.Screen name=&quot;Home&quot;options={{headerShown: false}}&gt; 
        {props =&gt; &lt;TabNav {...props} extraData={user} /&gt;} 
      &lt;/Stack.Screen&gt; 
      &lt;Stack.Screen name=&quot;Login&quot; component={LoginScreen} options={{headerShown: false}}/&gt; 
      &lt;Stack.Screen name=&quot;RegistrationMethod&quot; component={RegistrationMethod} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;TermsScreen&quot; component={TermsScreen}  options={{headerShown: false}}/&gt; 
      &lt;Stack.Screen name=&quot;Registration&quot; component={RegistrationScreen}  options={{headerShown: false}}/&gt; 
      &lt;Stack.Screen name=&quot;Detail&quot; options={{title: ''}} component={BarDetail}/&gt; 
      &lt;Stack.Screen name=&quot;Profile&quot; options={{headerShown: false}}&gt;
        {props =&gt; &lt;ProfileScreen {...props} extraData={user} /&gt;}
      &lt;/Stack.Screen&gt;
      &lt;Stack.Screen name=&quot;personalDetails&quot; options={{title: 'Perfil'}}&gt;
        {props =&gt; &lt;PersonalDetails {...props} extraData={user} /&gt;}
      &lt;/Stack.Screen&gt;
      &lt;Stack.Screen name=&quot;config&quot; component={ConfigScreen} options={{title:'Configuración'}}/&gt;
      &lt;Stack.Screen name=&quot;menu&quot; component={MenuScreen} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;checkoutStart&quot; component={checkoutStart} options={{title: 'Tu compra'}}/&gt;
      &lt;Stack.Screen name=&quot;checkoutII&quot; component={checkoutII} options={{title: 'Tu compra'}}/&gt;
      &lt;Stack.Screen name=&quot;reviewScreen&quot; component={ReviewScreen} options={{title: 'Tu opinión'}}/&gt;
      &lt;Stack.Screen name=&quot;searchScreen&quot; component={TabNav} options={{headerShown: false}}/&gt;
    &lt;/Stack.Navigator&gt; 
  &lt;/NavigationContainer&gt;
  
  
  &lt;Tab.Navigator initialRouteName={user ? 'Home' : 'Login'} tabBarOptions={{showLabel: false}}
      screenOptions={{showLabel: false, cardStyle: { backgroundColor: '#FFFFFF' }}} sceneContainerStyle={{backgroundColor: 'white'}}&gt;
        &lt;Tab.Screen name=&quot;Home&quot; options={{
              tabBarIcon: ({size,focused,color}) =&gt; {
                if (focused) {
                  return (
                    &lt;SelectedHome/&gt;)
                } else {
                  return (
                    &lt;LinearHome/&gt;)
                }
                ;},}}
            &gt;
          {props =&gt; &lt;HomeScreen {...props} extraData={user} /&gt;} 
        &lt;/Tab.Screen&gt; 
        &lt;Tab.Screen name=&quot;Fav&quot; component={FavScreen} options={{
              tabBarIcon: ({size,focused,color}) =&gt; {
            
                  return (
                    &lt;LinearFav/&gt;)
                
                ;},}}
                /&gt;
        &lt;Tab.Screen name=&quot;Search&quot; component={SearchScreen} options={{
              tabBarIcon: ({size,focused,color}) =&gt; {
                if (focused) {
                  return (
                    &lt;SelectedSearch/&gt;)
                } else {
                  return (
                    &lt;LinearSearch/&gt;)
                }
                ;},}}/&gt;
        &lt;Tab.Screen name=&quot;Notifications&quot; component={NotificationsScreen} options={{
              tabBarIcon: ({size,focused,color}) =&gt; {
                if (focused) {
                  return (
                    &lt;SelectedNotifications/&gt;)
                } else {
                  return (
                    &lt;LinearNotifications/&gt;)
                }
                ;},}}/&gt;
        &lt;Tab.Screen name=&quot;HelpScreen&quot; component={HelpScreen} options={{
              tabBarIcon: ({size,focused,color}) =&gt; {
                if (focused) {
                  return (
                    &lt;SelectedHelp/&gt;)
                } else {
                  return (
                    &lt;LinearHelp/&gt;)
                }
                ;},}}/&gt;
      &lt;/Tab.Navigator&gt;
  </code></pre>
  <p>So I need the Tab Navigator as it is to show up in most screens from the stack navigator. I thought of changing it up, making it all tab and stack but wouldn't that cause a mess and also show every screen in the footer as touchable?</p>
  <p><strong>Question</strong></p>
  <p>How can I persist the tab navigator with only those icons in every other screen? (Note that the solution should consider that it must be able to be hidden in some specific screens.)</p>