react-native material top tab navigator swipe disable depending on screens

Question

Wanna make only Map component swipe-disabled but the entire screens were applied when using "swipeEnabled".

How can I do?

const Tab = createMater         


        

Answer 1

You could pass a state value to swipeEnabled and update the value to false if you're on the Map screen like this:

const Tab = createMaterialTopTabNavigator();

const Tabs = () => {
  const [swipeEnabled, setSwipeEnabled] = useState(true);
  return (
    <NavigationContainer>
      <Tab.Navigator
        swipeEnabled={swipeEnabled}
        screenOptions={({ navigation, route }) => {
          if (route.name === 'Map' && navigation.isFocused()) {
            setSwipeEnabled(false);
          } else if (route.name !== 'Map' && navigation.isFocused()) {
            setSwipeEnabled(true);
          }
        }}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Map" component={Map} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};