title: Hidding tab bar bottom navigation from certain route screens
body: <p>I'm attempting to remove the tab bar bottom navigator from certain pages from my application. I have performed several searches with indication to use <code>display:none</code> or other methods, but they are not seeming to work. I have several nested routes inside of the Main route.<br>
  This is the tab route:</p>
  <pre><code>export function TabRoutes({ navigation }: any) {
    const { Navigator, Screen } = createBottomTabNavigator();
    const theme = useTheme();
  
    return (
      &lt;Navigator
        initialRouteName=&quot;FeedRt&quot;
        screenOptions={{
          headerShown: false,
          tabBarActiveTintColor: theme.colors.primary,
          tabBarStyle: {
            backgroundColor: theme.colors.tabBarBackground,
            position: 'absolute',
            borderTopRightRadius: 16,
            borderTopLeftRadius: 16,
            borderColor: '#9E9E9E',
            borderWidth: RFValue(0.5),
            borderStyle: 'solid',
            bottom: -10,
            height: 90,
            paddingHorizontal: 16,
            // tabBarStyle: { display: 'none' }
          },
        }}
      &gt;
        &lt;Screen
          key=&quot;FeedRt&quot;
          name=&quot;FeedRt&quot;
          component={FeedRoutes}
          options={{
            tabBarIcon: ({ focused }) =&gt; (
              &lt;TabBarIconAndText text=&quot;Home&quot; focused={focused} icon=&quot;Home&quot; /&gt;
            ),
            tabBarLabel: '',
          }}
        /&gt;
        &lt;Screen
          key=&quot;SearchRt&quot;
          name=&quot;SearchRt&quot;
          component={SearchRoutes}
          options={{
            tabBarIcon: ({ focused }) =&gt; (
              &lt;TabBarIconAndText text=&quot;Search&quot; focused={focused} icon=&quot;Search&quot; /&gt;
            ),
            tabBarLabel: '',
          }}
        /&gt;
        &lt;Screen
          key=&quot;CreatePosts&quot;
          name=&quot;CreatePosts&quot;
          component={EmptyScreen}
          listeners={({ navigation }) =&gt; ({
            tabPress: (event) =&gt; {
              event.preventDefault();
            },
          })}
          options={{
            tabBarIcon: ({ focused }) =&gt; (
              &lt;ToolTip navigation={navigation}&gt;
                &lt;View
                  style={{
                    marginTop: 10,
                    flexDirection: 'row',
                    backgroundColor: theme.colors.primary,
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                &gt;
                  &lt;PlusSVG /&gt;
                &lt;/View&gt;
              &lt;/ToolTip&gt;
            ),
            tabBarLabel: '',
          }}
        /&gt;
        &lt;Screen
          key=&quot;Shorts&quot;
          name=&quot;Shorts&quot;
          component={Shorts}
          options={{
            tabBarIcon: ({ focused }) =&gt; (
              &lt;TabBarIconAndText text=&quot;Shorts&quot; focused={focused} icon=&quot;Shorts&quot; /&gt;
            ),
            tabBarLabel: '',
          }}
        /&gt;
        &lt;Screen
          key=&quot;Profile&quot;
          name=&quot;Profile&quot;
          children={() =&gt; &lt;Profile navigation={navigation} myProfile={true} /&gt;}
          options={{
            tabBarIcon: ({ focused }) =&gt; (
              &lt;TabBarIconAndText text=&quot;Profile&quot; focused={focused} icon=&quot;Profile&quot; /&gt;
            ),
            tabBarLabel: '',
          }}
        /&gt;
      &lt;/Navigator&gt;
    );
  }
  </code></pre>
  <p>I want to remove the tab bar showing in the Comments from the FeedRoute</p>
  <pre><code>import React from 'react';
  import { createStackNavigator } from '@react-navigation/stack';
  
  // Screens
  import { Feed } from '../screens/FeedScreens/Feed';
  import { Comments } from '../screens/FeedScreens/Comments';
  
  export function FeedRoutes() {
    const { Navigator, Screen } = createStackNavigator();
  
    return (
      &lt;Navigator initialRouteName=&quot;Posts&quot; screenOptions={{ headerShown: false }}&gt;
        &lt;Screen key=&quot;Posts&quot; name=&quot;Posts&quot; component={Feed} /&gt;
        &lt;Screen key=&quot;Comments&quot; name=&quot;Comments&quot; component={Comments} /&gt;
      &lt;/Navigator&gt;
    );
  }
  </code></pre>
  <p>And I have this App route witch calls the Main (Tab route):</p>
  <pre><code>import React from 'react';
  import { createStackNavigator } from '@react-navigation/stack';
  
  // Screens
  import { TabRoutes } from './tab.routes';
  import { PostRoutes } from './post.routes';
  import { FeedRoutes } from './feed.routes';
  
  export function AppRoutes() {
    const { Navigator, Screen } = createStackNavigator();
  
    return (
      &lt;Navigator initialRouteName=&quot;Main&quot; screenOptions={{ headerShown: false }}&gt;
        &lt;Screen key=&quot;Main&quot; name=&quot;Main&quot; component={TabRoutes} /&gt;
        &lt;Screen key=&quot;Post&quot; name=&quot;Post&quot; component={PostRoutes} /&gt;
      &lt;/Navigator&gt;
    );
  }
  
  </code></pre>
  <p>Want to remove it from this screen:
  <a href="https://i.stack.imgur.com/INHUL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/INHUL.png" alt="enter image description here" /></a></p>