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!