Swipe Gestures not Working in Android- React Native Gesture Handler

Problem Statement

Hello Guys, After the last updates many of React Native developers are facing the issue with the gestures. I am getting many emails regarding that so here I have planned to post the solution for Swipe Gestures not Working in Android- React Native Gesture Handler.

As per my experience of React Native development, I usually face the dependency integration problem with iOS instead of Android but this time it’s different because if you test the app with gesture in iOS devices then it will work very perfect but for the Android, you will face the issue.

For those who haven’t faced this issue or have no idea what I am talking about, after integrating react–native–gesture–handler in your app you can enable the swipe gestures for Tab and Navigation Drawer. swipe example for the Tab and Drawers can be:

1. Change the Tab screen by swiping right to left or right to left
2. Swipe out the navigation drawer by swiping left to right or can swipe in the drawer by clicking outside of the drawer

So that was the general things which you can notice. In the last few updates, they have done lots of changes, and developers are now facing the issue with the swipe gestures in the Android device only.

This problem has 2 solutions which are dependent upon the React Navigation Version you have used in your React Native project:

1. For React Navigation V4 you have to add some additional lines in MainActivity.java
2. For React Navigation V5 you have to import a gesture handler in the index file.

1. Solution for React Navigation V4

Add some additional lines in MainActivity.java

1. Navigate to the Project -> android -> app -> src -> main -> java -> com -> project -> MainActivity.java

2. Add the following additional lines below import (Screenshot below for the help)

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

3. Add a new method in Class

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

Screenshots

Screenshot for the reference (Plus signs to denote the additional lines)

Complete screenshot after the change

2. Solution for React Navigation V5

Import a gesture handler in the index file

To finalize the installation of react-native-gesture-handler, add the following at the top (make sure it’s at the top and there’s nothing else before it) of your entry files, such as index.js or App.js:

import 'react-native-gesture-handler';

Note: If you skip this step, your app may crash in production even if it works fine in development.

Thanks to Akshay Bansal, for the comment

It is also working the following way:

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
import {gestureHandlerRootHOC} from ‘react-native-gesture-handler’;

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

This is how you can solve the problem of Swipe Gestures not Working in Android. I hope this will work. If you are facing any kind of issue then you can comment below so that everyone can know about the different possibilities of failure.

I hope you liked it. 🙂