react-navigation : How to hide one specific tabBar icon and label - react-native

Question

I am using react-navigation. I have three icons for my bottomtab navigator and I only want to show two icons(screen1 & screen2) and hide the other(screen3).
How can I hide the icon and the label of screen3?
This is my code:
const ButtomTabNavigator = createBottomTabNavigator(
{
screen1: {
screen: screen1,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'screen1',
header: null,
tabBarIcon: ({ tintColor }) => (
<Image style={{ width: 18, height: 18, tintColor: tintColor }}
source={require('./Components/Assets/iconMyGrey.png')}
/>
),
})
},
screen2: {
screen: screen2,
navigationOptions: {
header: null,
tabBarLabel: 'screen2',
tabBarIcon: ({ tintColor }) => (
<Image style={{ width: 18, height: 18, tintColor: tintColor }}
source={require('./Components/Assets/iconListGrey.png')}
/>
),
}
},
screen3: {
screen: screen3,
navigationOptions: {
header: null,
tabBarLabel: 'screen3',
tabBarIcon: ({ tintColor }) => (
<Image style={{ width: 21, height: 17, tintColor: tintColor }}
source={require('./Components/Assets/iconReservationMint.png')}
/>
),
}
},
},
{
tabBarOptions: {
activeTintColor: '#16bb92',
},
shifting: true,
}
)
Any advice or comments would be really appreciated! Thanks in advance :)

Answer 1

Please try this
const HomeTab = createBottomTabNavigator(
{
Scree1: Screen1,
Screen2: Screen2,
Screen3: Screen3,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === "Screen1") {
iconName = Images.icons.efficiencyTab;
} else if (routeName === "Screen2") {
iconName = Images.icons.messagesTab;
} else if (routeName === "Screen3") {
return (<View/>)
}
return (
<Image
style={{ width: 30, height: 30, tintColor: tintColor }}
source={iconName}
/>
);
},
tabBarLabel: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let title;
if (routeName === "Screen1") {
title = "Screen1";
} else if (routeName === "Screen2") {
title = "Screen2";
} else if (routeName === "Screen3") {
title = "";
}
return (
<Text
style={{
// alignSelf: "center",
textAlign: "center",
fontSize: 12,
color: tintColor,
marginBottom: 3
}}
>
{title}
</Text>
);
}
}),
tabBarOptions: {
activeTintColor: Constants.APP_THEME_COLOR2,
inactiveTintColor: Constants.APP_GRAY_COLOR,
style: {
height: 50
},
labelStyle: {
marginBottom: 3
}
}
}
);

Answer 2

You can remove screen3 from createBottomTabNavigator and add this screen to RootNavigator. If you want to navigate to screen3 you can navigation.navigate("screen3").In detail https://snack.expo.io/HytREN3ur.