lehan gong
lehan gong

Reputation: 31

Android 'react-native-gesture-handler' error

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 undefined is not an object (evaluating 'RNGestureHandlerModule.State'

non of them is working for me

Upvotes: 3

Views: 7138

Answers (4)

Ravi Sharma
Ravi Sharma

Reputation: 527

What you can do is, first uninstall react-native-gesture-handler.

Then delete IOS and Android folder.

Then run below command.

1.react-native upgrade --legacy true // to recover ios and android folder.

2.npm install react-native-gesture-handler

3.react-native link

4.react-native run-android

5.react-native run-ios

Also update your MainActivity.java file , follow official website:

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Upvotes: 0

Harsh Panchal
Harsh Panchal

Reputation: 836

Looks like this is to do with the new autolinking feature in RN 0.60.

For iOS

To fix for now just add the following podspec for RNGesureHandler to ios/Podfile

pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'

Then in the ios directory run pod install to install it.

For Android

Path: android/app/src/main/java/com/projectname/MainApplication.java

import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
....
protected List<ReactPackage> getPackages() {
        // Add additional packages you require here
        // No need to add RnnPackage and MainReactPackage
        return Arrays.<ReactPackage>asList(
            ....
            new RNGestureHandlerPackage()
        );
    }

Have a good day.

Upvotes: 3

Dan Coman
Dan Coman

Reputation: 11

Did you run react-native run-android or react-native run-ios ?

Upvotes: -1

JaKK&#39;s Team
JaKK&#39;s Team

Reputation: 329

I'm not sure about what went wrong, but very possibly because of the react-native-cli that upgraded from below 0.60.0 to above it.

BEFORE 0.60.0 when running react-native run-android, the command will run a metro packager, along with building the android app, and then run the app that connect to the metro packager.

That's why in the past, we only run one command "react-native run-android" to run the project.

But AFTER 0.60.0 when running react-native run-android, the command will only build the android-app, and run the app to connect to the metro packager.

I saw a command prompt blinked once, might also be how the command start the metro packager went wrong and the packager just closed itself somehow.

Also as for the problem with react-native link react-native-gesture-handler I believe it is the new feature of react-native 0.60.0 to autolink library, so manual linking of library is not necessary anymore. As a lot of the library provider might need to start providing auto-linking features, or might face the same error, not just react-native-gesture-handler.

Temporary Solution until someone fix the react-native-cli to run the metro packager again: Open 2 command prompt instead of 1. And run the command below on each of the command prompt:

  1. react-native start
  2. react-native run-android

You might want to run the first command first and wait for it to be ready before running the 2nd.

Otherwise, you app might turn out to be blank.

Source : I tried it myself by creating new project and running the command as mentioned by the question.

Upvotes: 0

Related Questions