How can I hide the bottom tabbar on one tab only using react-native-navigation v2?

512 Views Asked by At

I am looking for a way to hide the tabbar on the first tab only for my app.

[EDIT FOR MORE DETAILS]

I have tried this:

Navigation.setRoot({
root: {
  bottomTabs: {
    id: "BottomTabsId",
    children: [
      {
        stack: {
          children: [
            {
              component: {
                name: "HomeScreenController",
                passProps: {
                  client,
                  user
                }
              }
            }
          ],
          options: {
            bottomTabs: {
              visible: false,
              drawBehind: true,
              translucent: true
            },
            bottomTab: {
              text: _strings.home,
              icon: _images.tabIcons.home,
              testID: "FIRST_TAB_BAR_BUTTON"
            }
          }
        }
      }, ...

the result is that the tab bar shows on the initial screen and then actually hides when I switch to another tab (switching is done programmatically) with is the opposite of what I want.

I have also tried using setRoot between a stack and bottomTabs. I then have a component at index0 that just listens for a tab switch to index 0 which then does a setRoot to go to the stack layout. From within the stack layout i have buttons to setRoot back to the bottomTabs at the chosen index. The trouble with this is that it needs to reload the app every time I setRoot and it is a tad slower than it needs to be. Also, the component that I have listening for tab switches does not seem to leave memory, and a console.log I put in there just keeps stacking up each time i call setRoot.

0

There are 0 best solutions below