How to disable scroll for specific Tab.Screen

64 views Asked by At

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:

enter image description here

0

There are 0 answers