Unsupported top level event type "onGestureHandlerStateChange" dispatched

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

[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 🙂

[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";