Hiding tab bar in specific screens

[moxen-dev]

This exact same scenario is happening to me and I am trying to figure out how to nail it.

https://reactnavigation.org/docs/hiding-tabbar-in-screens/

I thought about something like this but without luck:

app/
  (app)
    _layout.js <- with Slot
    (tabs)
      _layout.js <- with Tabs
      home/
        index.js <- will be presented with tabs
        _layout.js <- with Stack
      tab2/
        ...
      tab3/
        ...
    pathWithoutTabs/
      _layout.ts <- with Stack
  (auth) <- Unprotected routes
    ...

Is there a good human the could put me on the right direction?

[Jojit-Thomas]

To achieve this, you can use the useSegments() hook and conditionally hide the tabbar by setting its display property to none. You can do this by checking if segment[3] is equal to the route you want to hide, and then setting the tabBarStyle accordingly. Here's an example:

import { useSegments } from 'react-native-screens';

const segment = useSegments();

<Tabs.Screen
  name="chat"
  options={{
    tabBarIcon: ({ color }) => <TabBarIcon name="message1" color={color} />,
    headerShown: false,
    tabBarStyle: { display: segment[3] === "routeYouNeedToHide" ? 'none' : 'flex' }
  }}
/>

Hope this helps!

[geshub]

Thanks, It's working but when pressing the back button, there is a delay for the tab bar to slide in, is there any way around this ?

[DamisFloris]

Same problem here, still haven't found a solution yet

[domkoder]

an update to what @Jojit-Thomas suggested

import { useSegments } from 'react-native-screens';

export default function TabLayout() {
  const segment = useSegments();
  // get the current page from the segment
  const page = segment[segment.length - 1]
  // create an array of list pages you want to hide the tab bar in
  const pagesToHideTabBar = ['report', 'add-device']
  return (
      <Tabs
      screenOptions={{
        tabBarStyle: {
          ...styles.tabBarStyle,
          // check if the current page is in the list then hide the tab bar
          display: pagesToHideTabBar.includes(page) ? 'none' : 'flex',
        },
      }}/>
  )
}

[KevinvdBurg]

@domkoder When I do this, the tabbar height is still there, even thou it has "display" none, any suggestions on how to fix it?

[KevinvdBurg]

Ok it seems like it had something to do with: react-navigation/react-navigation#10432 Adding "enableScreens(false);" fixed it

[thowitz]

This is the way I do it:

app
  _layout.tsx <- slot component
  (stack)
    _layout.tsx <- stack component, configuring screen options
    randomScreen.tsx
    (tabs)
      _layout.tsx <- tabs component
      index.tsx
      tabTwo.tsx
      tabThree.tsx
    auth <- related screens can be grouped by directory
      login.tsx
      signUp.tsx

Here's an example

[pgosk]

My solution is similar. I used tabBar prop.

import { useSegments } from 'expo-router';

export default function TabLayout() {
  const segment = useSegments();
  
  const hideTabBar = [...segments].includes("screen-wihout-bar");
 
  return (
      <Tabs
          screenOptions={{ ... }}
          // if condition is satisfied return function that return null, otherwise do nothing by setting undefined
          tabBar={hideTabBar ? () => null : undefined}
      />
  )
}