React navigation 5 hide tab bar from stack navigator

The accepted answer is great, but you might want to do it inline, and use the getFocusedRouteNameFromRoute to be safe. This code does the same as the accepted answer:

<Tabs.Screen
    name="Home"
    component={HomeStack}
    options={({ route }) => ({
        tabBarVisible: ((route) => {
            const routeName = getFocusedRouteNameFromRoute(route) ?? ""

            if (routeName === "CameraView") {
                return false
            }

            return true
        })(route),
    })}
/>

You should try to rearrange your screen layer,

Original

• TabBar
  • Pond(Stack)
    • PondScreen
    • DetailScreen
  • Stock
  • Others

Instead, try to set a top stack over

• TopStack
  • TabBar
    • PondScreen
    • Stock
    • Others
  • Details

That should be able to hide the bottom tab bar or tab header in each screen

I had almost the same issue with a tabnavigation as parent and stacknavigation as childs and rearranging my screen layer wasn't an option. So I looked for another solution and from the docs I found out that the parent navigation UI is always shown on the child. But the docs also gave a great example on how to change a parent header from within a child. So I took that example and implemented it for the tabbar visibility. This is how I implemented it.

So I have a tabbar navigation with Home, Contacts and More, and inside each tab I have a stack. The screen that I hide the tabbar in is in the CameraView, and that screen is a stackscreen in the More tab.

• Home
• Contacts
• More

  • Profile
  • CameraView (here I want to hide the tabbar)

Tabnavigation:

As you can see I get the visibility of the tabbar from a method.

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeNavigation} />
    <Tab.Screen name="Contacts" component={ContactNavigation} />
    <Tab.Screen
      name="More"
      component={MoreNavigation}
      options={({ route }) => ({
        tabBarVisible: this.getTabBarVisibility(route)
      })}
    />
  </Tab.Navigator>
</NavigationContainer>

Method getTabBarVisibility:

This is were I check if the name of the route is CameraView which I defined in the StackNavigation.

getTabBarVisibility = (route) => {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : '';

  if (routeName === 'CameraView') {
    return false;
  }

  return true;
}

And the component MoreNavigation:

This is my stacknavigation for More, where you can see that the screen name is CameraView.

<Stack.Navigator initialRouteName="More">
  <Stack.Screen name="More" component={More}/>
  <Stack.Screen name="UserProfile" component={Profile}/>
  <Stack.Screen name="CameraView" component={CameraView}/>
</Stack.Navigator>