'How to fix react-native-gesture-handler error not working

I create a new project in react-native ,then install (npm install --save react-navigation npm install --save react-native-gesture-handler), the latest version (react-native: 0.60.0) auto linking so,I not link ,but still is showing error, !https://prnt.sc/oaxxuc

Task :react-native-gesture-handler:compileDebugJavaWithJavac **FAILED**

After I uninstall gesture-handler this kind of error showing !https://prnt.sc/oaxx8i

Please help to solve this error

The react-native latest version:-

 System:
     OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
     react: 16.8.6 => 16.8.6 
     react-native: 0.60.0 => 0.60.0    npmGlobalPackages:
     react-native-cli: 2.0.1

thanks

react-native

Solution 1:^[1]

This issue has been posted on github and you can apply the following solution. It will work for the RN 0.60.0.

https://github.com/kmagiera/react-native-gesture-handler/issues/642#issuecomment-509113481

Solution 2:^[2]

First, install the library using yarn:

yarn add react-native-gesture-handler

or with npm if you prefer:

npm install --save react-native-gesture-handler

Linking react-native link react-native-gesture-handler

Android

Follow the steps below:

If you use one of the native navigation libraries (e.g. wix/react-native-navigation), you should follow this separate guide to get gesture handler library set up on Android. Ignore the rest of this step – it only applies to RN apps that use a standard Android project layout.

Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:

package com.swmansion.gesturehandler.react.example;

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

iOS

There is no additional configuration required on iOS except what follows in the next steps.

Now you're all set. Run your app with react-native run-android or react-native run-ios

Solution 3:^[3]

You should paste import 'react-native-gesture-handler'; on the top of index.js which is standard in react native out of the box.

the entry of your app. This is the file where you import your App.js file, its written clearly in the documentations.

documents here https://reactnavigation.org/docs/en/getting-started.html

Solution 4:^[4]

If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:

module.exports = {
  dependencies: {
    'react-native-gesture-handler': {
      platforms: {
        android: null,
        ios: null,
      },
    },
  },
};

Solution 5:^[5]

As suggested by documentation

On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC

const ExampleWithHoc = gestureHandlerRootHOC(() => (
    <View>
      <DraggableBox />
    </View>
  );
);

export default function Example() {
  return (
    <Modal>
      <ExampleWithHoc />
    </Modal>
  );
}

Here the documentation

Solution 6:^[6]

for react-native-gesture-handle 2 version onwards we just need to following changes at App.js

import {GestureHandlerRootView} from 'react-native-gesture-handler';


export default function App() {
  return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}

Solution 7:^[7]

Downgrade from 1.1.0 -> 1.0.16 and use exact version(-E):

npm i [email protected] -D -E

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2	kirtan dudhat
Solution 3
Solution 4	Salione
Solution 5	manas
Solution 6
Solution 7	Akila Devinda

'How to fix react-native-gesture-handler error not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]