Unsupported top level event type "onGestureHandlerStateChange" dispatched

[punksta]

I am getting crash when I touch the PanGestureHandler.

return (
            <PanGestureHandler
                onGestureEvent={this.onGestureEvent}
                onHandlerStateChange={this.onHandlerStateChange}
            >
                <Animated.View style={[style, panStyle]} {...rest}>
                    {children}
                </Animated.View>
            </PanGestureHandler>
        );

package.json

    "react-native-gesture-handler": "1.0.8",
    "react": "^16.5.0",
    "react-native": "^0.57.2",

android versions:

  compileSdkVersion 27
    buildToolsVersion '27.0.3'

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 27
  }

    implementation "com.android.support:appcompat-v7:27.1.1"

crash log

Unsupported top level event type "onGestureHandlerStateChange" dispatched
extractEvents
    ReactNativeRenderer-dev.js:2471:6
extractEvents
    ReactNativeRenderer-dev.js:1016:8
runExtractedEventsInBatch
    ReactNativeRenderer-dev.js:1070:4
<unknown>
    ReactNativeRenderer-dev.js:2713:6
batchedUpdates$1
    ReactNativeRenderer-dev.js:15311:14
batchedUpdates
    ReactNativeRenderer-dev.js:2616:31
_receiveRootNodeIDEvent
    ReactNativeRenderer-dev.js:2711:17
receiveEvent
    ReactNativeRenderer-dev.js:2731:26
__callFunction
    MessageQueue.js:349:47
<unknown>
    MessageQueue.js:106:26
__guard
    MessageQueue.js:297:10
callFunctionReturnFlushedQueue
    MessageQueue.js:105:17

related issue: https://github.com/expo/expo/issues/2067

[osdnk]

Hi, @punksta Thanks for the issue. Please, update react to '6.6.0-alpha.8af6728and react-native to 0.57.3 and if it won't help, write here again :)

[punksta]

same here

Unsupported top level event type "onGestureHandlerStateChange" dispatched
extractEvents
    ReactNativeRenderer-dev.js:2530:6
extractEvents
    ReactNativeRenderer-dev.js:1073:8
runExtractedEventsInBatch
    ReactNativeRenderer-dev.js:1127:4
<unknown>
    ReactNativeRenderer-dev.js:2772:6
batchedUpdates$1
    ReactNativeRenderer-dev.js:15568:14
batchedUpdates
    ReactNativeRenderer-dev.js:2675:31
_receiveRootNodeIDEvent
    ReactNativeRenderer-dev.js:2770:17
receiveEvent
    ReactNativeRenderer-dev.js:2790:26
__callFunction
    MessageQueue.js:349:47
<unknown>
    MessageQueue.js:106:26
__guard
    MessageQueue.js:297:10
callFunctionReturnFlushedQueue
    MessageQueue.js:105:17

[osdnk]

@punksta Did you try my code with these versions?

[osdnk]

Could you build a showcase repo?

[punksta]

@osdnk no, it's my opensource project actually. recent code in dev branch. I use your library here: https://github.com/punksta/Cat-or-dog/blob/dev/src/containers/DraddingFallingV2.js#L187

steps to reproduce: 1) start the app in debug mode on android 2) press "play" 3) press "start game" 4) try to touch any falling image

if you need minimal example I can try to make it later.

[punksta]

@osdnk if you need more info or smaller example, let me know.

[Jyrno42]

Having the same problem on react-native 0.57.5. I am using this library through react-navigation, if that makes a difference.

E: Fixed it by doing the patch of UIManager.RCTView.directEventTypes in my code as well. The patch is here in the codebase if anyone is wondering: https://github.com/kmagiera/react-native-gesture-handler/blob/master/GestureHandler.js#L46

[balthazar]

@osdnk Getting the same issue with a Drawer component using:

• react-native 0.57.7
• react-navigation 3.0.2
• react-native-gesture-handler 1.0.10

@Jyrno42 what versions are you using?

[Jyrno42]

• react-native: 0.57.5
• react-navigation: 3.0.0
• react-native-gesture-handler: 1.0.9

E: So I am a bit behind your versions.

[enahum]

Same issue here I'm using

• react-native-navigation: 1.1.492
• react-native: 0.57.5
• React: 16.6.3
• react-native-gesture-handler: 1.0.10

