CODEWITHSUNDEEP
react-nativereact-navigation
Alireza
Alireza

Reputation: 171

How can I hide tab bar navigation?

How can I hide tabbar navigation? After navigate I can See tabbar and not working but in working. navigationOptions:{tabBarVisible: false} On line 5 not working but on line 22 for main tabs working fine.

const MenStack = createStackNavigator({
menStackNav: { screen: MenTabScreen},
Products: {
  screen: ProductsShow,
  navigationOptions:{tabBarVisible: false},
},
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});
const HomeScreenTabs = createMaterialTopTabNavigator({
 home:{
   screen:HomeTabScreen,
 },
 women: WomenTabScreen,
 men: {
   screen:MenStack,
   navigationOptions:{tabBarVisible: false},
 },
 },{
tabBarOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#eee',
tabStyle:{backgroundColor:'#0077FF',height:40},
labelStyle: {
    fontSize: 14,
    fontFamily:'iransans_medium',
  },
},
  initialRouteName: 'men',
  mode: 'modal',
  headerMode: 'none',
});

I have 3 tabs and a stack navigation for navigate to another screen to show products. I need to hide tabbar when products are visible.

Upvotes: 1

Views: 271

Answers (1)

displayname
displayname

Reputation: 1074

You need to use tabBarVisible to hide the tabBar inside your stackPage

const MenStack = createStackNavigator({
       Home:{screen: MenTabScreen,},
       Products:{screen: ProductsShow,}
    }, {initialRouteName: 'Home', headerMode: 'none')}

    MenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
    }

  const HomeScreenTabs = createBottomTabNavigator({
       Home:{screen: HomeTabScreen,},
       Women :{screen: WomenTabScreen,},
       Men : {screen : MenStack,}
    })

    export default HomeScreenTabs;

Upvotes: 1

Related Questions