Android 'react-native-gesture-handler' error

[lehang123]

When I follow the instruction by the react-navigation website : https://reactnavigation.org/docs/en/getting-started.html.

react-native link react-native-gesture-handler

and then change the MainActivity.java like it asks.

Then run react-native run-android, and error pop up :
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

• react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
  This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.

my react-native version :
react-native-cli: 2.0.1
react-native: 0.60.0

However, when I follow the instruction, to unlink the library
use : react-native unlink react-native-gesture-handler

The app successfully built, but now it pops up another error in the app :
null is not an object (evaluating 'rngesturehandlermodule.direction')
I tried a lot of solution in a lot of websites, like
#494
https://stackoverflow.com/questions/52861437/undefined-is-not-an-object-evaluating-rngesturehandlermodule-state

non of them is working for me

[thymikee]

Hey! RNGH doesn't support autolinking in Android yet. RNGH is compatible with autolinking, but still it needs some extra steps. What you need to do:

• if you have it manually linked already (e.g using link), run unlink:

  react-native unlink react-native-gesture-hadnler
  

• adjust MainActivity.java, as said in Getting Started: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

• make sure to run jetifier on "postinstall" step because RNGH not yet compatible with AndroidX

• if you build for iOS, make sure to install CocoaPods dependencies:

   cd ios && pod install

[himanshupadia]

facing same error in iOS, could anyone please help to resolve this issue.

[thymikee]

EDIT: both platforms work with autolinking, see #671 (comment)

@himanshupadia iOS should be working just fine with autolinking. If you get this error, it means that the CLI detected you have this lib manually linked. Here's what you can do to get it sorted out:

1. Update the @react-native-community/cli to the latest version.
2. Run:

   react-native unlink react-native-gesture-handler --platforms ios
   

[himanshupadia]

@thymikee Yes, in iOS it's autolinking, it's was working fine on last week but, on today, suddenly it's starting getting this error, bellow is dependencies.

"dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-navigation": "^3.11.0"
  }

I am new in this so I am following tutorial and performing operation.

Could you please share any link regarding your post/reply.
It would be great for me.

[xxRockOnxx]

@thymikee I think Step 5 should come before Step 2 because otherwise executing react-native link react-native-gesture-handler --platforms android won't do anything. At least for me it does that.

EDIT: I just realized if you put android in react-native.config.js it will disable the autolink for that. So instead, on step 2, put ios

[femiveys]

I also saw that if you disable something in react-native.config.js, it disables linking and autolinking.

So what should the steps be then?

[thymikee]

@xxRockOnxx @femiveys updated the comment accordingly, thanks!

[jivtesh813]

Below steps have worked for me. So I have captured those for myself, but hope will help someone. Although I can see that official documentation on React Navigation website is now changed. But if you stuck, follow below steps:

Steps to create React-Native app with React-Navigation

1. Create React Native app with below command. It is better if you open cmd as administrator, as one of the below jetifier commands might request that.
   react-native init AwesomeProject

2. Go into project by:
   cd AwesomeProject
   Note - All commands in below steps will be run from this project location

3. Install React Navigation and its handler by below 2 commands:
   npm install --save react-navigation

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

4. I have not followed next steps from React Navigation website, instead followed below steps
   Unlink for iOS with below command:
   react-native unlink react-native-gesture-handler --platforms iOS

5. Although it did nothing and i got the message below, which is ok.
   info iOS module "react-native-gesture-handler" is not installed

6. Create a file named react-native.config.js in the root directory of your project. Means in this case it will be under folder AwesomeProject, and this file will be adjacent to other files such as - package.json etc
   Add below code to the react-native.config.js file
   module.exports = {
   dependencies: {
   'react-native-gesture-handler': {
   platforms: {
   ios: null,
   },
   },
   },
   };

7. After saving above file, run below command:
   npm install --save-dev jetifier

8. Now go to project’s package.json file and add below code in Scripts section and save:
   "postinstall": "npx jetify"

Your package.json, should look like below:
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"postinstall": "npx jetify"
},

9. Now run below command:
   npm install

You should see something like this on console:
Jetifier found 893 file(s) to forward-jetify. Using 4 workers…

10. That’s it..Remember we haven’t changed MainActivity.java file, which was mentioned in ReactNavigation official site. That is not required. Just follow the above steps.

11. Now let’s test if React Navigation working. Add below code to your App.js

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
Home Screen

);
}
}

const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
}
});

export default createAppContainer(AppNavigator);

12. Run below command:
    react-native run-android

It should run ok, but I got below error:
error: bundling failed: Error: Unable to resolve module ./createNavigationContainer

13. If you get above error as well, then delete all files from %TEMP% folder. OR you can use below command to clear cache.
    react-native start --reset-cache

For me clearing %TEMP% folder works.

GOOD LUCK!

[thymikee]

react-native-gesture-handler is compatible with autolinking. What you need to do:

• if you have it manually linked already (e.g using link), run unlink:

  react-native unlink react-native-gesture-hadnler
  

• adjust MainActivity.java, as said in Getting Started: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

• make sure to run jetifier on "postinstall" step because it's not yet compatible with AndroidX

cc @osdnk feel free to close this.

[doctor-mosbat]

react-native-gesture-handler is compatible with autolinking. What you need to do:

• if you have it manually linked already (e.g using link), run unlink:

  react-native unlink react-native-gesture-hadnler
  

• adjust MainActivity.java, as said in Getting Started: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android
• make sure to run jetifier on "postinstall" step because it's not yet compatible with AndroidX

cc @osdnk feel free to close this.

react-native unlink react-native-gesture-handler

[Tbaut]

Building is still failing if I don't link manually:

 * What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 3s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/home/me/myApp/android/app/src/main/java/io/parity/signer/MainActivity.java:6: error: package com.swmansion.gesturehandler.react does not exist
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
                                         ^
/home/me/myApp/android/app/src/main/java/io/parity/signer/MainApplication.java:28: error: cannot find symbol
          new RNGestureHandlerPackage()
              ^
  symbol: class RNGestureHandlerPackage
/home/me/myApp/android/app/src/main/java/io/parity/signer/MainActivity.java:38: error: cannot find symbol
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
                           ^
  symbol: class RNGestureHandlerEnabledRootView
3 errors

FAILURE: Build failed with an exception.

I followed #671 (comment).

• using react-native-gesture-handler@1.3.0.
• manually unlinked with react-native unlink react-native-gesture-handler.
• MainActivity.java is ajusted according to the guide.
• npx jetifier runs as postinstall.