the packager also crashes with

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003a08d node::Abort() [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 2: 0x10003a297 node::OnFatalError(char const*, char const*) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 3: 0x1001d2455 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 4: 0x10059d6d2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 5: 0x1005a01a5 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 6: 0x10059c04f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 7: 0x10059a224 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 8: 0x10059a725 v8::internal::Heap::CollectAllAvailableGarbage(v8::internal::GarbageCollectionReason) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
 9: 0x1005a6b81 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
10: 0x1005789c4 v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
11: 0x10089051b v8::internal::IncrementalStringBuilder::Extend() [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
12: 0x100678d0b v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
13: 0x10067c258 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
14: 0x10067b684 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
15: 0x10067ab3d v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
16: 0x10067ce2c v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
17: 0x10067b684 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
18: 0x100676f8f v8::internal::JsonStringifier::Stringify(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
19: 0x100290df6 v8::internal::Builtin_Impl_JsonStringify(v8::internal::BuiltinArguments, v8::internal::Isolate*) [/Users/enahum/.nvm/versions/node/v10.11.0/bin/node]
20: 0x2777add5c17d 
21: 0x2777add0a5a3 
22: 0x2777adde8d5f 
23: 0x2777add118b5 
24: 0x2777add0a5a3 
Abort trap: 6
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: write EPIPE
    at WriteWrap.afterWrite [as oncomplete] (net.js:788:14)
Emitted 'error' event at:
    at onwriteError (_stream_writable.js:431:12)
    at onwrite (_stream_writable.js:456:5)
    at _destroy (internal/streams/destroy.js:40:7)
    at Socket._destroy (net.js:613:3)
    at Socket.destroy (internal/streams/destroy.js:32:8)
    at WriteWrap.afterWrite [as oncomplete] (net.js:790:10)

[enahum]

can we re-opened this issue please?

[balthazar]

Because my navigators were created asynchronously, the handler was registered too late and thus throwing this error. I fixed the issue by simply doing:

import 'react-native-gesture-handler'

at the top of my index.js 🙂

[enahum]

Awesome @balthazar that seems to have done it

[enahum]

perhaps I should open another issue, but after this was no longer throwing the error no the PanGestureHandler works but after the gesture finishes it won't start again unless I re-mount the component

[jamsch]

Upgrading to 0.58.0-rc.1 gives me this issue when trying to open my drawer

[osdnk]

@jamsch Could you clarify a bit? Which drawer do you use? How do you import it?

[jamsch]

@osdnk Using the React Navigation v3 DrawerNavigator which is apparently using this library. I have a production build running on 0.57.6 and it works fine though.

[yqz0203]

Because my navigators were created asynchronously, the handler was registered too late and thus throwing this error. I fixed the issue by simply doing:

import 'react-native-gesture-handler'

at the top of my index.js 🙂

Resovled it, but how this happens. Module code is always running when code have been loaded, doesn't it?

Can you tell me why? Thank you.

============================

I make a terrible mistake, I export module by using get xxx(){}, so it makes module code lazy running while it is required by other modules.

[sinhpn92]

I have same issue with:

"react-navigation": "^3.1.0",
"react-native-gesture-handler": "^1.0.15",

I did put import 'react-native-gesture-handler' on top of index.js but it's doesn't work :(

[brendandestefano]

I'm also still seeing this error. I put import 'react-native-gesture-handler'; in my file that has createAppContainer but still seeing the error.

I'm using: "react-navigation": "3.0.9", "react-native-gesture-handler": "^1.0.12",

Any ideas @yqz0203 ?

[fsmaiorano]

@brendandestefano

Try put this import in the first index.js of your application.

Like this:

import "react-native-gesture-handler";

import { AppRegistry } from "react-native";  

import App from "./src/App";

import { name as appName } from "./app.json";

[sinhpn92]

@fsmaiorano Downgrade to "react-native-gesture-handler": "^1.0.9" will working fine.

[Jyrno42]

On react-native 0.58.3 this occurs for me only in a production build with Android. Tried to work around it by doing the following in my codebase but it did not help. My current theory is that it is somehow related to minification of javascript which breaks the patching logic.

E: Nope, disabled minification, issue still occurs. E2: Saw the message of this commit and updated my patch accordingly. All good now :)

index.js:

import './thepatch';
import './App/index'; // AppRegistry.registerComponent in here

thepatch.js:

import { NativeModules } from 'react-native';

const { UIManager } = NativeModules;

if (UIManager) {
// Add gesture specific events to genericDirectEventTypes object exported from UIManager
// native module.
// Once new event types are registered with react it is possible to dispatch these
// events to all kind of native views.
    UIManager.genericDirectEventTypes = {
        ...UIManager.genericDirectEventTypes,
        onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
        onGestureHandlerStateChange: {
            registrationName: 'onGestureHandlerStateChange',
        },
    };
}

[osdnk]

Thanks for attaching context! I’ll try to figure out what’s going on soon

[arisupriatna14]

The same problem. I using react native version 0.54.4 react-native-gesture-handler version 1.0.9 react-navigation version 1.5.9

Can you help me, how to solve this problem. Just error in IOS, but android not error.

[Anhmike]

Do anyone still have the same issue? It is still an issue for v1.0.16. Have any contributor take time to resolve the issue for us? Thanks

[hosseinmd]

import 'react-native-gesture-handler'

this code resolved it thanks

[osdnk]

It's a duplicate of #439. I would be extremely grateful for some example how to reproduce it.

[denissb]

I still have the issue:

"react-native": "0.55.3"
"react-navigation": "^3.1.0",
"react-native-gesture-handler": "^1.1.0",

Importing in index.js as mentoned above didn't help

[hosseinmd]

did you link react-native-gesture-handler to android mainActivity.java ?

[denissb]

@hosseinmd - yes, in fact for me it happens on both iOS and Android

[krizzu]

@denissb GH 1.1.0 is not working with RN < 0.57.2, as stated in release notes:

This version requires react-native in version at least 0.57.2

Also, I've come across this issue using GH 1.0.15 with RN 0.55.4. Rolling back to 1.0.14 fixed it for me.

[anniewey]

Rollback to 1.0.12 instead as 1.0.14 is not working on Android

[krizzu]

@anniewey
Yeah, there's a bug in Android on version 1.0.14, which is fixed on 1.0.15, but has the same issue on iOS as on later versions.

Soo, to come around this, I've used patch package to apply fixes on Android on version 1.0.15.

And it's working fine now.

[sefatunckanat]

Thanks it's working on 0.55.4

"react-native-gesture-handler": "^1.0.14",
"react-navigation": "^3.3.2"

[yildiz]

I downgraded the React Native version and it worked smoothly.

"react-native": "^0.58.0",
"react-native-gesture-handler": "^1.1.0",
"react-navigation": "^3.0.9"

[Dealchan]

@brendandestefano

Try put this import in the first index.js of your application.

Like this:

import "react-native-gesture-handler";

import { AppRegistry } from "react-native";  

import App from "./src/App";

import { name as appName } from "./app.json";

it's worked for me.thanks.

[osdnk]

This issue appears to be only for helping purpose. However, it's a quite popular problem so leaving it open.

Also, remove duplicated https://github.com/kmagiera/react-native-gesture-handler/issues/439

[Mjuk-Biltvatt]

Upgrading react-native-gesture-handler from 1.0.12 to 1.1.0 solved the problem for me.

My versions:

"react-native": "0.59.0",
"react-navigation": "^3.5.1",
"react-native-gesture-handler": "^1.1.0"

Changed version number in package.json and ran rm -rf node_modules && npm install.

[ajaymore]

"react": "16.8.3",
"react-native": "0.59.2",
"react-native-gesture-handler": "^1.1.0",
"react-navigation": "^3.5.1"

None of the example are working for me, although I don't get any crash. react-navigation which depends on react-native-gesture-handler works fine though.

[tapz]

Saw this first time in iOS with the following versions. Happens when I tap the back arrow in react-navitation. Got this also with Samsung Galaxy Tab (Android 8.1.0) in my own code using TapGestureHandler. Never seen this before.

iOS 12.1.4 (iPhone X) Xcode 10.2

"react": "16.8.6", "react-native": "0.59.2", "react-native-gesture-handler": "1.1.0", "react-navigation": "3.5.1",

[carloscuesta]

I'm having this issue too:

Even when importing the library at the main index file

import 'react-native-gesture-handler'

Versions:

"react-navigation": "^3.6.1",
"react-native": "0.55.4",
"react-native-gesture-handler": "1.0.17",

[xutm]

I have the same problem and this occurs for me only in a production build with iOS.

react-native: '0.59.1' react-navigation: '3.5.1' react-native-gesture-handler: '1.1.0' react: '16.8.3'

I have a try to figure out the root cause.

Print the log console.log(UIManager.genericDirectEventTypes, '=========genericDirectEventTypes=sync==') in getNativeComponentAttributes.js

When in DEV, I can find the log.

UIManager.genericDirectEventTypes is { onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' }. onGestureHandlerStateChange: { registrationName: 'onGestureHandlerStateChange' } }.

But when in "PRODUCTION", I can find UIManager.genericDirectEventTypes is undefined.

I don't know whether or not it's related to this.

[arthurpankiewicz]

https://github.com/kmagiera/react-native-gesture-handler/issues/320#issuecomment-470845589

@Krizzu has the only solution that worked for me, thank you!

[tapz]

I only see this error with RN 0.59. With 0.58 works fine at least with debug builds.

[xutm]

On react-native 0.58.3 this occurs for me only in a production build with Android. Tried to work around it by doing the following in my codebase but it did not help. My current theory is that it is somehow related to minification of javascript which breaks the patching logic.

E: Nope, disabled minification, issue still occurs. E2: Saw the message of this commit and updated my patch accordingly. All good now :)

index.js:

import './thepatch';
import './App/index'; // AppRegistry.registerComponent in here

thepatch.js:

import { NativeModules } from 'react-native';

const { UIManager } = NativeModules;

if (UIManager) {
// Add gesture specific events to genericDirectEventTypes object exported from UIManager
// native module.
// Once new event types are registered with react it is possible to dispatch these
// events to all kind of native views.
    UIManager.genericDirectEventTypes = {
        ...UIManager.genericDirectEventTypes,
        onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
        onGestureHandlerStateChange: {
            registrationName: 'onGestureHandlerStateChange',
        },
    };
}

I fixed the issue. Thanks

[tapz]

@xutm Why is this fix needed if it's from a commit ialready merget tot the master?

[xutm]

In react-navigation export module by using get xxx(){} and react-native-gesture-handler is used in react-navigation, so it will be lazy load while it is required.

I think the issue can be done through import 'react-native-gesture-handler'.

[tapz]

@xutm So, is the lazy loading the reason for the issue? I'm using inline requires with RN 0.59. Maybe that's why I'm seeing the issue only in 0.59.

[andreus3]

Downgrading to react-native-gesture-handler 1.0.9 worked for me