How do I hide a certain tab from the tabnavigator? - react-native

Question

I'm trying to hide the "Summary" tab from the tab bar below, but can't quite figure out how I can do this.
const Tab = createBottomTabNavigator({
Overview: {
screen: Overview
},
Camera: {
screen: Camera
},
Summary: {
screen: Summary
}
}, {
tabBarPosition: 'top',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#f2f2f2',
activeBackgroundColor: '#2EC4B6',
inactiveTintColor: '#666',
labelStyle: {
fontSize: 22,
padding: 12
}
}
});
export default createAppContainer(Tab);
How can I do this?

Answer 1

I've solved this by using a custom BottomBar and hiding the tab when the screen appeared:
tabBarComponent: (props) => (<BottomBar {...props} ></BottomBar>) //Navigator Configs
The bottombar i have is like this:
import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs'
import { View, TouchableWithoutFeedback, Dimensions } from 'react-native'
import { StyleSheet } from 'react-native';
var { height } = Dimensions.get("window")
const HiddenView = () => <View style={{ display: 'none' }} />
const TouchableWithoutFeedbackWrapper = ({
onPress,
onLongPress,
testID,
accessibilityLabel,
...props
}) => {
return (
<TouchableWithoutFeedback
onPress={onPress}
onLongPress={onLongPress}
testID={testID}
hitSlop={{
left: 15,
right: 15,
top: 5,
bottom: 5,
}}
accessibilityLabel={accessibilityLabel}
>
<View {...props} />
</TouchableWithoutFeedback>
)
}
export default TabBarComponent = props => {
return <BottomTabBar
{...props}
style={styles.bottomBarStyle}
getButtonComponent={({ route }) => {
if (route.key === "Summary" )
return HiddenView
else return TouchableWithoutFeedbackWrapper
}}
/>
}
const styles = StyleSheet.create({
bottomBarStyle: {
height: (height * 10.625) / 100
}
})
Let me know if this creates new issues