CODEWITHSUNDEEP
react-nativereact-native-navigationwix-react-native-navigationreact-native-navigation-v2
Sydney Loteria
Sydney Loteria

Reputation: 10451

WIX Navigation V2 - Hide bottom tab bar when push to a new screen

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') } } }, } ], }, }, ], },

image from ios The Tab bar is still existing :(

image from ios

What I want to achieve is this image from ios

Environment

Upvotes: 2

Views: 4721

Answers (3)

Asha
Asha

Reputation: 760

For android hide bottom tab in v2 

componentDidMount() {
    Navigation.mergeOptions(this.props.componentId, {
        bottomTabs: {
          visible: false,
          drawBehind:true
        }
      });
}

Upvotes: 1

Vivek_Neel
Vivek_Neel

Reputation: 1353

I was also facing the same issue. I found a way to hide the tabs programmatically when pushing new screen.

You can hide tab in your newly pushed screen using. Write the below toggle inside constructor.

this.props.navigator.toggleTabs({
      to: 'hidden',
      animated: false,
    });

Upvotes: 0

yogevbd
yogevbd

Reputation: 1628

You need to push that screen with bottomTabs.visible: false option:

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

Upvotes: 6

Related Questions