CODEWITHSUNDEEP
react-nativereact-navigation
Felipe Fontes
Felipe Fontes

Reputation: 73

tabbarvisble is not working on a stacknavigator inside a bottomnavigator

How to hide tabbar on BarcodeScanner page?

I am currently setting false in inside the property in navigationOptions, but it is not working.

this is my current code

const Routes = createAppContainer(
  createBottomTabNavigator({
    GroupColect: {
      screen: createStackNavigator({
        PageColect: {
          screen: Colect,
          navigationOptions: {
            header: null,
          },
        },
        PageBarcodeScanner: {
          screen: BarcodeScanner,
          navigationOptions: {
            tabBarVisible: false,
          },
        },
      }),
      navigationOptions: {
        tabBarLabel: 'Coleta',
        tabBarIcon: ({ tintColor }) => <Icon name="format-list-bulleted" size={20} color={tintColor} />,
      },
    },
    Visualization,
  }, {
    tabBarOptions: {
      keyboardHidesTabBar: true,
      activeTintColor: '#FFF',
      inactiveTintColor: 'rgba(255, 255, 255, 0.67)',
      style: {
        backgroundColor: '#8ac523',
      },
    },
  }),
);

Upvotes: 2

Views: 154

Answers (2)

remeus
remeus

Reputation: 2424

When you write tabBarVisible: false in PageBarcodeScanner, it applies to the wrapping navigator. In your example, the wrapping navigator is a stack, not a tab bar, so it has no effect.

Obviously you could apply the property to one of the stack of the tab bar (for instance GroupColect), but that would hide the bar for all the screens in the stack, which is not what you want.

What you want is hide the tab bar on the second screen on the stack. Actually the official docs covers this exact use case.

Let's refactor your code a little bit:

const GroupColectStack = createStackNavigator({
  PageColect: {
    screen: Colect,
    navigationOptions: {
      header: null,
    },
  },
  PageBarcodeScanner: {
    screen: BarcodeScanner,
    navigationOptions: {
      tabBarVisible: false,
    },
  },
});

const BottomTabs = createBottomTabNavigator({
  GroupColect: {
    screen: GroupColectStack,
    navigationOptions: {
      tabBarLabel: 'Coleta',
      tabBarIcon: ({ tintColor }) => <Icon name="format-list-bulleted" size={20} color={tintColor} />,
    },
  },
  Visualization,
}, {
  tabBarOptions: {
    keyboardHidesTabBar: true,
    activeTintColor: '#FFF',
    inactiveTintColor: 'rgba(255, 255, 255, 0.67)',
    style: {
      backgroundColor: '#8ac523',
    },
  },
});

const Routes = createAppContainer(BottomTabs);

I haven't changed anything, just separated the different navigators.

Now all you have to do is add this part:

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

  return {
    tabBarVisible,
  };
};

This will keep the tab bar on the first screen but hide it on the other one.

Upvotes: 1

hong developer
hong developer

Reputation: 13906

You can use one StackNavigator for all stacks and set TabNavigator as the default path. Please reset the path.

  • StackNavigator
    • TabNavigator
      • PageColect
      • PageBarcodeScanner

You can hide the header in many ways.

You can use navigationOptions header React Element or a function that given HeaderProps returns a React Element, to display as a header. Setting to null hides header.

        PageBarcodeScanner: {
          screen: BarcodeScanner,
          navigationOptions: () => ({
             header: null,
             tabBarVisible: false,

          }),

static navigationOptions

class BarcodeScanner extends React.Component {
  static navigationOptions = {
    header: null,
    tabBarVisible: false,
  };

or Stacknavigation Options

headerMode - Specifies how the header should be rendered:

  • none - No header will be rendered.
const RootStack = createStackNavigator(
  {
    Your Stack Navigation
  },
  {
    initialRouteName: 'Home',
    headermode: 'none'
  }
);

Upvotes: 0

Related Questions