Swipe to Toggle Drawer in React Native

If you implement a drawer navigator in React Native, you might notice that by default the drawer often doesn’t open when you swipe the screen in the necessary direction, at least on android. This is because of some issues with the react-native-gesture-handler. The solution to this problem is actually quite simple, although it involves writing native code.

Open the MainActivity.java file located in /android/app/src/main/java/YOUR-PACKAGE-NAME and add the following import statements to it:

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

Having added these import statements, now add the below method in the MainActivity class:

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

That’s it! Your drawer should now open and close when you swipe on the screen in the correct directions.

Hope this article helped! If it did, don’t forget to give it a clap. Follow me on medium for more such articles!

Written by

I’m a undergrad at BITS Pilani, Goa Campus, expecting to graduate in 2022. I love coding and writing about technical stuff.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store