Hide TabBar item in TabNavigator

Question

How is it possible to hide certain TabBar item from TabNavigator. Is there a certain TabBarOptions option, which has visible key(true/false) like this?

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

Answer 1

There is not 'visible' option for hide specific item from TabNavigator.

You need to create a Stacknavigator and a Tabnavigator. In the Stacknavigator you will add yours 'invisible' tabbar items and at the end the Tabnavigator whose 'visible' Tabbar items.

Author: @ragnorc from GitHub

const TabsScreen = TabNavigator({
  Profile: { // visible TabBar item
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: { // visible TabBar item
    screen: More
  },
})

const MainScreenNavigator = StackNavigator({
    Home: { // invisible TabBar item
        screen: Home,
        navigationOptions : {
            header: null /* hide header*/
        }
    },
    Screen 2: { }, // invisible TabBar item
    Screen 3: { }, // invisible TabBar item
    Screen 4: { }, // invisible TabBar item
    TabsScreen: { 
        screen: TabsScreen,
        navigationOptions : {
            header: null /* hide header*/
        }
    },
});