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

[mohammad-yousuf]

I'm having this issue in Android with react-nagivation and react-native-gesture-handler latest release. kindly help

[mohammad-yousuf]

please tell solution for android windows.

On Mon, 8 Jul 2019, 3:54 p.m. Yasir KAVRAŞ, notifications@github.com wrote:

Hello, 1 - yarn add react-navigation 2 - yarn add react-native-gesture-handler 3 - cd ios/ 4 - pod install 5 - cd .. 6 - react-native run-ios and react-native run-android

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/kmagiera/react-native-gesture-handler/issues/676?email_source=notifications&email_token=ALAPVJA3WX5YRBG4HU7IEQDP6MME5A5CNFSM4H6XUVL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZMXEYA#issuecomment-509178464, or mute the thread https://github.com/notifications/unsubscribe-auth/ALAPVJHCAPBRJGN37JN7MKDP6MME5ANCNFSM4H6XUVLQ .

[SeaMoonTime]

I have the same questions.

[SeaMoonTime]

In 0.60, this is an awful bug. Please solve it as soon as possible.

[har2008preet]

pod install on ios folder works for me

cd ios
pod install

[m2mathew]

This worked. Thanks, @har2008preet! 🚀

pod install on ios folder works for me

cd ios
pod install

[dangtienngoc]

How resolve it on Android and Window system.

[SeaMoonTime]

it works well in iOS, but still fail to run in Android. Who can tell me how to solve the bug in Android?

[dangtienngoc]

I run my app on Android successfully with react-native-gesture-handler

1. I disable autoliking
2. Using jetify to fix Android X in this time.

[MrHazimAli]

@dangtienngoc , can you help how to use jetify to fix android X?

[dangtienngoc]

@dangtienngoc , can you help how to use jetify to fix android X?

You can check it here: https://github.com/mikehardy/jetifier

[dangtienngoc]

@MrHazimAli I do a video my step resolve issue here:

• For Android: https://youtu.be/NcQhDlC7hT8
• For IOS: -- cd ios -- pod install

[MrHazimAli]

thanks @dangtienngoc , working!

[SeaMoonTime]

thanks @dangtienngoc , it works!!!!

[0xinhua]

many thanks for your video. @dangtienngoc , I use jetifier It was been build successful. A anoter error in emulator : TypeError: null is not an object (evaluating '_RNGestureHandlerModule.default.createGestureHandler') This error is located at in PanGestureHandler (at StackViewLayout.tsx:372) Any solutions?

[meraklis56]

In react-native@0.59.10 it doesn't work. I still get the same error, even after jetify "null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')"

[0xinhua]

@meraklis56 try to commenting this line:

// export { default as Directions } from './Directions';

in the your project -> node_modules -> react-native-gesture-handler -> GestureHandler.js

Good luck.

[meraklis56]

Now the error is:

07-10 16:20:38.993 16011 16348 E ReactNativeJS: null is not an object (evaluating '_RNGestureHandlerModule.default.handleSetJSResponder') 07-10 16:20:39.067 16011 16348 E ReactNativeJS: null is not an object (evaluating '_RNGestureHandlerModule.default.handleClearJSResponder')

[dangtienngoc]

In react-native@0.59.10 it doesn't work. I still get the same error, even after jetify "null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')"

react-native@0.59.10 not support android X yet, check your react native cli

^2.0.0 => ^0.60.0 ^1.0.0 => ^0.59.0

Because react native cli ^2.0.0 support auto linking module

[GeronimoKTT]

In react-native@0.59.10 it doesn't work. I still get the same error, even after jetify "null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')"

Remove this modification: // export { default as Directions } from './Directions';

And if you specified something in your "react-native.config.js", remove it.

add these lines in your MainActivity.java: import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

And add this inside the MainActivity class, just after protected String getMainComponentName() function @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; }

And after that do: cd android gradlew clean cd ..

Then do the usual: react-native run-android, and give me the output. Good luck.

[petkir]

please check your MainApplication.java with react-native 0.60 looks like:

@Override
protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      return packages;
}

if you do not use Autolink function this package will not added try to add

... 
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNGestureHandlerPackage() );
return packages

and don't forget the import import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;

Please give feedback if it works

[HeWenKe]

I installed the new version yesterday, using this

