How to disable swipe to open but not for closing in react-native?

Question

I want to disable swipe to open the drawer navigation but not for closing?

I found solutions for android but not for react-native. Currently I'm using this:

drawerLockMode: 'locked-open'

which works,but I can't close it with swipe.

I'm opening the drawer with hamburger menu icon like this:

onPress={() => props.navigation.toggleDrawer()}

Is here someone who already did this? Is there a way to set drawerLockMode globally? Does onDrawerOpened and onDrawerClosed props exist? Thanks!

score 1 · Answer 1 · answered Aug 12 '19 at 12:03

1

If you are using react-navigation, you can get the event that is fired when anything get changed related to the navigation. Even if it is a drawer-open or drawer-close event. (I can't put up a working example right now.)

for more information follow these links. Status of React Navigation drawer? (open or closed) https://reactnavigation.org/docs/en/drawer-based-navigation.html

Try to get the event object information to detect and override the behavior.

answered Aug 12 '19 at 12:03

buddhiv

692
1
7
24

this helped a bit,but I still don't know how to change the `drawerLockMode` dynamically. – Bojke Aug 12 '19 at 14:01
Don't use that. Can't you use the isDrawerOpen boolean to check if it is already open and identify the current state of the drawer? I am sorry I cannot provide an example. – buddhiv Aug 12 '19 at 14:14
U mean inside `createDrawerNavigation`? – Bojke Aug 12 '19 at 14:52
Yeah try and see – buddhiv Aug 12 '19 at 15:07
It won't work like that because its called only once. – Bojke Aug 12 '19 at 16:09

hong developer · Answer 2 · 2019-08-12T14:14:08.897

You need a react-native-gesture-handler module to swipe.

You can run

 yarn add react-native-gesture-handler

OR

npm install --save react-native-gesture-handler

AND react-native link react-native-gesture-handler

Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

For more information, see

This is not what I need. I'm opening the drawer with swipe,but I want to close it with swipe — Bojke, Aug 12 '19 at 14:03
I'm pretty sure there is something built in for this problem — Bojke, Aug 12 '19 at 14:54

score 0 · Accepted Answer · answered Aug 12 '19 at 17:04

This is the solution that worked for me, and I think its simple and easy:

import { DrawerNavigator } from "../router/router";
import React, { Component } from "react";

export default class Drawer extends Component {
  state = {
    lockMode: "locked-closed"
  };
  render() {
    return (
      <DrawerNavigator
        screenProps={{
          drawerLockMode: this.state.lockMode
        }}
        onNavigationStateChange={(prevState, newState, action) => {
          if (
            action.type === "Navigation/MARK_DRAWER_SETTLING" &&
            !action.willShow
          )
            this.setState({ lockMode: "locked-closed" });
          if (
            action.type === "Navigation/MARK_DRAWER_SETTLING" &&
            action.willShow
          ) {
            this.setState({ lockMode: "unlocked" });
          }
        }}
      />
    );
  }
}

How to disable swipe to open but not for closing in react-native?

3 Answers3