[0.61.0-rc.0] `-[RCTRootView cancelTouches]` is deprecated and will be deleted soon.

[Johan-dutoit]

New warning in the latest React Native RC.

Relevant code:

https://github.com/kmagiera/react-native-gesture-handler/blob/8f0b33f5e93fe71b968da3a51c2f6d91a0f91996/ios/RNGestureHandlerManager.m#L162

[shlaikov]

@Johan-dutoit did you manage to eliminate the warning? I do not have swipe left and right on the iOS. Perhaps this is the reason.

[Johan-dutoit]

I just silenced the warning for now and continued using it.

[mikehardy]

I just noticed this too. For people new to react-native that don't know how to silence, I have this in my bootstrap so I can work through issues in the upstream repos (like this one). Now that I've subscribed to this issue so I'll get updates, I add an entry for silencing like so:

YellowBox.ignoreWarnings([
  //'Warning: Async Storage has been extracted',
  'Battery state',
  'componentWillMount',
  'componentWillUpdate',
  'componentWillReceiveProps',
  '[location] ERROR - 0',
  'Warning: DatePickerAndroid', // will be fixed with https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/262
  'RCTRootView cancelTouches', // https://github.com/kmagiera/react-native-gesture-handler/issues/746
]);

cheers

[Under-Warz]

it's good to silent the warning, but it's better when it's fixed ;)

[mikehardy]

Oh absolutely @Under-Warz ! Just saying (as a person that maintains some modules) that I wasn't prepared to dive in and PR myself, and it seems like @Johan-dutoit has already provided the needed details, so in the absence of effort from myself I wasn't going to moan about it ;-). Maybe as the deprecation end time / API removal gets closer either I or someone else will go for the bonus internet points and propose a fix via a PR here

[r0b0t3d]

There is the PR but closed https://github.com/kmagiera/react-native-gesture-handler/pull/657 Related commit https://github.com/facebook/react-native/commit/36307d87e1974aff1abac598da2fd11c4e8e23c1

[m4rcoperuano]

I'm noticing that this caused crashes on iOS though (when running on a release variant. Anyone else countered this issue?

[cayodonatti]

I had some crashes too. Adding import 'react-native-gesture-handler' at the top of index.js solved it for me, despite some inconsistences that arose from the drawer component.

[perlo27]

I'm getting this error when focusing TextInput, and the app freezes after that.

[m4rcoperuano]

The crash was resolved for me by @cayodonatti suggestion. import 'react-native-gesture-handler' at the very top of your index.js

The cancelTouch thing, i just added it to the ignore warning list for now until RN fixes it. No more issues here. Sorry for your freezing error perlo. I wonder if its due to another issue? I thought the cancelTouches warning was causing my app to crash. But in the end it was due to that react-native-gesture-handler not being in my index.js file

[perlo27]

I've tried to add import to index.js, but it doesn't help Probably it's some other issue, will try to investigate thanks for response anyways!

[cayodonatti]

As far as I've looked into it, the two things are not directly related. It seems that the cancelTouches event deprecation comes from RN core, so I've also added it to ignored warnings. This might prove to be a problem in a future release if the event is in fact removed.
The import thingy was also not really a mistake in your part, the docs do not state it as needed and it doesn't really make sense since the components are imported individually. I got the hint from an old closed issue in this repo.
Either the docs need to be update or this is really a bug

[perlo27]

Yes it's completely separate issue sorry for the confusion

[betoharres]

I'm having this problem when working with react-native-maps. This error stops the map from working properly on iOS; not sure why but the map becomes incredibly unresponsive, and funny enough, I can only move the map on two tiny spots on the screen.

Every time I try to drag the map, it keep throwing the [RCTRootView cancelTouches] warning, and it cancels the dragging.

