react-native-gesture-handler: Unsupported top level event type "onGestureHandlerStateChange" dispatched

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 🙂

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

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 😃

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 😦

Please try to react-native-gesture-handler: 1.5.2. It seems the above issue has been fixed on ios as well as Android build. FYI, in v1.5.0, not fixed this issue.

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',
        },
    };
}

It looks like adding import 'react-native-gesture-handler' to the project’s index.js file solves the issue for me.

I could easily reproduce the error without the import, but not after adding it.

I was able to fix this by adding import 'react-native-gesture-handler' to both root index.js and my separate Routes.js file where I set up react-navigation. (It failed if I just imported it in either file only)

Thanks!

Adding import 'react-native-gesture-handler'; on the top of my root file did the trick. Thanks!

@osdnk that is fantastic! The commit mentions that it is present in 0.61-stable branch for all 0.61 releases, but your comment says for ‘RN > 0.61.2’ (which does not exist yet there is no 0.61.3 or 0.62-stable release). But people have definitely seen this in 0.61.2

Is the commit tag reference list (which includes releases people have seen the problem) wrong, meaning we’ll re-test with a 0.61.3 or a 0.62-stable release, or am I misunderstanding something else?

Sorry to bother

I added barebone reproducible repo on #820 @kmagiera along with error code, running instructions and screen cap

Just a heads up to anyone migrating to React Native 0.64.* that inlineRequires are now enabled by default in metro.config.js causing the “solution” to this issue to no longer function.

...
getTransformOptions: async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: false, // set to FALSE .. RN64 has as TRUE
  },
}),
...

Please advise if there is another solution out there… we would love to get the startup performance enhancements from enabling inlineRequires.

Original reference: https://github.com/software-mansion/react-native-gesture-handler/issues/439#issuecomment-473156743

What worked for me in the end was to put this import as the FIRST line in the root index file AND in any file that calls react-navigation’s createAppContainer method :

import 'react-native-gesture-handler';

And then this immediately after all the imports in your root index file:

// fix for https://github.com/kmagiera/react-native-gesture-handler/issues/320
if (Platform.OS === 'android') {
  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',
      },
    };
  }
}

which (thanks josecarlosrz) requires this import as well: import {AppRegistry, Platform, NativeModules} from 'react-native'

It would still be better to have it properly fixed in the repo so that these workarounds aren’t necessary.

This is not really a fix though, is it?

As others have suggested i can confirm adding import “react-native-gesture-handler” to the top of index.js works as a short term fix.

I’m running react-native ‘0.61.3’ and react-native-gesture-handler ‘1.4.1’

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

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 🙂

This worked for me on the prod build with:

“react-native”: “0.64.1”, “react-native-gesture-handler”: “1.10.3”,

but it seems really ugly and “magical” IMO.

Make sure import 'react-native-gesture-handler'; is the very first line of the index.js file. I had put it just above AppRegistry.registerComponent but below some other import statements at the top. It only worked when I had the import statement as the first line in the file.

Same, we ran into the problem after upgrading the two RNs. Adding the import to the top of our index.js solved the issue.

React Native 0.61.1 React Navigation 4.0.9 Gesture Handler 1.4.1

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.

Hello everyone! I hear that this issue has not been resolved by react-native upgrade or the library upgrade and that the workaround is necessary. I’ll be happy to investigate this issue however I’ve not experience this problem personally despite a number of different projects I use gesture-handler with.

I’ve scanned throughout the comments and couldn’t find a concrete pointers on how the issue can be reproduce. If you’ve provided some please comment again below.

Given all of that before I can dive more into this issue can someone who’d experienced the problem can provide a minimal repro example app that I can try?

Same problem only in release mode.

Enviroment:

• react-native: 0.61.1
• react-native-gesture-handler: 1.4.1

In RN0.52-RN0.55, framework will not merge UIManager.genericDirectEventTypes into every native module viewConfig, see here.

So we should inject it using following code

