in my react native bottom tabs I want to disable some tabs based on a few conditions, say I want to disable Profile tab WITHOUT removing actual tab screen or icon, so is there a way to intercept user pressed tab icon, check if pressed tab is Profile and if it is DO NOTHING instead of navigate to Profile screen?
Thanks in advance.
My tab component:
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false ,
swipeEnabled: true,
tabBarHideOnKeyboard: true,
tabBarActiveTintColor: "#E13545",
tabBarInactiveTintColor: "rgb(125,125,125)",
tabBarShowLabel: false,
tabBarLabelStyle: {
fontSize: 10,
margin: 0,
padding: 0,
textTransform: "none",
fontFamily: "AirbnbCerealBook"
},
tabBarItemStyle: {
paddingVertical: 0
},
tabBarStyle: [
{
width:root.uiStore.width+4,height:60,backgroundColor:'white',borderTopWidth:0,position:'absolute',left:0,bottom:0,right:0,borderTopWidth:1,borderTopColor:'rgba(0,0,0,0.1)',borderRightWidth:1,borderRightColor:'rgba(0,0,0,0.1)',borderLeftWidth:1,borderLeftColor:'rgba(0,0,0,0.1)',elevation:10,overflow:'hidden',borderTopLeftRadius:35,borderTopRightRadius:35,
},
null
],
})}
>
<Tab.Screen name="Home" component={STACK1} />
<Tab.Screen name="Favorites" component={STACK2} />
<Tab.Screen name="Discounts" component={STACK3} />
<Tab.Screen name="Profile" component={STACK4}/>
</Tab.Navigator>