How to hide bottom tab on some screens nested inside stack navigator

[Homitag14]

[HardMode2015]

same here ...

[draturi95]

This can be done as below:

1. Create a tabBarRef for your bottom navigator:

export const tabBarRef = createRef() 

2. Add it to your bottom navigator:

 <CurvedBottomBar.Navigator
      ref={tabBarRef}
      ...
  >
  ...
  </CurvedBottomBar.Navigator>

3. In your stack navigator that is nested inside the bottom navigator, import the tabBarRef and add a useFocusEffect that hides the bottom navigator when you are on a route that needs the bottom tab to be hidden. Note that since the stack navigator is nested inside the bottom navigator, you get navigation, route objects as props in the stack navigator.

import { tabBarRef } from 'path-to-bottom-navigator'
import {
  getFocusedRouteNameFromRoute,
  useFocusEffect,
} from '@react-navigation/native'

useFocusEffect(() => {
  const routeName = getFocusedRouteNameFromRoute(route)
  if (
    [
     'route-with-bottom-tab-hidden-1', 
     'route-with-bottom-tab-hidden-2', 
      ...
    ].includes(routeName)
  ) {
    tabBarRef.current.setVisible(false)
  } else {
    tabBarRef.current.setVisible(true)
  }
})

[LuamLeite]

@draturi95 where should I get the route variable from? I did that useFocusEffect inside the definition of the stackNavigator, but couldn't find the route variable.

[draturi95]

@LuamLeite

As edited above, Since the stack navigator is nested inside the bottom navigator, you get navigation, route objects as props in the stack navigator.

[jelyqs]

@LuamLeite

Hi you, can you share the bottom menu code to handle this problem?

Thank you.

[Tvkaes]

can someone explain better that example or have one done

[xgenem]

Why do you have to do this when you can have them on the same hierarchy as this tab navigator?