import UIManager from "UIManager";
for (let k in UIManager) {
  if (UIManager.hasOwnProperty(k) && UIManager[k] && UIManager[k].directEventTypes) {
    UIManager[k].directEventTypes.onGestureHandlerEvent = {
      registrationName: "onGestureHandlerEvent"
    };
    UIManager[k].directEventTypes.onGestureHandlerStateChange = {
      registrationName: "onGestureHandlerStateChange"
    };
  }
}

At the top of my index.js or app.js

This issue appeared now using:

“react-native-gesture-handler”: “^1.4.1”, “react-native”: “0.61.0-rc.0” and “react”: “16.9.0”

import 'react-native-gesture-handler'

this code resolved it thanks

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

I had the same error, in release mode (with minified and optimized JS) only, no crash in development.

Adding the import "react-native-gesture-handler";instruction before the AppRegistry.registerComponent statement in index.js did the trick.

Even though, this should not be a requirement, this has to be fixed by the team.

I guess this issue is because of index.js file , I fixed this issue by adding ON TOP in my index.js file , import ‘react-native-gesture-handler’ -> index.js HAPPY CODING 😃

If you want to use inlineRequires and don’t want to hardcode a bunch of paths

const RNGestureHandlerModule = "react-native-gesture-handler";

const preloadedModules = new Proxy(
  {},
  {
    get(_target, prop, _receiver) {
      return prop.includes(RNGestureHandlerModule);
    },
    has(_target, prop) {
      return prop.includes(RNGestureHandlerModule);
    }
  }
);

module.exports = {
  transformer: {
    getTransformOptions: () => ({
      transform: {
        inlineRequires: {
          blockList: preloadedModules
        },
        preloadedModules
      }
    })
  }
};

Would be nice if inlineRequires and preloadedModules could be a function.

We’re also experiencing the issue with RN64 and need the performance benefits of Hermes. Sounds like this issue should be reopened?

Same issue here.

• “react-native”: “0.61.2”,
• “react-navigation”: “^4.0.10”,
• “react-navigation-stack”: “1.9.3”,
• “react-native-gesture-handler”: “^1.4.1”,

import "react-native-gesture-handler" does not fix it

Crash on Android when build release

Turning off inline requires with RN 0.59 mades the issue go away for us on iOS.

“react-native-gesture-handler”: “1.1.0”, “react-navigation”: “3.6.1” “react-native”: “0.59.5”

We were also able to work around the issue by explicitly importing react-native-gestures before react-navigation gets imported.

import 'react-native-gesture-handler';

It is still crashing in iOS versions release mode. Though the crash is not there in the debug. RN = 0.61.4 Package = 1.5.0

Tried to tweak with imports and it works fine but that is not the permanent solution. It’s very easy to replicate with react-navigation. Just try to swipe to go back from a screen to previous screen on the stack.

Any idea?

It maybe should be re-opened, it is not fixed. I will assume the best of intentions though, I imagine the developers really thought it was fixed. As a maintainer of a big react-native package I can say we’re not doing this because internet points are worth anything, we’re all trying our best.

However, there is active development also, examine:

• for the crash issue https://github.com/kmagiera/react-native-gesture-handler/pull/792
• for the cancelTouches issue mentioned here https://github.com/kmagiera/react-native-gesture-handler/pull/796

So I think the right actions would be to help get those to a merge-worthy state, testing, reviewing, etc

Started getting this once upgraded to react navigation 4.0

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 🙂

This worked for me. I was facing this issue on iOS build but however I was not facing this issue in android build

"react-native": "0.65.1",
"react-native-gesture-handler": "1.10.3",

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.

can we re-opened this issue please?

Is this workaround still required with version 2.x.x? build with this config:

"react-native": "0.66.3",
"@react-navigation/material-top-tabs": "^6.0.6",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
"react-native-gesture-handler": "^2.1.0",

Seems to work fine 🤔

🎉 react-native-gesture-handler: 1.5.1 Fixed the production iOS crashes for me. 🎉 Big thanks @kmagiera, @osdnk && all involved 🥇

