[V2] Hide bottom tab bar when push to a new screen

[webdevsyd]

Issue Description

I have TabBar base application, in one of my tab I need to push it to another screen but the tab bar should not display in the pushed screen. But the bottom bar is still existing in the pushed screen. What I want to achieved is not totally hide the bottom tab bar but to put the pushed screen on top of the tab bar.

Steps to Reproduce / Code Snippets / Screenshots

Here's my code to display the tab bar application:

bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          stack: {
            children: [
              {
                component: {
                  name: 'Home',
                  options: {
                    topBar: {
                      backButton: {
                        title: 'Back',
                      },
                      title: {
                        text: 'Home'
                      }
                    },
                    bottomTab: {
                      fontSize: 12,
                      text: 'Home',
                      icon: require('./src/assets/home.png'),
                      selectedIcon: require('./src/assets/home_active.png')
                    },
                  },
                },
              }
            ]
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  name: 'Booking',
                  options: {
                    topBar: {
                      title: {
                        text: 'Booking'
                      }
                    },
                    bottomTab: {
                      text: 'Booking',
                      fontSize: 12,
                      icon: require('./src/assets/booking.png'),
                      selectedIcon: require('./src/assets/booking_active.png')
                    }
                  }
                },
              }
            ],
          },
        },
      ],
    },

The Tab bar is still existing :(

What I want to achieve is this

---

Environment

• React Native Navigation version: 2.0.2454
• React Native version: 0.56
• Platform(s) (iOS, Android, or both?): IOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator IOS 11

[herarya]

@webdevsyd try this

Navigation.push(this.props.componentId, { component: { name: 'NEXT_PAGE', options: { bottomTabs: { visible: false, drawBehind: true, animate: true } } }, });

[abury]

Is anyone else getting immense lag using this after the first push? When I test this on the simulator, the first push works instantly, however any subsequent pushes seem to be delayed by a second, and every time I go back and push a new view onto the stack the delay increases. (Edit: only seems to happen on iOS simulator. iOS device and android emulator/device is fine)

[qiaolin-pan]

Navigation.mergeOptions(componentId, { bottomTabs: {visible: false, animate: false} });, mergeOptions does not work too !

[focuspace]

@webdevsyd try this

Navigation.push(this.props.componentId, { component: { name: 'NEXT_PAGE', options: { bottomTabs: { visible: false, drawBehind: true, animate: true } } }, });

This works!

[webdevsyd]

@herarya YOUR SOLUTION IS FUCKING REALLY WORKS!. Thank you very much!

[VicFrolov]

While this works, the transitions aren't smooth, the tabBar disappears during the segue, and when you pop back, it re-appears over the container being hidden. This is a great temporary solution to have the app function though.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[benkraus]

UIKit supports hidesBottomBarWhenPushed on a UIViewController, at at first glance it appeared that this isn't supported yet. I agree that that would be a very useful thing to add and would resolve the quirky animations.

[mtzfactory]

Hi,

This code only works when you change the active tab and then you returns to the previous tab, at this time the bottom tab is not visible.

Any solution?

Navigation.mergeOptions(componentId, { bottomTabs: {visible: false, animate: false} });

[harikrishnadvk1991]

when i am using bottomTab react-native-navigation v2 its working but my application is terminated after removing device from the machine this is the reason

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[TienNguyenanh]

@webdevsyd try this

Navigation.push(this.props.componentId, { component: { name: 'NEXT_PAGE', options: { bottomTabs: { visible: false, drawBehind: true, animate: true } } }, });

This work for me. Thanks

[ghost]

If anyone else needs this, this helped, for on app launch:

Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
      /**
       * Add default options right here
       * This also, on app launch, sets bottomTab to invisible,
       * in case you are doing custom navigations with buttons and so on
       * and do not need the bottom tab bar and other things.
       */
      bottomTabs: {visible: false, drawBehind: true, animate: true}
    });
  });