React Navigation: Swipe on drawer does not work in Android

Question

I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it.

I have created a simple Drawer Navigator with React Navigation V3. I have added a Menu icon, and when I click it, the drawer appears as it should be. But, no hand gesture is working. Swiping from left to right don't do anything. Even when the drawer is open, tapping on empty space doesn't close the drawer.

Here is my code:

import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator
} from 'react-navigation';
import Home from './screens/Home';
import LoginForm from './screens/LoginForm';
import Articles from './screens/Articles';

const AuthStack = createStackNavigator({
    LoginScreen: LoginForm
});

const AppStack = createDrawerNavigator({
    HomeScreen: Home,
    ArticlesScreen: Articles
});

const RootNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack
    },
    {
        initialRouteName: 'Auth'
    }
);

export default createAppContainer(RootNavigator);

Sadman Muhib Samyo · Accepted Answer · 2018-12-19T10:38:21.600

169

I have found the solution. React Navigation depends on the react-native-gesture-handler library. In the Installation section of React Navigation docs, it only says to create link by using the command react-native link. This is enough for iOS. But for Android, you have to edit the MainActivity.java file, so that the gesture handler library can work as expected:

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

Refer to the documentation: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Actually, it's nowhere stated in React Navigation documentation to modify any files, as it is specific to react-native-gesture-handler and not React Navigation. I am keeping the answer here so it may help others.

UPDATE: The latest docs of React Navigation addresses this issue

edited Dec 19 '18 at 10:38

answered Nov 20 '18 at 15:15

Sadman Muhib Samyo

2,438
2
10
16

2

Works for me. I'm using wireless debugging, so I need to rebuild and reinstall the apk to make it work – vozaldi Dec 19 '18 at 10:08
2

After adding above code Make sure to update bundle if not working for android and then run react-native run-android or run cd android -> gradlew clean -> then run react-native run-android. THIS WILL MAKE IT WORK. – HarshitMadhav Jan 12 '19 at 07:58
I have placed these lines. Unfortunately, it has stopped other touch event. Now, I am unable to click any component of the screen. Could you please help? – K.Raj. Jan 28 '19 at 05:45
I have two apps; the older one worked, the newest not. https://github.com/kmagiera/react-native-gesture-handler/issues/653 – Pablo Jun 21 '19 at 17:21
1

i had same issue in react-native 0.60.4 react-navigation 3.11.1, now fix my problem. it's working. Thank you. – Raikumar Khangembam Jul 30 '19 at 19:06
your solution is good but for me, when i use "DrawerLayoutAndroid" in my project gesture worked but i user react navigation drawer it doesn't work !! i confused !! – Mojtaba Darzi Aug 29 '19 at 10:54
It's working but in the production build, the app is crashed if I click on the menu button or swipe to open the menu. Any idea how to fix that? – Ajoy Karmakar Oct 31 '19 at 06:09
You are the real MVP – AlwaysConfused Sep 12 '21 at 21:27
@ajoy Try to update your React Navigation library to the latest version. Please note, React Navigation has changed a lot since this post, so you may need to wander on your own. – Sadman Muhib Samyo Oct 18 '21 at 06:40

score 17 · Answer 2 · edited Jun 20 '20 at 09:12

17

In the index.js of your project just use gestureHandlerRootHOC:

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

resource: https://github.com/react-navigation/drawer/issues/105#issuecomment-540667009

Update:

In React Navigation > 5.x

Just put react-native-gesture-handler at the beginning of root index.js

import 'react-native-gesture-handler';

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 18 '19 at 13:12

Mahdi Bashirpour

17,147
12
117
144

1

Thank you, I had to struggle gesture handler to make it work. This solved my issue – Ibrahim Azhar Armar Mar 08 '20 at 13:24
where is index.js? – Aljohn Yamaro Sep 15 '20 at 06:16
Hello I am trying your suggestion but it wont solve ths drawer not closing issue for me. Could you please help me here ?https://stackoverflow.com/questions/68259260/react-native-navigation-drawer-drawer-not-closing-when-pressing-an-overlay – newdeveloper Jul 05 '21 at 16:40

score 4 · Answer 3 · edited Dec 18 '19 at 13:14

4

Seems to be fixed in versions above 0.61.0, but for older versions this worked for me.

In the index.js :

. . .
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
. . .

edited Dec 18 '19 at 13:14

Mahdi Bashirpour

17,147
12
117
144

answered Dec 17 '19 at 17:55

FarhadMohseni

395
5
8

score 0 · Answer 4 · answered Mar 30 '23 at 18:13

I disabled 'useLegacyImplementation' and work's.

    <Drawer.Navigator
        // useLegacyImplementation <- disable
        drawerContent={props => <DrawerContent {...props}
        />}
    >
        <Drawer.Screen name="HomeDrawer" component={Home}
        />
    </Drawer.Navigator>

score -1 · Answer 5 · answered Dec 13 '19 at 12:23

-1

React native docs updated this issue and you can find a section named Installing dependencies into a bare React Native project in the below link

https://reactnavigation.org/docs/en/getting-started.html#installation

answered Dec 13 '19 at 12:23

Gvs Akhil

2,165
2
16
33

1

The update was mentioned by me a long time ago. Read the answers before posting your own. – Sadman Muhib Samyo Dec 14 '19 at 14:16
U haven’t added a link for correct documentation and u can check ur comment first @sadman – Gvs Akhil Dec 16 '19 at 03:27
adding the documentation link doesn't make any sense, as I have already instructed the SAME thing in my answer. But I did address the update news, and that's enough. – Sadman Muhib Samyo Dec 17 '19 at 15:17

React Navigation: Swipe on drawer does not work in Android

5 Answers5

Update:

In React Navigation > 5.x

Linked