react-native-gesture-handler: null is not an object ( evaluating 'RNGestureHandlerModule.Direction')

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

null is not an object ( evaluating ‘RNGestureHandlerModule.Direction’)

screen shot 2019-03-05 at 1 27 51 am

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?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 123
  • Comments: 132 (8 by maintainers)

Commits related to this issue

Most upvoted comments

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!

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 ended up just giving up and building my own navigation component, haha.

I am getting the same error.

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.

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

Looks like this is to do with the new autolinking feature in RN 0.60. 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.

@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.

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?

npm install --save react-native-gesture-handler react-native link react-native-gesture-handler cd /ios pod install

Also works for me on MacOS with versions: react-native-cli: 2.0.1; react-native: 0.60.0 I’m running into this error in each new project.

in react-native 0.60.+ you will have to install pod. cd ios && pod install && cd ../

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?

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!

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

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?

谢谢!我在向现有app中引入了RN,在执行离线包的时候遇到了这个问题,react-native link操作后一定要执行pod install,我的问题很好的解决了。

None of the above solutions of adding to the library and build phases worked for me. Following is what worked for me:

cd ios
pod install

Original credits here.

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')

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!)

In react-native v0.60.0 RC 0 i had to run pod install in the ios directory and it worked fine. I was getting the same error with just react-native link.

IOS Steps that worked for me

  1. react-native link react-native-gesture-handler
  2. ios directory pod install --repo-update
  3. close ios simulator
  4. react-native run-ios

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

This thing worked for me: Go to node_modules/react-native-gesture-handler/GestureHandler.js And commit this line //export { default as Directions } from './Directions';

for ios:

yarn add react-navigation yarn add react-native-gesture-handler react-native link react-native-gesture-handler

if it is not working:

go into ./project_folder/ios_folder/

pod install

This worked for me today… but actually the instructions on the website were working for me on my regular workstation. Software is so temperamental. ehehehehehhe…

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?

Thanks, this works for me

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: image

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

@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.

I did like this:

  1. cd ios && pod init && pod install
  2. cd … && react-native run-ios (turn off every session and after again set on terminal ) For me this solution is worked Thank for everything who helped!

There seems to be a distinct differences when using react-native 0.60.0 (current release) vs 0.59.9.

I was not able to get it to work at all in the 0.60.0 version, but the same code and install commands work perfectly for 0.59.9.

Posting as it may save someone some trouble.

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

Umm… In my case I forgot to install pods 😃 just do cd ios pod install then try react-native run-ios

I was getting this error in iOS build. I ran pod install inside my ios folder and it worked.

I will run my project in iOS and Android, because of this I followed all steps in installation documentation, including the modification of MainActivity.java.

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

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?

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

npx pod-install ios solved my issue https://reactnavigation.org/docs/getting-started

I am getting the same error in android

IOS Steps that worked for me

  1. react-native link react-native-gesture-handler
  2. ios directory pod install --repo-update
  3. close ios simulator
  4. react-native run-ios

Also worked for me… Thx

I was facing the same error in android. solved this by linking manually. after installing dependencies 1: run : react-native link react-native-gesture-handler 2: rebuild the project react-native run android after build 3:react-native start You are good to go… thanks

Still happening to me in Android… Unlinking and relinking, cleaning gradle, executing on physical device or emulator, cleaning node_modules, starting with an empty react native project… None of that works

in react-native 0.60.+ you will have to install pod. cd ios && pod install && cd ../

Right solution

This thing worked for me: Go to node_modules/react-native-gesture-handler/GestureHandler.js And commit this line //export { default as Directions } from './Directions';

Thank you. If you comment out the line above it works.

@joshverd wise decision,I almost want to buy another new mbp to try solve this issue .🤷‍♀️

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!

Thanks, dude!!

I fixed it by editing the MainApplication.java.

Add this:

import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;

And this:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new RNGestureHandlerPackage()
    );
}

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!!!

Still with this issue even after following the throublshooting, which asks for unlink… but i’ve seen solutions here asking to link and didn’t work

[Fri Sep 25 2020 17:24:47.710]  BUNDLE  ./index.js 

[Fri Sep 25 2020 17:25:07.300]  ERROR    TypeError: undefined is not an object (evaluating '_RNGestureHandlerModule.default.Direction')
[Fri Sep 25 2020 17:25:07.301]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Fri Sep 25 2020 17:25:07.302]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

Facing the same issue.

run cd android && ./gradlew clean before react-native run-android 😃

@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.

HI can you please explain the first method, sorry i’m new into React Native

For the ones who are still having this issue, reactnavigation.org released a troubleshooting topic for this specific error, here is the link; https://reactnavigation.org/docs/troubleshooting

I hope this will help you!

This should fix your issue

rm -rf ios/Pods && rm -rf ios/build && cd ios && pod install && cd …/

rm -rf node_modules && rm yarn.lock && yarn install

I am using “react-native”: “0.61.5” I am working on ubuntu 18.04 I fixed the issue on my android emulator by following the steps mentioned below

Make sure you follow steps for the version you are using (React Native 0.61.5 and lower in my case)

  1. Delete/Remove your node_modules directory rm -rf node_modules

  2. Install your dependencies again If you are using Yarn $ yarn or npm install if you are using npm

  3. Clean your Gradle I followed below steps for that:

cd android ./gradlew clean cd .. react-native run-android

Good Luck, These steps worked for me

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?

npm install --save react-native-gesture-handler react-native link react-native-gesture-handler cd /ios pod install Also works for me on MacOS with versions: react-native-cli: 2.0.1; react-native: 0.60.0 I’m running into this error in each new project.

It works for me. Thanks.

It works for me. Thanks

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!

What is that Libraries? I can’t understand the step 1. Also where to add the libRNGestureHandler.a In the Xcode project I can’t add the libRNGestureHandler.a file in the Target Dependencies. Only the libRNGestureHandler-tvOS.a file is available to add in the Target Dependencies.

Help me out.

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?

npm install --save react-native-gesture-handler react-native link react-native-gesture-handler cd /ios pod install

Also works for me on MacOS with versions: react-native-cli: 2.0.1; react-native: 0.60.0 I’m running into this error in each new project.

It works for me. Thanks.

I fixed it by:

npm i jetifier -D npx jetify

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.

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?