React Native Navigation Library - hiding a bottom tab

Question

I'm currently using React Native Navigation to power navigation in a react native application.

For the purposes of explaining the problem, I have two screens, one for the homepage, and one for the Search Screen, for the search screen, there are navigational elements left to right that allow you to move further through the app. For the home screen, think of it as a splash screen that doesn't need the navigational elements. There are two buttons on it that allow the user to move through the app.

Now. My problem is this. On the home screen, navigation is hidden.

   HomeScreen.options = {
        bottomTabs: {
            visible: false
        },
        topBar: {
            visible: false
        }
    }

In my definition of the Bottom Tabs, the home page is a child entry, without any options. In this scenario, it appears that doing this, creates an additional entry in the bottom tab, which I don't want to appear. i.e. the Home Child, should not have an associated icon in the bottom nav on the search screen. Am I missing something? Is there an easy way to remove a 'bottom tab' but still have it sitting in the same structure? Or is there a better way to do this?

I did try having multiple navigators, however, this didn't seem to play ball either.

const BOTTOM_TABS: LayoutBottomTabs = {
  id: 'BOTTOM_TABS',
  children: [
    {
      stack: {
        id: 'HOME_TAB',
        children: [
          {
            component: {
              id: 'HOME_SCREEN',
              name: 'HomeScreen',
            }
          }
        ],
        
      },
    },
    {
      stack: {
        id: 'SEARCH_TAB',
        children: [
          {
            component: {
              id: 'SEARCH_SCREEN',
              name: 'SearchScreen',
            }
          }
        ],
        options: {
          bottomTab: {
            text: 'Search',
            icon: require('@resource/icons/tabs/search.png'),
            ...tabConfig,
          },
        },
      },
    },
  ],
};

export default BOTTOM_TABS


 Navigation.setRoot({
    root: {
      bottomTabs: BOTTOM_TABS,
      options: {
        statusBar: {
          backgroundColor: DARK_ORANGE,
          style: 'light',
        },
      },
    },

there are 2 screens, from the home screen, you can go to the search screen. The home screen only has 2 buttons nothing else. But the search screen has tabs on it. your issue is that, you are seeing your home screen as a tab on the search screen. right?? — MRPMOHIBURRAHMAN
@MRPMOHIBURRAHMAN - right. Due to its definition as a child in the stack. — Squiggs.
I may come up with an answer in an hour or two, let me check first. — MRPMOHIBURRAHMAN
@MRPMOHIBURRAHMAN - jolly good, I'll sit here patiently keeping the karma warm :) — Squiggs.

MRPMOHIBURRAHMAN MRPMOHIBURRAHMAN · Accepted Answer · 2021-06-07T14:30:45

You need to place your search screen ( which contains tab ) into a stack navigator, where you also have your home screen.

Here I am using react-navigation 5

Create a stack navigator which will contain your home screen and search screen.

<Stack.Navigator>
   <Stack.Screen
     name="HomeScreen"
     component={HomeScreen}
   />
   <Stack.Screen
     name="SearchScreen"
     component={SearchScreen}
   />
</Stack.Navigator>

In SearchScreen you'll create tabs that you needed.

<Tab.Navigator>
   <Tab.Screen
     name={tabScreenOne}
     component={tabScreenOne}
     options={{
       tabBarLabel: 'tabScreenOne',
     }}
   />
   <Tab.Screen
     name={tabScreenTwo}
     component={tabScreenTwo}
     options={{
      tabBarLabel: 'tabScreenTwo',
     }}
    />
</Tab.Navigator>

Let me know if you need a working code sample.

React Native Navigation Library - hiding a bottom tab

1 Answers