show. same error ,it is not good to follow the method provided below and keep reporting errors. who can help me ?thinksyou waiting for this , dependencies: "dependencies": { "react": "16.8.6", "react-native": "0.60.0", "react-native-gesture-handler": "^1.3.0", "react-navigation": "^3.11.0" },

[HeWenKe]

Has this problem been solved? I made the same mistake as ios.

[meraklis56]

@GeronimoKTT

In react-native@0.59.10 it doesn't work. I still get the same error, even after jetify "null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')"

Remove this modification: // export { default as Directions } from './Directions';

And if you specified something in your "react-native.config.js", remove it.

add these lines in your MainActivity.java: import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

And add this inside the MainActivity class, just after protected String getMainComponentName() function @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; }

And after that do: cd android gradlew clean cd ..

Then do the usual: react-native run-android, and give me the output. Good luck.

I failed to mention that I am using React-Native-Navigation thus, according to installing guides I should ignore those steps and wrap every screen component using gestureHandlerRootHOC on the JS side, instead. The moment I am just importing the react-native-gesture-handler, i get the aforementioned error.

[GeronimoKTT]

Ok, which version of react-native-gesture-handler are you using?

[meraklis56]

"react": "^16.8.6",
"react-native": "^0.59.10",
"react-native-gesture-handler": "^1.3.0"

[GeronimoKTT]

Ok, can I have a look to your MainApplication.java, build.gradle (from app/) and your react-native.config.js (if you have one)

[mohammad-yousuf]

Finally, I quit React Native. Either you can waste your time fixing bugs or you can make your project, it's on your luck.

[mohammad-yousuf]

Facebook should spare some time on fixing RN for windows, not everyone uses a mac.

[bailer]

For iOS I had to manually add this to the Podfile pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec' and then run pod install for it to work

[agorf]

Running react-native unlink react-native-gesture-handler plus what @GeronimoKTT suggested is the only thing that worked for me on Android (React Native 0.60)

My woes were caused by following the installation instructions of React Navigation which seem to be outdated for RN 0.60

[meraklis56]

@GeronimoKTT

MainApplication.java

`import android.app.Application;

import com.projectseptember.RNGL.RNGLPackage; import com.arthenica.reactnative.RNFFmpegPackage; import com.facebook.react.ReactApplication; import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; import com.reactnativecommunity.slider.ReactSliderPackage; import com.rnfs.RNFSPackage; import com.imagepicker.ImagePickerPackage; import com.horcrux.svg.SvgPackage; import com.BV.LinearGradient.LinearGradientPackage; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; import com.reactnativecommunity.slider.ReactSliderPackage;

import com.reactnativenavigation.NavigationApplication; import com.reactnativenavigation.react.NavigationReactNativeHost; import com.reactnativenavigation.react.ReactGateway;

import java.util.Arrays; import java.util.List;

public class MainApplication extends NavigationApplication {

@Override
protected ReactGateway createReactGateway() {
    ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };
    return new ReactGateway(this, isDebug(), host);
}

@Override
public boolean isDebug() {
    return BuildConfig.DEBUG;
}

protected List<ReactPackage> getPackages() {
    // Add additional packages you require here
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
                new SvgPackage(),
                new LinearGradientPackage(),
                new ImagePickerPackage(),
                new RNFSPackage(),
                new RNFFmpegPackage(),
                new RNGLPackage(),
                new ReactSliderPackage()
        // eg. new VectorIconsPackage()
    );
}

@Override
public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
}

}`

build.grade

`def enableProguardInReleaseBuilds = false

android { compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

defaultConfig {
    applicationId "com.momus2"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"
    versionCode 1
    versionName "1.0"
    ndk {
          abiFilters "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
        }
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
    }
}

packagingOptions {
        pickFirst 'lib/x86/libc++_shared.so'
        pickFirst 'lib/x86_64/libc++_shared.so'
        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
        pickFirst 'lib/arm64-v8a/libc++_shared.so'
    }
buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
    variant.outputs.each { output ->
        // For each separate APK per architecture, set a unique version code as described here:
        // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
        def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) {  // null for the universal-debug, universal-release variants
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }
    }
}

}

dependencies { implementation project(':react-native-gesture-handler') implementation project(':@react-native-community_slider') compile project(':RNGL') implementation project(':react-native-ffmpeg') implementation project(':react-native-fs') implementation project(':react-native-image-picker') implementation project(':react-native-svg') implementation project(':react-native-linear-gradient') implementation fileTree(dir: "libs", include: ["*.jar"]) implementation 'androidx.appcompat:appcompat:1.0.0' implementation "com.facebook.react:react-native:+" // From node_modules implementation project(':react-native-svg') implementation project(':react-native-navigation') }

// Run this once to be able to run the application with BUCK // puts all compile dependencies into folder libs for BUCK to use task copyDownloadableDepsToLibs(type: Copy) { from configurations.compile into 'libs' } `