Our package.json included:

"react-native": "^0.61.4",
"react-native-navigation": "3.6.0",
"react-native-reanimated": "^1.4.0",
"react-native-gesture-handler": "^1.5.1",

I didn’t need to include the immediate import of react-native-gesture-handler in the index file, but it might be because I’m using the gestureHandlerRootHOC as explained here

i tried every solution. Downgrading react native gesture handler @sinhpn92 and importing package in to index file @JeremyBradshaw7 , still not working.

I have 2 projects with same react native version and gesture package version , but only one app is crashing .

how do i solve this, any thing that i’m missing in linking part?

I’d had same crashing, so I had to write import 'react-native-gesture-handler'; but after upgrading 1.5.0, there’ve been no more crashing so I deleted the line. @ react-native : 0.61.4 (I think, this is not related)

Following my and @kmagiera knowledge, this issue is no longer valid for RN > 0.61.2.

Our monkey-patching for view configs is no longer needed because we need to have our events registered BEFORE compilation, not during runtime. Otherwise, the native code related to these events won’t be generated. Thus Facebook team decided to add these events for us in the core (it’s costless).

https://github.com/facebook/react-native/commit/942de5718236ddbd1a112a2ce7adf20591949672#diff-1eaa4391573b4aa3e399dafeb401f47fR105

Codegen is part of the new React Native architecture and previously view configs have been used only for validating events from the native side. Now it’s done for us in RN core.

So if you still face the problem, update React Native.

I have the same problem with RN 0.61.2

Same issue here.

• “react-native”: “0.61.2”,
• “react-navigation”: “^4.0.10”,
• “react-navigation-stack”: “1.9.3”,
• “react-native-gesture-handler”: “^1.4.1”,

~import "react-native-gesture-handler" does not fix it~

UPDATE: it does fix it, but MUST be on App.js file on line 1. I was adding it on line 6

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

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”,

Hi,

I still have this issue, and I’ve tried all of the solutions mentioned above and a couple more.

I have an ejected Expo app, and the problem only occurs in the ‘Release’ build for iOS.

It only seems to occur when using TouchableOpacity component and then when it calls the onPress function.

Any help is appreciated as i’m blocked from progressing at the moment. Please see my lib versions below:

“@react-native-community/blur”: “^3.4.1”, “@react-native-community/datetimepicker”: “2.4.0”, “@react-native-community/netinfo”: “5.9.2”, “expo”: “^37.0.0”, “expo-ads-admob”: “~8.1.0”, “expo-av”: “~8.1.0”, “expo-constants”: “~9.0.0”, “expo-in-app-purchases”: “~8.1.0”, “expo-permissions”: “~8.1.0”, “expo-screen-orientation”: “~1.0.0”, “expo-speech”: “~8.1.0”, “expo-splash-screen”: “^0.2.3”, “expo-updates”: “^0.2.7”, “react”: “~16.13.1”, “react-dom”: “~16.13.1”, “react-native”: “~0.62.2”, “react-native-gesture-handler”: “~1.6.1”, “react-native-reanimated”: “~1.9.0”, “react-native-screens”: “~2.2.0”, “react-native-ui-lib”: “^5.5.0”, “react-native-unimodules”: “^0.9.0”, “react-native-web”: “^0.12.3”

Thanks in Advance.

You can solve this issue by adding ‘react-native-gesture-handler’ in index.js file

1. Open index.js file
2. Add this in line # 1: import ‘react-native-gesture-handler’

Now build a new aab or apk file using: gradlew buildRelease (for aab file) gradlew assembleRelease (for apk file)

Install it to your Android Phone. Hope so it will work.

The only way to resolve this for me in RN 0.61.2 with RNGH 1.4.1 was to wrap the App root component in gestureHandlerRootHOC as suggested by kmagiera here: https://github.com/react-native-community/releases/issues/140#issuecomment-532819601 e.g.: export default gestureHandlerRootHOC(App);

