Hide TabBar item in TabNavigator
Solution 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
}}
/>
Solution 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.
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*/
}
},
});
Solution 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} />
Comments
-
Nikasv almost 2 years
How is it possible to hide certain TabBar item from TabNavigator. Is there a certain
TabBarOptions
option, which hasvisible
key(true/false) like this?const Tabs = TabNavigator({ Home: { screen: Home }, Profile: { screen: Thanks, tabBarOptions: { visible: false }, }, More: { screen: More }, })