Regarding react-native.config.js, I tried with settings and without:

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

[Ekhui]

please check your MainApplication.java with react-native 0.60 looks like:

@Override
protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      return packages;
}

if you do not use Autolink function this package will not added try to add

... 
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNGestureHandlerPackage() );
return packages

and don't forget the import import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;

Please give feedback if it works

this's the only right way it's wasted me two days ...

[emarukyan]

...
Using Protobuf (3.8.0)
Installing RNGestureHandler (1.3.0)
Installing React (0.11.0)
Using gRPC-C++ (0.0.9)
Using gRPC-Core (1.21.0)
Using leveldb-library (1.20)
Using nanopb (0.3.901)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 13 dependencies from the Podfile and 30 total pods installed.

[!] React has been deprecated

Guys, when I link this react-native link react-native-gesture-handler and then make pod install

it installs React also , and then says its deprecated.. and finally gives an error `null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')

[risurina]

This work for me.

• yarn add react-navigation

• yarn add react-native-gesture-handler

• react-native link react-native-gesture-handler

• add react-native.config.js file in the root of project module.exports = { dependencies: { 'react-native-gesture-handler': { platforms: { android: null, ios: null, }, }, }, };

• cd ios

• pod install

"react-native": "0.60.3" "react-navigation": "^3.11.0" "react-native-gesture-handler": "^1.3.0"

[emarukyan]

"dependencies": { "react": "16.8.3", "react-native": "0.59.9", "react-native-firebase": "^5.5.4", "react-navigation": "^3.11.0" },

I have this setup. and whatever I do, I get far more errors. This is a real nightmare...

I use this repo, just want to add navigation, and I just struggle for two days. https://github.com/invertase/react-native-firebase-starter

[risurina]

"dependencies": { "react": "16.8.3", "react-native": "0.59.9", "react-native-firebase": "^5.5.4", "react-navigation": "^3.11.0" },

I have this setup. and whatever I do, I get far more errors. This is a real nightmare...

I use this repo, just want to add navigation, and I just struggle for two days. https://github.com/invertase/react-native-firebase-starter

install react-native-gesture-handler

yarn add react-native-gesture-handler

[emarukyan]

"dependencies": { "react": "16.8.3", "react-native": "0.59.9", "react-native-firebase": "^5.5.4", "react-navigation": "^3.11.0" }, I have this setup. and whatever I do, I get far more errors. This is a real nightmare... I use this repo, just want to add navigation, and I just struggle for two days. https://github.com/invertase/react-native-firebase-starter

install react-native-gesture-handler

yarn add react-native-gesture-handler

I've done that, but after I do pod install

it installs React also , and then says its deprecated.. and finally gives an error `null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')

[sergchernata]

@GeronimoKTT In my case, on RN 0.60.0, the fix was to erase everything inside of react-native.config.js.

[deberoppa7]

it works for me, thanks @har2008preet

[glaydsoncosta]

@MrHazimAli I do a video my step resolve issue here:

https://youtu.be/NcQhDlC7hT8

Thank you bro. Ps: ReactNative guys needs to resolve this ASAP.

[GeronimoKTT]

@GeronimoKTT

MainApplication.java

