null is not an object ( evaluating 'RNGestureHandlerModule.Direction')

[blackpencil8994]

Hi, I'm using react-native-gesture-handler within react-navigation and getting this error

null is not an object ( evaluating 'RNGestureHandlerModule.Direction')

my project is just simple and using the latest release of react-native-gesture-handle

... "dependencies": { "react": "16.6.3", "react-native": "0.58.6", "react-native-gesture-handler": "^1.1.0", "react-navigation": "^3.3.2" }, ... Seem it's related to Direction.js fix web compatibility #406

Any suggestion for me to fix this?

[hamedhemmati]

I am getting the same error.

[ajboxjr]

Have you tried this? This solved my problem

1. Right Click Libraries "Add Files to Project"
2. /node_modules/react-native-gesture-handlers/ios/RNGestureHandler.xcodeproj
3. Go to build phases and add libRNGestureHandler.a
4. Run Good luck to you all!

[hamedhemmati]

Thank you for the quick response that solved the problem for me.

[blackpencil8994]

Thanks @ajboxjr for your help,

I did follow your step and successfully run by XCode.

But it's still not working with react-native run-ios

[blackpencil8994]

Finally I did the same with new project and it worked for me.

So we need to manual linking react-native-gesture-handler with this new version

Thank you all.

[amrita6]

Hi, I have the same issue in Android app. Could you please help me to fix it?

EDIT: This issue appears only if I do not update MainActivity.java. After updating this file react-native run-android is failed:

$ react-native run-android
Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat install Debug)... FAILURE: Build failed with an exception. Where:
Settings file 'D:\testProj\react-native\navigation\android\settings.gradle' line : 3 What went wrong:
Could not compile settings file 'D:\testProj\react-native\navigation\android\set tings.gradle'. > startup failed:
settings file 'D:\testProj\react-native\navigation\android\settings.gradle': 3 : unexpected char: '\' @ line 3, column 133.
s\react-native-gesture-handler\android') ^ 1 error 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 0s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html Command failed: gradlew.bat installDebug Error: Command failed: gradlew.bat installDebug
at checkExecSyncError (child_process.js:616:11)
at Object.execFileSync (child_process.js:634:13)
at runOnAllDevices (D:\testProj\react-native\navigation\node_modules\react-n ative\local-cli\runAndroid\runAndroid.js:299:19)
at buildAndRun (D:\testProj\react-native\navigation\node_modules\react-nativ e\local-cli\runAndroid\runAndroid.js:135:12)
at isPackagerRunning.then.result (D:\testProj\react-native\navigation\node_m odules\react-native\local-cli\runAndroid\runAndroid.js:65:12)
at process._tickCallback (internal/process/next_tick.js:68:7)

I have tried to make an installation on a new project and this error still appears.

[blackpencil8994]

@amrita6 you can link automatically in Android. But you need to manual link in iOS project. After install package, try this:

1. Manual link for iOS project in XCode
2. Rename ios folder into iosX
3. Automatically link for Android by react-native link react-native-gesture-handler
4. Rename iosX folder into ios in turn
5. Run

Hope this helps.

[amrita6]

@blackpencil8994 thanks but I needed Android only. I have found the reason already: in /android/settings.gradle there was string: project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

I've changed this to: project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\\node_modules\\react-native-gesture-handler\\android')

and this helped me. Strange that it has happened so.

[markhker]

@blackpencil8994 thanks but I needed Android only. I have found the reason already: in /android/settings.gradle there was string: project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

I've changed this to: project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

and this helped me. Strange that it has happened so.

Two strings are the same...

[amrita6]

@markhker strange but there was two backslashes but it showed as one. I've changed it already.

[joshverd]

I'm still getting this after trying everything above, same versions as mentioned previously.

[JosephDunivan]

I'm having this same issue. Why would I need to manually link in iOS. I actually went into my xCode project and its linked fine.

[JosephDunivan]

