Disable swipe gesture from opening the navigation drawer using react-navigation

Question

I am using react-navigation (https://reactnavigation.org) and I am trying to disable the option that the side drawer opens when the user swipes right/left

I`ve looked through the documentation and i cant find the options that does the trick

const RootStack = createDrawerNavigator(
  {
    Login: {
      screen: Login,
    },
    Components: {
      screen: Components
    },
    Home: {
      screen: Home
    }
  },
  {
    initialRouteName: 'Login',
    gesturesEnabled: false,
    headerMode: 'none',
    contentComponent: SideBar,
    contentOptions: {
      labelStyle: {
        color: 'white'
      }
    }
  }
);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      'Montserrat-Light': require("./app/assets/fonts/Montserrat-Light.ttf"),
      'Montserrat-Medium': require("./app/assets/fonts/Montserrat-Medium.ttf")
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return (
        <Text>Loading</Text>
      );
    }
    return (
      <RootStack/>
    );
  }
}

Answer 1

You can use the drawerLockMode in the screen navigation options using the option locked-open

locked-open: the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically

Other options can be viewed here

static navigationOptions = {
     drawerLockMode: 'locked-open',
}

Answer 2

Set edge width to 0.

React Navigation 6

In screen options:

<Drawer.Navigator
  screenOptions={{
    swipeEdgeWidth: 0,
  }}
>
  {/* screens */}
</Drawer.Navigator>

React Navigation 5

In your createDrawerNavigator config:

const drawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home
  }
}, 
{
  edgeWidth: 0
})

Answer 3

React Navigation V5

This version changed how we set the properties of the Navigation Drawer so the other answers will no longer work. Instead of setting the properties in

createDrawerNavigator()

Set them in the JSX tag like so

<Drawer.Navigator edgeWidth={0} >

This will disable swipe to open while keeping swipe to close enabled.

Answer 4

I found a way to disable it, it won't open but still can be closed by swiping...

this is my code

  contentComponent: SideMenu,
  initialRouteName: 'Stack',
  drawerPosition: 'left',
  drawerWidth: '80%',
  edgeWidth: -100 // this is where the magic happens :))

Answer 5

In react-navigation v5, you can disable swiping gestures for a specific screen by passing swipeEnabled: false:

      <DrawerNavigator.Screen
        name='ScreenName'
        component={Screen}
        options={{
          swipeEnabled: false,
        }}
      />

Answer 6

React Navigation v5:

You can use swipeEnabled:false prop for your Drawer screen.

Example

<Drawer.Screen
   name="ExamplePage"
   component={ExampleComponent}
   options={{
       title: 'Example Page Title',
       swipeEnabled: false, // to disable swipe gesture for a specific page(s)
   }}
/>

Doc: https://reactnavigation.org/docs/drawer-navigator/#swipeenabled

From doc:

Whether you can use swipe gestures to open or close the drawer. Defaults to true.

Swipe gesture is not supported on Web.

Answer 7

Simply, add swipeEnabled: false to the screenOptions property of Navigator.

Example:

<DrawerOptionsNavigator.Navigator
    screenOptions={{swipeEnabled: false}} 
    // add swipeEnabled to false to disable the swipe gesture from all screens inside drawer
>
<DrawerOptionsNavigator.Screen
    name="Home"
    component={RootNavigator}
/>
</DrawerOptionsNavigator.Navigator>

Answer 8

inside createDrawerNavigator in v4 you need to add

  defaultNavigationOptions: {
       drawerLockMode: 'locked-closed',
  }

Answer 9

I was facing similar issue solved using the following way

Disable/Enable gesture mode using disableGestures: true

The drawer can be locked in 3 states:

1. unlocked (default)- Meaning that the drawer will respond (open/close) to touch gestures.

2. locked-closed- Meaning that the drawer will stay closed and not respond to gestures.

3. locked-open- Meaning that the drawer will stay opened and not respond to gestures.

   enum('unlocked', 'locked-closed', 'locked-open')

The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

mainflow: createDrawerNavigator({
    HomeScreen: HomeScreen,
    DrawerScreen2: DrawerScreen2,
    DrawerScreen3: DrawerScreen3,

    Notifications: {
        screen: Notifications,
        navigationOptions: {
            header: null,
            drawerLockMode: "locked-closed",
            disableGestures: true

        }
    }
})

Answer 10

Idk if you are still looking for the answer. I had the same question and the only way I got to avoid the opening on swipe was the following.

Inside the drawer navigator you will have you screen, what you need to do is pass the "option" prop and inside that "swipeEnabled: false" to the screen you want to keep the drawer hidden, like this:

    <Drawer.Navigator
      initialRouteName="name"
      drawerContent={(props) => <DrawerContent {...props} />}
    >
    <Drawer.Screen
        name="name"
        component={component}
        options={{ swipeEnabled: false }}
      />
    </Drawer.Navigator>

Answer 11

For the current React Navigation version 3.11.1, you can easily do so by adding drawerLockMode when create the drawer navigator. Change 'locked-open' to 'locked-closed' if you want to prevent gestures from opening the drawer but allow click on outside of drawer to close the drawer.

const Drawer = createDrawerNavigator({
    Home: MainStack,
    Driver: ManageRideTabStack,
    Passenger: ManageRequestTabStack,
    FeedbackPage: FeedbackStack,
}, {
    hideStatusBar: false,
    drawerBackgroundColor: 'rgba(255,255,255,.9)',
    overlayColor: '#9FF7B3',
    contentOptions: {
        activeTintColor: '#fff',
        activeBackgroundColor: '#4DD0E1',
        labelStyle: {
           fontSize: 16,
        },
    },
    drawerLockMode: 'locked-closed',
});