Skip to content
Advertisement

React navigation tabBarVisible: false not working for StackNavigator inside TabNavigator

I am totally confused to achieve something like below, this is working fine but can’t hide tab bar for EditPage and PageTwo

  • Login
  • SignUp
  • TabNavigator(TabNavigator)
    • FirstTab
    • SecondTab(StackNavigator)
      • ListPage
      • EditPage
    • ThirdTab(StackNavigator)
      • PageOne
      • PageTwo
    • Settings

Below is my configuration for it.

import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
//Other required imports here

const SignedOut = createStackNavigator({
  Signup: { screen : Signup},
  Login: { screen : Login}
});

const SignedIn = createBottomTabNavigator({
    Dashboard: {
      screen: Dashboard
    },
    Rewards: {
      screen: createStackNavigator({
        Rewards:{
          screen: Rewards,
          navigationOptions:{
            header:null
          }
        },
        AddReward:{
          screen: AddReward,
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }
      })
    },
    Activities: {
      screen: createStackNavigator({
        Rewards:{
          screen: Activities,
          navigationOptions:{
            header:null
          }
        },
        NewActivity:{
          screen: NewActivity,
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }
      })
    },
    Settings: {
      screen: Settings
    }
},{
  tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false
});

export const createRootNavigator = (signedIn) => {
    return createSwitchNavigator(
        {
            SignedIn: {
                screen: SignedIn
            },
            SignedOut: {
                screen: SignedOut
            }
        },
        {
            initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
            headerMode: 'none'
        }
    );
};

Problems

  • I can’t hide tab bar for AddReward and NewActivity
  • tabBarVisible: false not working for StackNavigator inside TabNavigator

Thanks

Answer

You could use one StackNavigator with all your stacks, and set the TabNavigator as default route :

  • SwitchNavigator
    • Login
    • SignUp
    • StackNavigator
      • TabNavigator
        • FirstTab
        • ListPage
        • Settings
      • EditPage
      • PageTwo
Advertisement