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
  },
})

Lebel

Answer 1

My solution was to return a custom tabbarbutton which is: a View with height and width set to 0, works fine

<Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
    options={{
        tabBarButton: () => (
            <View style={{width:0, height:0}}></View>
        ),
        tabBarVisible:false //hide tab bar on this screen

    }}
/>

update: As pointed out by @Aman Deep you can just return null

<Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
    options={{
        tabBarButton: () => null,
        tabBarVisible:false //hide tab bar on this screen

    }}
/>

Atavistic

Glad to help xD @AmanDeep – Atavistic

Answer 2

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*/
        }
    },
});

Klingensmith

Answer 3

The problem with tabBarOptions is that only hide the current navigation (tabs) for the selected screen. But does not hide/show the tabs.

tabBarOptions: {
      visible: false
    }

Custom solution

I made some special class to achieve this using createMaterialTopTabNavigator

export default class CustomTabsNavigator extends Component {
  // Final navigation setup with screens
  TabsNavigation;

  constructor(props) {
    super(props);
    // Only this is necessary if you just want to hide/show without change it.
    this._setScreens();
  }
  // This is necessary if you want to hide/show depending on some user behavior
  componentDidUpdate(prevProps) {
    // Add your condition to avoid infinite renders
    if (prevProps.foo === this.props.foo) return;
    this._setScreens();
  }
  // Actual code to show/hide based on props.
  _setScreens = () => {
    const { isAdmin } = this.props;
    const screens = {};
    const settings = {
      tabBarOptions: {
        style: {...}
      }
    };
    // Set tabs depending on user and state
    if (isAdmin) {
      screens.Dashboard = {
        screen: DashboardScreen,
        navigationOptions: { ... }
      };
    }
    screens.Home = { screen: HomeScreen };
    this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
    // Since we are not using setState
    this.forceUpdate();
  };

  render() {
    // AppContainer is required in react-native version 3.x
    const { props } = this;
    const NavigatorTabs = createAppContainer(this.TabsNavigation);
    return <NavigatorTabs screenProps={{ ...props }} />;
  }
}

Implementation of tabs:

<CustomTabsNavigator isAdmin={true} />

Topping

i was looking to hide a one route from the tabBar. this is how i did it : tabBarButton:(props)=> null in options options: { tabBarButton:(props)=> null ,//will hide the clickable option tabBarVisible:false // will hide the Tab from this route }, – Graphology

Answer 4

There's been a new way to not render the tab bar. (not sure since which version) but if there's anyone using TabView in React Native it's this:

<TabView
  renderTabBar={() => null}
/>

Crosslink

Answer 5

There is no such 'visible' option for a single tab, though there has been talk of its implementation.

It is possible to render only certain tabs. You can dynamically render your TabNavigator by passing it the specific tabs that you want present at a certain time. Instead of hardcoding the argument to TabNavigator(), you make the argument an object that represents the tabs you want rendered, and then you can make changes to this object over time.

See here for the clever implementation of this.

Rms