This started happening on latest RN 0.61.2, when I swipe back with react-navigation@4. As well any other place, where I use react-native-gesture-handler.

On prod build, It says: Invariant Violation: Unsupported top level event type "onGestureHandlerStateChange" dispatched and in DEV mode it doesn’t crash app, but just shows warning: [RCTRootView cancelTouches] is deprecated and will be deleted soon.

---

There is close PR related to RCTRootView cancelTouches -> https://github.com/kmagiera/react-native-gesture-handler/pull/657

---

UPDATE So yeah, I tried to apply PR above, and it fixed my issue with react-navigation. Although it’s bit hacky way, since it breaks other behaviour 🤓 EASIER FIX Add this to first line of index.js file in root folder of project:

import 'react-native-gesture-handler';

I was on react-native 0.61.1 when this was happening to me - see comments above

Strangely this had never bitten me before even though it seems long-standing? But for react-native 0.61.1 and react-native-gesture-handler 1.4.1 I needed the import before react-navigation 4.0.9 was referenced, whereas with the same versions except react-native 0.60.6 I did not need it 🤷‍♂️ - the workaround does seem to work though.

Worked by importing it at the upper level. Odd bug

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

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

Hello!

Added import "react-native-gesture-handler"; and solved my problem. I was having this issue only on release, and who still has the issue after add the import, try to clean the cache of the apk. I had this problem and stook on it after the add because of the cache, when I generate a clean apk, the problem was solved =)

Still getting this on 0.61.3 and 1.5.0 The import workaround makes no difference and nor has any other suggestion that I’ve seen. I don’t think I could quickly provide a minimal repro but I’ll share anything I do find

Can we have this issue reopened or get an “official” solution? I’m not sure why it was closed, the majority of people facing this issue are already on the latest version of RN. As for the import in index.js:

Adding the import to index.js works for me as well but does anyone know why this fix works? I’m just hesitant to add it when I don’t know what problem it’s solving in case it introduces any other issues.

We are experiencing the same issue. The app crashes with the same error since upgrading to react-native 0.61.1. I tried the import 'react-native-gesture-handler fix, but it is still crashing

Besides add import 'react-native-gesture-handler', also need update react-native-gesture-handler to “^1.4.1”.

I’m hitting this too on 0.61.2, only in the release build on iOS (haven’t tried Android). None of the above remedies have worked for me (details below).

Not sure when it’s happening for others, but for me it happens only in certain instances, like tapping the back button in a stack navigator, or presenting a modal. Tab navigator seems to render and navigate just fine (I imagine because it doesn’t really use react-native-gesture-handler?)

My upgrade path was 0.60.5 -> 0.61.1 -> 0.61.2, using the Upgrade Tool each time.

I’ve cleared all caches (Xcode derived data, node_modules, etc)

Relevant dependencies:

"react-native": "0.61.2",
"react-native-gesture-handler": "^1.3.0",
"react-navigation": "^3.11.1",

Importing react-native-gesture-handler as the first line of index.js does not fix the problem, nor does wrapping my app component in gestureHandlerRootHOC, though I may be doing it wrong. This is what my index.js looks like:

import 'react-native-gesture-handler';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

Hopefully this is helpful in some way, I’ll keep investigating.

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

Super important to keep this order

Place the import at the top before you’ve imported from App otherwise the Handler can’t see it in production apk (Android)

Adding the import to index.js works for me as well but does anyone know why this fix works? I’m just hesitant to add it when I don’t know what problem it’s solving in case it introduces any other issues.

@mikehardy Just checking if this is just “accepted” or not. I understand the low priority to find the cause given the relatively simple workaround.

If there are pointers I might take a look.

I saw this error only on bundleRelease. import ‘react-native-gesture-handler’ in my index.js fix my problem.

Thank you everyone.

    "react": "16.10.1",
    "react-native": "0.61.2",
    "react-native-gesture-handler": "^1.4.1",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.2.2",

and

