How to hide a "SPECIFIC TAB BAR ITEM" from a bottom tab bar when using: @react-navigation/bottom-tabs

2
votes

Here's a video showcasing all my visible current bottom-tab-items: Home, My Account, Cart and Menu. https://streamable.com/no6anz

I have other bottom-tab-items I want to render on the screen but not be visible in the bottom tab bar itself.(For example: SettingsView)

How do I achieve this using react native navigation v5?

2
javascriptreactjsreact-native

2 Answers

2
votes

I've solved my own question:

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#161718',
    inactiveTintColor: '#ffffff',
    style: {
      backgroundColor: '#161718',
      paddingTop: 10,
      borderTopColor: '#161718',
    },
    labelStyle: {
      textAlign: 'center',
      top: 8,
    },
  }}
  screenOptions={({route}) => ({
    tabBarButton: ['Contact', 'Route2ToExclude'].includes(route.name)
      ? () => {
          return null;
        }
      : undefined,
  })}>

As you can see i'm using screenoptions to define which routes to exclude from the bottom tab bar. Note these routes do need to be an actual screen within the <tab.navigator> component.

0
votes

just on the element (Tab.Screen) you don't want to show, render a null tabBarButton.

<Tab.Screen
    name="SignIn"
    component={SignInScreen}
    options={{
      tabBarButton: (props) => null, //like this
      tabBarVisible: false, //this is additional if you want to hide the whole bottom tab from the screen
    }}
  />