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

Question

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?

Answer 1

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
      tabBarStyle: { display: 'none' }, //this is additional if you want to hide the whole bottom tab from the screen version 6.x
    }}
  />