I am using React Native with TypeScript. I am trying to create a top tab bar and working with permissions. When a person does not have permission to access a tab, it becomes disabled. I have already managed to change its style and prevent it from being clicked (using e.preventDefault()), but I would like to prevent other tabs from scrolling to it.
I tried using swipeEnabled: false, but it allows me to scroll from another tab to the disabled tab and prevents scrolling from the disabled tab to another tab. I specifically want to do the opposite: prevent the user from scrolling from an active tab to the disabled tab.
Here is my code (disabled tab):
<Tab.Screen
listeners={{
tabPress: e => {
e.preventDefault();
},
}}
options={{
tabBarActiveTintColor: Colors.buttonDisabled,
tabBarInactiveTintColor: Colors.buttonDisabled,
tabBarLabel: () => (
<Subtitle variant='subtitle3' style={{ color: Colors.buttonDisabled }}>
{e.props.name}
</Subtitle>
)
}}
{...e.props}
component={Forbidden}
></Tab.Screen>
my TopTab component:
