Can not open / close drawer with swipe gesture #7536

muraterd · 2019-09-17T14:42:35Z

I can open drawer with this.props.navigation.openDrawer() but can not open or close with swipe gesture. What am i doing wrong here?

App.js

import React from 'react';
import {Button} from 'react-native';

import {createDrawerNavigator} from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';

class MyHomeScreen extends React.Component {
  render() {
    return (
      <>
        <Button
          onPress={() => this.props.navigation.navigate('Notifications')}
          title="Go to notifications"
        />

        <Button
          onPress={() => this.props.navigation.openDrawer()}
          title="Drawer"
        />
      </>
    );
  }
}

class MyNotificationsScreen extends React.Component {
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: MyHomeScreen,
    },
    Notifications: {
      screen: MyNotificationsScreen,
    },
  },
  {
    drawerLockMode: 'unlocked',
  },
);

export default createAppContainer(MyDrawerNavigator);

dependencies

"dependencies": {
    "react": "16.8.1",
    "react-native": "0.61.0-rc.3",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-reanimated": "^1.2.0",
    "react-native-screens": "^2.0.0-alpha.3",
    "react-navigation": "^4.0.5",
    "react-navigation-drawer": "^2.2.1",
    "react-navigation-stack": "^1.7.3"
  },

And i did the MainActivity setup

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
...
...
...
@Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

The text was updated successfully, but these errors were encountered:

satya164 · 2019-09-17T14:56:20Z

Can you downgrade to React Navigation 0.60 and try? I think there's some issue with 0.61 and gesture handler.

MBach · 2019-09-24T10:14:53Z

@satya164 : same with react-Native: 0.60.5

cayasso · 2019-09-25T03:10:19Z

Same issue here, cant close drawer in Android! I am on 0.61

satya164 · 2019-09-25T09:30:56Z

It's fixed in facebook/react-native@9f0dede and will be released in a patch release of react-native 0.61

netgfx · 2019-09-27T19:37:24Z

still seeing the issue with react-native 0.61.1 and react-navigation 4.0.10

devashishsethia · 2019-10-07T12:07:35Z

Same issue here.
"react-navigation": "^4.0.10",
"react-native-gesture-handler": "^1.4.1",
"react-native": "0.61.2",

davidcort · 2019-10-10T00:03:01Z

Why this is closed? This error still seeing in "react-native": "0.61.2" and "react-native-gesture-handler": "^1.4.1".

Please, help us :(

devashishsethia · 2019-10-10T06:26:09Z

@davidcort I resolved the issue by following this : https://github.com/react-navigation/drawer/issues/105#issuecomment-534937151
You need to make changes to your MainActivity.java listed in the documentation for set up for RN version < 0.60. This has worked for me. Also, please test on a real device.

davidcort · 2019-10-10T16:23:44Z

@devashishsethia that patch exists in react-native 0.61.2. But the swipe on the drawer not works. :(

davidcort · 2019-10-10T16:29:15Z

I resolved !!!

in the index.js of your project:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Works in debug, not testing in release mode.

davidcort · 2019-10-10T16:55:39Z

Confirm. In realease mode, works like a charm. 👍

sjonchhe · 2019-10-24T06:31:51Z

Problem still exists on 0.61.2..

Zeeshan666 · 2019-11-11T19:57:46Z

try this one its worked in 0.61.4 or higher...
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

du-hernandez · 2019-11-11T20:53:31Z

I had the same problem and solved it by importing react-native-gesture-handler in the root of the project:

import 'react-native-gesture-handler';

ghost · 2019-11-20T12:18:32Z

In Android, you can fix it by updating the MainActivity.java file.

package com.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 {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "Example";
    }
     @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
     @Override
      protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
     }
   };
 }
}

jordaofs · 2019-12-06T15:24:45Z

In Android, you can fix it by updating the MainActivity.java file.

package com.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 {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "Example";
    }
     @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
     @Override
      protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
     }
   };
 }
}

This solve the problem on android, but sometimes it is also necessary to do react-native link to make it work!

zenandre · 2019-12-17T13:41:17Z

@davidcort TKS .. :)

phanvankhaicd · 2019-12-18T16:45:58Z

I resolved !!!

in the index.js of your project:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Works in debug, not testing in release mode.

Thanks

zeeshanaligold · 2019-12-26T12:50:36Z

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Working. Thanks

waqaramjad · 2019-12-30T14:10:36Z

I resolved !!!

in the index.js of your project:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Works in debug, not testing in release mode.

my application after applying that , when i touch any thing app crash

davidcort · 2019-12-30T17:47:49Z

I resolved !!!
in the index.js of your project:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
Works in debug, not testing in release mode.
my application after applying that , when i touch any thing app crash

What version of RN and React Navigation are you using?

shubhamkakkar · 2020-01-05T16:52:11Z

I resolved !!!
in the index.js of your project:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
Works in debug, not testing in release mode.
my application after applying that , when i touch any thing app crash
What version of RN and React Navigation are you using?
"react-native": "0.61.5", "react-native-gesture-handler": "^1.5.2", "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.3",

davidcort · 2020-01-06T18:27:59Z

I resolved !!!
in the index.js of your project:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
Works in debug, not testing in release mode.
my application after applying that , when i touch any thing app crash
What version of RN and React Navigation are you using?
"react-native": "0.61.5", "react-native-gesture-handler": "^1.5.2", "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.3",

Is very extrange, in Android works very well for me, in iOS you should change the next:
import { gestureHandlerRootHOC } from 'react-native-gesture-handler' in the first line in the index.js file.

s3f4 · 2020-01-15T15:26:57Z

I resolved !!!
in the index.js of your project:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
Works in debug, not testing in release mode.
my application after applying that , when i touch any thing app crash

same.

Solution:
"react-native-reanimated": "1.4.0"
I was using 1.5.0, Downgrading worked on me. And to add gestureHandlerRootHOC is not necessary.

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Maskedman99 · 2020-06-04T17:45:14Z

react native: 0.62.2
react-native-gesture-handler: 1.6.1
This Issue is still present. #7536 (comment) workaround works.
This should be mentioned in the docs of RNGesturehandler's Drawer Layout https://docs.swmansion.com/react-native-gesture-handler/docs/component-drawer-layout.html

sleez007 · 2021-02-10T10:27:29Z

I am also having this issue on rn 0.63.3. Gesture doesn't work on Android

sandipbiswasbehala · 2021-02-10T14:58:45Z

I am also having this issue on react-native: 0.63.4. Gesture doesn't work on Android.

sandipbiswasbehala · 2021-02-10T15:55:12Z

@sleez007

Solution Found and Working in Android (by following https://docs.swmansion.com/react-native-gesture-handler/docs/#android)

Update your MainActivity.java file

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);

```
 }
```
};
}
}
---> need to add

For React Native 0.61 or greater, add the library as the first import in your index.js file:

import 'react-native-gesture-handler';

Before running apps--- clean using gradlew clean command .

then npx react-native run-android.

Just tested.

parnekov · 2021-06-27T15:07:00Z

I had the same problem and solved it by importing react-native-gesture-handler in the root of the project:

import 'react-native-gesture-handler';

Works fine on iOS and Android. Thank you.

github-actions · 2021-06-27T15:07:12Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

MihirSvr · 2021-08-25T06:30:29Z

I resolved !!!

in the index.js of your project:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Works in debug, not testing in release mode.

not worked for me 🙃.

satya164 closed this as completed Sep 25, 2019

satya164 transferred this issue from react-navigation/drawer Feb 25, 2020

satya164 added package:drawer version-4 labels Feb 25, 2020

hcphoon01 mentioned this issue Feb 10, 2021

Swipe gesture not opening Drawer Navigator #9302

Closed

rushilchugh01 mentioned this issue Feb 12, 2021

Drawer does not open with the swipe left gesture wix/react-native-navigation#6961

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can not open / close drawer with swipe gesture #7536

Can not open / close drawer with swipe gesture #7536

muraterd commented Sep 17, 2019

satya164 commented Sep 17, 2019

MBach commented Sep 24, 2019

cayasso commented Sep 25, 2019

satya164 commented Sep 25, 2019

netgfx commented Sep 27, 2019

devashishsethia commented Oct 7, 2019

davidcort commented Oct 10, 2019

devashishsethia commented Oct 10, 2019

davidcort commented Oct 10, 2019

davidcort commented Oct 10, 2019 •

edited

davidcort commented Oct 10, 2019

sjonchhe commented Oct 24, 2019

Zeeshan666 commented Nov 11, 2019 •

edited

du-hernandez commented Nov 11, 2019

ghost commented Nov 20, 2019

jordaofs commented Dec 6, 2019

zenandre commented Dec 17, 2019

phanvankhaicd commented Dec 18, 2019

zeeshanaligold commented Dec 26, 2019 •

edited

waqaramjad commented Dec 30, 2019

davidcort commented Dec 30, 2019

shubhamkakkar commented Jan 5, 2020

davidcort commented Jan 6, 2020

s3f4 commented Jan 15, 2020 •

edited

Maskedman99 commented Jun 4, 2020

sleez007 commented Feb 10, 2021

sandipbiswasbehala commented Feb 10, 2021

sandipbiswasbehala commented Feb 10, 2021 •

edited

parnekov commented Jun 27, 2021 •

edited

github-actions bot commented Jun 27, 2021

MihirSvr commented Aug 25, 2021

Can not open / close drawer with swipe gesture #7536

Can not open / close drawer with swipe gesture #7536

Comments

muraterd commented Sep 17, 2019

satya164 commented Sep 17, 2019

MBach commented Sep 24, 2019

cayasso commented Sep 25, 2019

satya164 commented Sep 25, 2019

netgfx commented Sep 27, 2019

devashishsethia commented Oct 7, 2019

davidcort commented Oct 10, 2019

devashishsethia commented Oct 10, 2019

davidcort commented Oct 10, 2019

davidcort commented Oct 10, 2019 • edited

davidcort commented Oct 10, 2019

sjonchhe commented Oct 24, 2019

Zeeshan666 commented Nov 11, 2019 • edited

du-hernandez commented Nov 11, 2019

ghost commented Nov 20, 2019

jordaofs commented Dec 6, 2019

zenandre commented Dec 17, 2019

phanvankhaicd commented Dec 18, 2019

zeeshanaligold commented Dec 26, 2019 • edited

waqaramjad commented Dec 30, 2019

davidcort commented Dec 30, 2019

shubhamkakkar commented Jan 5, 2020

davidcort commented Jan 6, 2020

s3f4 commented Jan 15, 2020 • edited

Maskedman99 commented Jun 4, 2020

sleez007 commented Feb 10, 2021

sandipbiswasbehala commented Feb 10, 2021

sandipbiswasbehala commented Feb 10, 2021 • edited

parnekov commented Jun 27, 2021 • edited

github-actions bot commented Jun 27, 2021

MihirSvr commented Aug 25, 2021

davidcort commented Oct 10, 2019 •

edited

Zeeshan666 commented Nov 11, 2019 •

edited

zeeshanaligold commented Dec 26, 2019 •

edited

s3f4 commented Jan 15, 2020 •

edited

sandipbiswasbehala commented Feb 10, 2021 •

edited

parnekov commented Jun 27, 2021 •

edited