+  import 'react-native-gesture-handler'
   import {AppRegistry} from 'react-native';
   import App from './App';
   import {name as appName} from './app.json';

Worked perfectly. Thank you @balthazar

Same issue and it didn’t happen before. Happened after updating react navigation

@jetzhliu my react-native version is 0.55.4,import ‘react-native-gesture-handler’ is not work for me,but your method is work for me.thank you very much!

oh ya it works now, i just re create brand new RN app, and it work now 😃 @NicholasLoh

I had this problem as well. The app crashed in release mode when opening the drawer menu. Everything else worked fine. Fixed with the following suggestions stated above; import ‘react-native-gesture-handler’ at the top of app.js and index.js Updating react-native-gesture-handler to 1.5.2

Thanks @Marinaarimany for getting back to me… looks like a big debugging session is coming up haha.

🎉 react-native-gesture-handler: 1.5.1 Fixed the production iOS crashes for me. 🎉 Big thanks @kmagiera, @osdnk && all involved 🥇 Our package.json included:

"react-native": "^0.61.4",
"react-native-navigation": "3.6.0",
"react-native-reanimated": "^1.4.0",
"react-native-gesture-handler": "^1.5.1",

I didn’t need to include the immediate import of react-native-gesture-handler in the index file, but it might be because I’m using the gestureHandlerRootHOC as explained here

As mentioned above, in my case v1.5.0 has no crash issue with IOS production build. But I recently knew that android production build still crashes without ‘import ~’ in index.js at v1.5.1.

@quizzy Have you ever checked android build also?

@cristianoccazinsp It’s documented at the end of this doc : https://reactnavigation.org/docs/en/getting-started.html#install-into-an-existing-project 😉

At first I didn’t see it 😄

Hello 😃

My app was crashing in production too.

Added import "react-native-gesture-handler"; in top of my root “index.js” solves my problems

My dependencies :

{
  "react-native": "0.61.4",
  "react-native-gesture-handler": "1.5.0",
  "react-native-screens": "^1.0.0-alpha.23",
  "react-navigation": "4.0.10",
  "react-navigation-backhandler": "^1.3.2",
  "react-navigation-stack": "^1.10.3",
  "react-navigation-tabs": "^2.6.0",
}

I followed this recommendations : https://reactnavigation.org/docs/en/getting-started.html#installing-dependencies-into-a-bare-react-native-project

yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

Then add the following at the top of your entry file, such as index.js or App.js: import 'react-native-gesture-handler'

What is the root casue of this problem, is it possible to fix it?

After implementing suggestions, Still crash on: RN 0.61.4 react-native-gesture-handler 1.4.1/1.5.0

Fixed. Just in case anyone had this issue, I moved the import 'react-native-gesture-handler'; one level deeper at my AppContainer which has my </Provider> and </PersistGate>.

Note: i’m using "react-native-router-flux": "4.2.0-beta.2",

Based on @Jyrno42 answer I started digging into the code from the event registering and came with my own patch:

import { NativeModules } from 'react-native';

const { UIManager } = NativeModules;

if (UIManager) {
  const {
    // setJSResponder: oldSetJSResponder = () => {},
    // clearJSResponder: oldClearJSResponder = () => {},
    getConstants: oldGetConstants = () => ({}),
  } = UIManager;

  const customGHEventsConfig = {
    onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
    onGestureHandlerStateChange: {
      registrationName: 'onGestureHandlerStateChange',
    },
  };

  UIManager.getConstants = () => {
    const constants = oldGetConstants();

    return {
      ...constants,
      genericDirectEventTypes: {
        ...constants.genericDirectEventTypes,
        ...customGHEventsConfig,
      },
    };
  };

  UIManager.genericDirectEventTypes = {
    ...UIManager.genericDirectEventTypes,
    ...customGHEventsConfig,
  };
}

and it is the first import on the main index.js file

This fixes the crash for me, while still being able to use other libraries dependent on the gestures such as mapbox, hopefully it help someone who is also having issues.