:(

System:
    OS: Linux 5.1 Arch Linux undefined
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 2.63 GB / 15.59 GB
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 11.15.0 - /usr/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.10.0 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 26.0.3, 28.0.3, 29.0.0
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.1 => 0.61.1
  npmGlobalPackages:
    react-native-cli: 2.0.1

Edit: works fine on Android. ( No warnings too )

[wesleynfreitas]

I try put

1 - import 'react-native-gesture-handler' at the top of index.js 2 - YellowBox.ignoreWarnings([ 'RCTRootView cancelTouches' ]);

And don't works. Any news about the solution?

[osmanyz]

Hi guys, I have same error.

[torcoste]

I try put

1 - import 'react-native-gesture-handler' at the top of index.js 2 - YellowBox.ignoreWarnings([ 'RCTRootView cancelTouches' ]);

And don't works. Any news about the solution?

@wesleynfreitas That's weird. Try this one:

YellowBox.ignoreWarnings([
  '`-[RCTRootView cancelTouches]` is deprecated and will be deleted soon.', // https://github.com/kmagiera/react-native-gesture-handler/issues/746
]);

Do you have crash or warning?

[ghost]

I am using RN 0.61.2 and adding import 'react-native-gesture-handler'; to the index.js top can fix it.

[quizzy]

I'm getting crashes in release builds too 😞 react-native: 0.61.0 react-native-gesture-handler: 1.4.1 react-native-navigation: 3.2.0

On the simulator in dev build, the warnings appear, when using gestures, but no crashes. I tried adding import 'react-native-gesture-handler' at the top of my index.ios.js (i.e. require('react-native-gesture-handler') but this doesn't fix the crash for me.

gestureHandlerRootHOC is already being used when calling Navigation.registerComponent as suggested by the docs (was working before the upgrade to react-native 0.61.

Any other suggestions?

(Crash happens on iOS only, android is fine).

[David-Melo]

@quizzy @donaldkeung @wesleynfreitas This is my main index.js showing how i was able to get the warning suppressed. I have not tried to run on a device so I have not experienced any crashes.

[quizzy]

Thanks @David-Melo - I can suppress the warning, but my main concern is the crashing on iOS releases.

fyi - it looks like you have a typo in your ignoreWarnings. 'CTRootView cancelTouches' should be RCTRootView cancelTouches.

[tranthienhau]

Add 2 line at top your index.js import {YellowBox} from 'react-native'; YellowBox.ignoreWarnings([ '-[RCTRootView cancelTouches] is deprecated and will be deleted soon.', ]);

Working!!!

[kidmysoul]

@perlo27 hey, how did you fix you issue on textinput freeze ? I have the same issue too.

Oh... I found it : https://github.com/facebook/react-native/issues/26707

[perlo27]

@kidmysoul It kinda works with new xcode, also erasing simulator settings and content helps

[alesdvorakcz]

Disabling error is nice but in release it still crashes. Is there any workaround for that? I tried importing react-native-gesture-handler at top level index.js but without any effect.

[JuanCamilo0809]

I'm getting crashes in release builds too 😞 react-native: 0.61.0 react-native-gesture-handler: 1.4.1 react-native-navigation: 3.2.0

On the simulator in dev build, the warnings appear, when using gestures, but no crashes. I tried adding import 'react-native-gesture-handler' at the top of my index.ios.js (i.e. require('react-native-gesture-handler') but this doesn't fix the crash for me.

gestureHandlerRootHOC is already being used when calling Navigation.registerComponent as suggested by the docs (was working before the upgrade to react-native 0.61.

Any other suggestions?

(Crash happens on iOS only, android is fine).

I have the same probelm, I am using: "react": "16.9.0", "react-native": "0.61.2", "react-native-gesture-handler": "^1.4.1", "react-native-reanimated": "^1.3.0", "react-native-screens": "^1.0.0-alpha.23", "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.2.2", "react-navigation-stack": "^1.9.4",

When I test in emulator only show the alert, but in production from appstore, the application carsh.

Thanks for all.

[swingywc]

I am still developing my app and didn't release it to production yet.

I only get this yellow box warning when focusing the <TextInput /> component which inside react-navigation-stack's navigator, while the other situation is fine. You can read more details of my situation here to see any difference with yours: react-navigation/stack#274.

I have tried adding import 'react-native-gesture-handler' at the top of the index.js file which at the root level but it's still not working.

I cannot agree to use the method to ignore yellow box warning as it should be a real problem which blocks the way to release the app. Hoping someone can find a solution to fix this error.

[zaynv]

@JuanCamilo0809 did you test the release build on simulator or only the debug build? Do you mean that even if release build works on Simulator, it can still fail when downloaded from app store? That is scary :(

[mikehardy]

796 is in progress I think, to just fix this. But @zaynv I would never trust a build I had only checked on the Simulator. The Android Emulators are full VMs and give you a good idea things are okay but the Simulator is a completely different style of simulation. I've had release builds that only failed on devices

[purnomoeko]

I found a good solution for this if you encountered in ios 13 simulator https://forums.developer.apple.com/thread/122972

It could be a temporary fix, but I found it helpful.

[klosowsk]

Same here, it works for android but not for IOS. Even when I do:

`import 'react-native-gesture-handler';`
... #### ...
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-maps": "^0.26.1",
"react-native-reanimated": "^1.3.0",
"react-native-gesture-handler": "^1.4.1",

The YellowBox works, but it crashes the app in production, so it's not a valid solution, any updates?

[mehulmpt]

+1

Crashes for me too on production (iOS/RN 0.61.2). My code:

require('react-native-gesture-handler')
const {gestureHandlerRootHOC} = require('react-native-gesture-handler')
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App))

Any fix?

[jjv360]

Hi, this is crashing for me on iOS Release build too, also react-native 0.61.2 and react-native-gesture-handler 1.4.1.

Adding import 'react-native-gesture-handler' to the top of my index.js appears to have fixed it.

Here are the crash details:

*** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Invariant Violation: Unsupported top level event type "onGestureHandlerStateChange" dispatched', reason: 'Unhandled JS Exception: Invariant Violation: Unsupported top level event type "onGestureHandlerStateChange" dispatched

[zaynv]

Is this something that can be tested before an app is published to the app store? Would doing a release build and then manually installing the build onto a physical device be enough to test it or is this a crash that only happens when the app is downloaded from the store?

[mikehardy]

For me it was crashing on local release builds on physical devices reproducibly, especially when closing a drawer

[swingywc]

For anyone facing this problem, @osdnk and @kmagiera have already fixed this issue and pushed a new version v1.5.0. You can now fix this error by updating the package.json with following:

"react-native-gesture-handler": "^1.5.0",

and npm install again. Cheers!

[jsancho]

For anyone facing this problem, @osdnk and @kmagiera have already fixed this issue and pushed a new version v1.5.0. You can now fix this error by updating the package.json with following:

"react-native-gesture-handler": "^1.5.0",

and npm install again. Cheers!

Sorry to say this hasn't worked for me.

I've upgraded to 1.5.0 & done a full clean release build. It keeps crashing on iOS

What works as a temporary fix is the suggestion from @jjv360

Adding import 'react-native-gesture-handler' to the top of my index.js appears to have fixed it.

[mikehardy]

@jsancho this may be conflating issues. The title of this one is for deprecated cancelTouches.

I think you are thinking of #320 (incorrectly closed I think) with PR in progress #792

[leosena777]

@jsancho @mikehardy I just upgraded to version 1.5.0 and the yellowbox warning is gone. Looks like it's ok: D

Note: Remember to update the ios folder pods and rebuild the project.

[mikehardy]

Indeed - I just went through it myself and hadn't come back here yet, but I was able to remove my yellow-box ignore line for this issue. I believe it can be closed now with 1.5.0

Still working through #792 / #320 but as I mentioned above they are separate

[superguineapig]

EDIT: confirmed v1.5.0 is working after performing a deep clean of local dev env as suggested in https://github.com/kmagiera/react-native-gesture-handler/issues/746#issuecomment-548196170

@mikehardy @leosena777 I'm still seeing the yellowbox warning with 1.5.0 on iOS sim

Have deleted node_modules, yarn.lock, Podfile.lock, and Pods did a full yarn install and pod install as well as reset simulator instances.

Perhaps I still don't have the magic combination of deps. How do yours compare with these?:

"react": "16.9.0",
"react-native": "0.61.3",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "^1.0.0-alpha.23",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.5.6",

Note: warning is generated when either tapping outside of a focused TextInput, or tapping outside of an open react navigation drawer to dismiss it.

Note2: adding import 'react-native-gesture-handler' has no apparent effect either. Checked just in case.

Thanks for reading!

[mikehardy]

I tested it on iOS, by tapping outside a navigator to dismiss it. It's gone. I suspect you still have dirty DerivedData or something - the caching on iOS builds is brutal. Do the full clean with npx react-native-clean-project and see if that gets you the behavior you want. Just moving to 1.5.0 of this package should be enough (assuming it actually takes effect as intended)

[jsancho]

792

you're 100% right on this, sorry I mixed up things by having too many tabs opened! Now tracking the PR you mentioned, thanks @mikehardy

[tomasf10]

@jsancho @mikehardy I just upgraded to version 1.5.0 and the yellowbox warning is gone. Looks like it's ok: D

Note: Remember to update the ios folder pods and rebuild the project.

It worked for me. Thanks! These are the steps I did:

1. Upgrade react-native-gesture-handler in terminal. So I got v1.5.0
2. Went to the iOS folder to update the pods: pod install
3. Delete the build folder and delete the app on the simulator.
4. Back to terminal: cd .. -> react-native run-ios and the alert was gone.

[superguineapig]

https://github.com/kmagiera/react-native-gesture-handler/issues/746#issuecomment-548196170

@mikehardy Yep, I was indeed stuck in cache-land. A deep clean seems to have worked. v1.5.0 fix confirmed. Thanks for the info!

I suspect the culprit was the ios/build dir in my case. I typically clean it when running builds via XCode. This time I was doing a CLI build and didn't think about it. Apologies for noise in the thread.

[mikehardy]

Great - sounds like we're 100% confirmed working then on the deprecation fix so far @kmagiera - nice!

[markozxuu]

It had the same problem but it updated the package and it was fixed 🙏 😄

[Dunky45]

My app still crashes whenever I make any gesture based move. I have tried importing at top of index.js, upgrading to 1.5.0, clean building and still nothing. Happens only in release version on iOS :-(

EDIT: OK finally got it!!! Some steps were not obvious to me. At top of index.js also add import { gestureHandlerRootHOC } from 'react-native-gesture-handler'; and also do this AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

[scarlac]

For those trying out gestureHandlerRootHOC - it literally does nothing on iOS. It's a wrapper function returns the same component, unchanged.

Please upgrade to version 1.5.0 or later. This issue was fixed in this commit (although not clearly mentioned in the changelog).

I think it's fair to close this issue now, @Johan-dutoit ?

[jakub-gonet]

Seems resolved.