I looked in GestureHandler.js and its says import Directions from ./Directions;, but no such object Directions exists in Directions.js. It sets NativeModules from react-native to RNGestureHandlerModule with method .Direction (which doesn't exist). Produces error null is not and object (evaluating 'RNGestureModule.Direction')

[denieler]

same issue here :(

[denieler]

ok, in my case solved by adding:

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

to android/app/src/main/java/com/projectname/MainApplication.java

[joshverd]

I ended up just giving up and building my own navigation component, haha.

[cyphire]

I may have the answer to this!!!!

I was in some of my ES6 constants file... and I added a TouchableOpacity by accident, instead of the usual TouchableHighlight in some JSX.

My editor (Visual Studio Code) seemed to have added: import { TouchableOpacity } from 'react-native-gesture-handler'; at the top of my file!!! WIthout my asking for it!

Go see if this was put into your code by accident, got the same error as all of you! Nothing to do with some of these comments!

It also puts an erronous console import as well when i use console for the first time in a file!

Anyway, had the error, noticed the bad import at the top and now all ok!!!

[darbio]

Have you tried this? This solved my problem

1. Right Click Libraries "Add Files to Project"
2. /node_modules/react-native-gesture-handlers/ios/RNGestureHandler.xcodeproj
3. Go to build phases and add libRNGestureHandler.a
4. Run Good luck to you all!

Where do you do this? In XCode?

[darbio]

For other people, rebuilding and deploying from XCode solved this issue for me. I didn't realise that once you link, you need to re-build and deploy (which makes total sense now that I understand what linking is!)

[tansangxtt]

Hi, I'm using react-native-gesture-handler within react-navigation and getting this error

null is not an object ( evaluating 'RNGestureHandlerModule.Direction')

my project is just simple and using the latest release of react-native-gesture-handle

... "dependencies": { "react": "16.6.3", "react-native": "0.58.6", "react-native-gesture-handler": "^1.1.0", "react-navigation": "^3.3.2" }, ... Seem it's related to Direction.js fix web compatibility #406

Any suggestion for me to fix this?

Hi @blackpencil8994,

I also got this problem, but it can be run by react-native run-ios/android. Could you run it with Metro Bundler?

[jin-benben]

I am getting the same error in android

[khattab93]

After I followed the steps here https://reactnavigation.org/docs/en/getting-started.html, I got the same issue and I solved it as follows: 1- Manually linking RNGestureHandler in Xcode (Apply @ajboxjr solution with the steps mentioned here https://facebook.github.io/react-native/docs/linking-libraries-ios) 2- Uninstall the app 3- Rebuild and rerun the app using Xcode

[thefiscina]

https://pt.stackoverflow.com/questions/345084/undefined-is-not-an-object-evaluating-rngesturehandlermodule-state

Funcionou para mim no android! It worked for me on Android!

[Gauravmokashi]

I am getting the same error in android

Have you solve this?

[Gauravmokashi]

Have you tried this? This solved my problem

1. Right Click Libraries "Add Files to Project"
2. /node_modules/react-native-gesture-handlers/ios/RNGestureHandler.xcodeproj
3. Go to build phases and add libRNGestureHandler.a
4. Run Good luck to you all!

which libraries you are talking about?

[kidmysoul]

in android、I　resolved it by react-native start --reset-cache

[osdnk]

So AFAIK it's just a matter of restarting and rebuilding.

[orsospatrick]

On Android for this I used : react-native link react-native-gesture-handler after installed react-native-gesture-handler and I solve the problem.

[HunnainKhan]

For me just running react-native link command worked for me after re installing some libraries like react navigation

[endritvitija]

run in terminal react-native link react-native-gesture-handler if not work check this guide https://reactnavigation.org/docs/en/getting-started.html

[sasurau4]

I faced with the same problem and this comment works for me 👍 https://github.com/kmagiera/react-native-gesture-handler/issues/494#issuecomment-471164413

If someone faced with the problem, please check your android/app/src/main/java/com/projectname/MainApplication.java.

[aprofromindia]

ok, in my case solved by adding:

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

to android/app/src/main/java/com/projectname/MainApplication.java

I think I need to do the same, but I am trying to integrate RN in an existing project using this guideline and though I implement ReactApplication in my custom Application class and link the RNGH library through various gradle files, the getReactNativeHost() method of the ReactApplication interface never gets triggered, any ideas here ?

I have been successfully able to integrate it into my existing iOS App, any guidance on integrating in an existing Native Android app would be much helpful.

[bonnmh]

ok, in my case solved by adding:

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

to android/app/src/main/java/com/projectname/MainApplication.java

Can you show me the mainactivity

[potatowave]

I am finding the same issue on ios when running with react-native run-ios. The app does run from the xcode workspace, however I need to have it running on a remote build server.

Has anyone in this situation been able to solve this issue?

[osdnk]

Do maybe it’s a problem with linking on your remote server?

[potatowave]

I don't think so.

Run Locally with Xcode: Works Run Locally with react-native run-ios: This error Build Remotely Presumed this error (app crashes before I can get any diagnostics)

[osdnk]

https://stackoverflow.com/questions/35611765/react-native-run-ios-command-fails-pch-issues-but-build-succeeds-in-xcode

Maybe?

[potatowave]

I have tried deleting build. The build succeeds when running react-native run-ios however the simulator still loads with this null is not an object ( evaluating 'RNGestureHandlerModule.Direction') error.

Pretty sure it's some kind of linking issue. Does react-native run-ios look at different configs or something?

[osdnk]

It does not have another config. But it has another cache

[SynQi]

https://pt.stackoverflow.com/questions/345084/undefined-is-not-an-object-evaluating-rngesturehandlermodule-state

Funcionou para mim no android! It worked for me on Android!

Valeu irmão ! salvou hard hehe

[vvavdiya]

I have solved this error by manually linking react-native-gesture-handler

as per React-Navigation setup guide

package com.sperapp;

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 {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "SperApp";
    }
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

[davesimtech]

I had this issue with iOS when trying to get it running. After following the installation instructions and linking with

react-native link react-native-gesture-handler

I then had to run

pod install

Maybe the instructions need to be updated to reflect this if you are using pods?

[awesomeo99]

Finally I did the same with new project and it worked for me.

So we need to manual linking react-native-gesture-handler with this new version

Thank you all.

can you elaborate on this? were you trying to run on iOS or Android?

[agm1984]

pod install fixed my issue for iOS. Android was working fine after following the instructions at https://reactnavigation.org/docs/en/getting-started.html.

Here is what I saw:

[rahulpsd18]

Getting the same issue on android. using version 1.1.0

Followed all steps I could find here or on SO, unlinked, uninstalled then reinstalled and relinked. Followed https://reactnavigation.org/docs/en/getting-started.html and updated MainActivity.java file.

Restarted the build process, restarted the PC, ran gradlew clean and still facing the issue.

Any help would be appreciated.

[arled]

Thank me later: yarn add react-native-gesture-handler react-native link react-native-gesture-handler react-native run-ios No need for silly manual steps as above. You're welcome!

[Raja0sama]

Simply open xcode still dosent work, go to library and add a file, in file selector nevigate to genturehandler inside node module and then select that xcodeproject and then build basic, nevigate to library section and add the the module from library.

[erikadelao13]

Have you tried this? This solved my problem

1. Right Click Libraries "Add Files to Project"

2. /node_modules/react-native-gesture-handlers/ios/RNGestureHandler.xcodeproj

3. Go to build phases and add libRNGestureHandler.a

4. Run
   Good luck to you all!

which IDE are you using? i am on vs code and i dont know where i should do this

[alpaca623]

@amrita6 you can link automatically in Android. But you need to manual link in iOS project. After install package, try this:

1. Manual link for iOS project in XCode
2. Rename ios folder into iosX
3. Automatically link for Android by react-native link react-native-gesture-handler
4. Rename iosX folder into ios in turn
5. Run

Hope this helps.

your solutaion very nice. Thank you.

And, I have question. Why did you rename the ios folder and link? And.. why linking work is not working well? How was this resolved? Thank you very much for your reply.

[mkcode]

I suspect whether or not the pod install works or does not will be related to which version of Cocoapods you are running