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

Bedford

Answer 1

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

Bedford

Works for me. I'm using wireless debugging, so I need to rebuild and reinstall the apk to make it work – Unicycle

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. – Parma

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? – Ferraro

I have two apps; the older one worked, the newest not. github.com/kmagiera/react-native-gesture-handler/issues/653 – Exhume

i had same issue in react-native 0.60.4 react-navigation 3.11.1, now fix my problem. it's working. Thank you. – Realgar

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 !! – Cruce

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? – Charleencharlemagne

You are the real MVP – Superheat

@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. – Bedford

Answer 2

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

Alleras

Thank you, I had to struggle gesture handler to make it work. This solved my issue – Triggerhappy

where is index.js? – Kissiah

Hello I am trying your suggestion but it wont solve ths drawer not closing issue for me. Could you please help me here ?#68259760 – Pallua

Answer 3

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

Inglenook

Answer 4

I disabled 'useLegacyImplementation' and work's.

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

Blues

Answer 5

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

Appetency

The update was mentioned by me a long time ago. Read the answers before posting your own. – Bedford

U haven’t added a link for correct documentation and u can check ur comment first @sadman – Appetency

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. – Bedford