React Native disable swiping StackNavigator in TabNavigator

Each screen in the tab can have a navigation option swipeEnabled set individually.

Take a look at the Tab Navigator Screen Navigation Options docs.

MyScreen.navigationOptions = ({navigation}) => ({
  swipeEnabled: false
});

You can set that value to be the result of a function that checks whether the stack navigator has been navigated into or not.

Update - react-navigation 3

This property was removed, and replaced with gesturesEnabled.
You can set the value for each screen individually, or set a default at the navigator configuration level.

const navigator = createStackNavigator(
  {
    Main: { screen: Main },
    ...
  },
  {
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
    ...
  }
);

In React Navigation v5 is gestureEnabled and not gesturesEnabled.

https://reactnavigation.org/docs/stack-navigator/#gestureenabled


Although it's a bit old thread, I wanted to maybe save some folks from rushing through old and useless GitHub posts where old React Navigation versions are discussed.

For React Navigation 5, just create StackNavigator and pass options prop with { gestureEnabled: false } value to screen which should not react to gestures:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
    >
      <Stack.Screen
        name="Settings"
        component={Settings}
        // disable gestures for one specific screen
        options={{
          gestureEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
}

Read more here: https://reactnavigation.org/docs/stack-navigator/#example