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

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?

Here's a video showcasing all my visible current bottom-tab-items: Home, My Account, Cart and Menu. https://streamable./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?

• javascript
• reactjs
• react-native

3 Answers 3

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

<Tab.Screen
    name="SignIn"
    ponent={SignInScreen}
    options={{
      tabBarButton: (props) => null, //like this
      tabBarStyle: { display: 'none' }, //this is additional if you want to hide the whole bottom tab from the screen version 6.x
    }}
  />

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> ponent.

React Navigation Bottom Tab Navigation github issue link

https://github./react-navigation/react-navigation/issues/5230#issuement-595846400