`import android.app.Application;

import com.projectseptember.RNGL.RNGLPackage; import com.arthenica.reactnative.RNFFmpegPackage; import com.facebook.react.ReactApplication; import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; import com.reactnativecommunity.slider.ReactSliderPackage; import com.rnfs.RNFSPackage; import com.imagepicker.ImagePickerPackage; import com.horcrux.svg.SvgPackage; import com.BV.LinearGradient.LinearGradientPackage; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; import com.reactnativecommunity.slider.ReactSliderPackage;

import com.reactnativenavigation.NavigationApplication; import com.reactnativenavigation.react.NavigationReactNativeHost; import com.reactnativenavigation.react.ReactGateway;

import java.util.Arrays; import java.util.List;

public class MainApplication extends NavigationApplication {

@Override
protected ReactGateway createReactGateway() {
    ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };
    return new ReactGateway(this, isDebug(), host);
}

@Override
public boolean isDebug() {
    return BuildConfig.DEBUG;
}

protected List<ReactPackage> getPackages() {
    // Add additional packages you require here
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
                new SvgPackage(),
                new LinearGradientPackage(),
                new ImagePickerPackage(),
                new RNFSPackage(),
                new RNFFmpegPackage(),
                new RNGLPackage(),
                new ReactSliderPackage()
        // eg. new VectorIconsPackage()
    );
}

@Override
public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
}

}`

build.grade

`def enableProguardInReleaseBuilds = false

android { compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

defaultConfig {
    applicationId "com.momus2"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"
    versionCode 1
    versionName "1.0"
    ndk {
          abiFilters "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
        }
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
    }
}

packagingOptions {
        pickFirst 'lib/x86/libc++_shared.so'
        pickFirst 'lib/x86_64/libc++_shared.so'
        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
        pickFirst 'lib/arm64-v8a/libc++_shared.so'
    }
buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
    variant.outputs.each { output ->
        // For each separate APK per architecture, set a unique version code as described here:
        // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
        def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) {  // null for the universal-debug, universal-release variants
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }
    }
}

}

dependencies { implementation project(':react-native-gesture-handler') implementation project(':@react-native-community_slider') compile project(':RNGL') implementation project(':react-native-ffmpeg') implementation project(':react-native-fs') implementation project(':react-native-image-picker') implementation project(':react-native-svg') implementation project(':react-native-linear-gradient') implementation fileTree(dir: "libs", include: ["*.jar"]) implementation 'androidx.appcompat:appcompat:1.0.0' implementation "com.facebook.react:react-native:+" // From node_modules implementation project(':react-native-svg') implementation project(':react-native-navigation') }

// Run this once to be able to run the application with BUCK // puts all compile dependencies into folder libs for BUCK to use task copyDownloadableDepsToLibs(type: Copy) { from configurations.compile into 'libs' } `

Regarding react-native.config.js, I tried with settings and without:

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

Sorry for the very late response. try adding this line ,new RNGestureHandlerPackage() inside protected List<ReactPackage> getPackages(), right after new ReactSliderPackage()

And give me the output.

[ibunubi]

just got this error on rn 0.60.4 and fixed by manual link

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

ios:

$ cd ios && pod install && cd ..

android: please follow the steps on the documentation, edit MainActivity.java

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

// ...

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
            return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
    };
}

and make sure MainApplication.java already import reanimated and getsure handler

import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.swmansion.reanimated.ReanimatedPackage;

then run your rn service with reset-cache param

$ react-native start --reset-cache

[ghost]

I have got an error. I have to fix it on win 10. null is not an object (evaluating 'rngesturehandlermodule.default.direction')

[ghost]

Hi.ibunubi I tried it. but I have got error yet.

[wangbing0417]

@bailer For iOS I had to manually add this to the Podfile pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec' and then run pod install for it to work

solved my question, nice

[anakornk]

@wangbing0417 this worked for me on RN 0.6.0

[lucasfontinele]

@wangbing0417 thank you, this worked for me. RN 0.6.0 (iOS)

[ytt123]

In react-native@0.59.10 it doesn't work. I still get the same error, even after jetify "null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')"

react-native@0.59.10 not support android X yet, check your react native cli

^2.0.0 => ^0.60.0 ^1.0.0 => ^0.59.0

Because react native cli ^2.0.0 support auto linking module

how to check react native cli version

[anoopmundathan]

@ytt123 this command will give react-native cli version too

react-native -version

[benndip]

for android:

install https://github.com/mikehardy/jetifier npx jetify for ios:

cd ios pod install

This just worked for me very well ,with out stress.. Please follow the instruction well....it works thank you Harpreet Singh har2008preet