@NicholasIoanJones i was facing the same issue with react-native ‘0.61.3’ and react-native-gesture-handler ‘1.5.0’ for both, iOS and Android.

Importing ‘react-native-gesture-handler’ at index.js made it for iOS but not for Android, until i found this happy solution (courtesy of Snehal Agrawal): https://aboutreact.com/swipe-gestures-not-working-in-android/

Simply go to you MainActivity.java file ( /android/app/src/main/java/com/yourproject/MainActivity.java ), add the following lines to your imports:

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

and finally add this method inside the MainActivity class:

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

---

This is my whole MainActivity file, just in case:

package com.project;

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 "Project";
  }

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

Hope it helped

Following my and @kmagiera knowledge, this issue is no longer valid for RN > 0.61.2. RN 0.61.3 is released. Apparently, it does not include the fix, since the issue is still reproducible there.

I actually mis-linked the second one anyway 😉, for cancelTouches deprecation #796 (and edited above)

@mikehardy completely agree! Apologies if I came off as impatient, did not mean that at all. Repos like this are the reason our projects are able to be as great as they are, especially thanks to maintainers like yourself. Wasn’t aware of #792, I’ll definitely help with that. 😄

Appears you may need react-native-gesture-handler 1.4.0+, upgrading from 1.3.0 to 1.4.1 solved it on my side.

Update: I upgraded to the latest versions of things:

    "react-native": "0.61.2",
    "react-navigation": "^4.0.10",
    "react-native-gesture-handler": "^1.4.1",

And that appears to have fixed the issue (I still have the import statement and gestureHandlerHOC in place) 👍 but there may be issues with projects using the versions I posted previously

Have same error, in release mode only, no crash in dev.

Adding the import "react-native-gesture-handler";

Before AppRegistry.registerComponent did the trick

Thanks for this clear information, it fixed our problem!

Adding on to people who stumble here from Google, I stupidly followed only half of @LuisRodriguezLD’s advice.

I had an AppContainer.tsx file where react-navigation’s AppContainer was declared - it was then used in my main App.js file.

Only adding it to AppContainer.tsx still produced the error - you need to add it wherever you use the AppContainer as well!

For react-native: 0.60 and react-native-gesture-handler: 1.4.1 I’ve fixed the problem by:

• linking manually react-native-gesture-handler and react-native-reanimated.
• Adding an <Animated.View> as first child of a gesture handler component:

import React from 'react';
import {SafeAreaView} from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

const {event, Value} = Animated;

export default (App = () => {
  const translationX = new Value(0);
  const onGestureEvent = event([{nativeEvent: {translationX}}]);
  return (
    <SafeAreaView>
      <PanGestureHandler
        onHandlerStateChange={onGestureEvent}
        onGestureEvent={onGestureEvent}>
        <Animated.View style={{flex: 1, width: '100%', padding: 10}}>
          <Animated.View
            style={{
              width: 100,
              height: 50,
              backgroundColor: 'purple',
              borderRadius: 5,
              transform: [{translateX: translationX}],
            }}
          />
        </Animated.View>
      </PanGestureHandler>
    </SafeAreaView>
  );
});

Same issue here with Expo SDK 33 when closing Drawer Navigator by touching outside of drawer navigator area.

Expo SDK 33 using…

"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-navigation": "^3.11.0",

Fixed by adding react-native-gesture-handler directly:

"react-native-gesture-handler": "^1.2.2"

and importing in app.js:

import 'react-native-gesture-handler';

In my case, following step worked upgraded “react-native-gesture-handler” to 1.3.0 from “1.0.9” and my "react-native" version is “0.59.0”

I just upgraded my app from 0.57.x to 0.59.10 and got this issue again when touching react-navigation UI. Clearing native and js cache didn’t help. However adding import 'react-native-gesture-handler'; to the top of root index.js fixed it. rn 0.59 is using inline requires so it might be the reason. I am using 1.3.0

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",

Thanks it’s working on 0.55.4

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