CODEWITHSUNDEEP
react-nativeexporeact-native-router-flux
Jasurbek
Jasurbek

Reputation: 68

How to hide tab bar for a specific scene in React Native (react-native-router-flux)?

I am trying to hide a whole tab bar for the specific page on my app. I have tried to hide it on the routing and inside the container too. But, it did not work. I could hide header navbar in both scenarios but it is not working for tabBar. Below are my attempt codes:

     <Scene
        key="showBarcodeScanner"
        hideNavBar
        hideTabBar
        {...DefaultProps.navbarProps}
        iosStatusbar="light-content"
        component={BarcodeScan}
      />

Below method did not work either

  static navigationOptions = ({ navigation }) => ({
    header: null,
    tabBarVisible: false
  });

I have checked the source and there is a logic to hide the tab (did not go deep though).

if (navigationParams.hideTabBar != null) {
  if (navigationParams.hideTabBar) {
    res.tabBarVisible = false;
  }
} else if (hideTabBar) {
  res.tabBarVisible = false;
}

Am I missing something? Is there any other method to hide the tabbar for a specific page?

Upvotes: 0

Views: 2431

Answers (3)

joram bramuel
joram bramuel

Reputation: 11

For those using reactnavite expo, this might be usefull

 <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          href: null,
        }}
      />
    </Tabs>

Upvotes: 0

Jasurbek
Jasurbek

Reputation: 68

I found the solution after some research.

The Scene I wanted to hide was inside the Stack which was under the Tabs in my routes. And without shuffling navigators below code does not work based on official source: React Navigation

tabBarVisible: false

I just created a new Stack above my Tabs and the problem is solved.

Upvotes: 0

P4uB0rd4
P4uB0rd4

Reputation: 175

See Readme of React Native Router.

Actions.refresh({key: 'showBarcodeScanner', hideNavBar: true, hideTabBar: true});

Hope it help, u can put any PARAMS you want to refresh.

Upvotes: 0

Related Questions