Repository navigation
[Touchable* + Text] "Touchable cannot transition" error about 20% of the time #1693
Description
Hi I am not really sure if this is an issue or not, but I thought i posted here so if anyone have the same problem, they know what was going on.
Apparently if you render some touchablebutton to be like this
render: function() {
return (
<View style={styles.contentContainer}>
<TouchableOpacity onPress={this._onPressQRCode}>
<Text style={styles.scanButtonText}>Click To Start Scanning</Text>
</TouchableOpacity>
</View>
);
},
you will run into this error very frequently
Error: Touchable cannot transition from `RESPONDER_INACTIVE_PRESS_IN` to `LONG_PRESS_DETECTED` for responder `.r[1]{TOP_LEVEL}[0].0.0.$nav2.0.1`
stack:
TouchableMixin._receiveSignal index.ios.bundle:33197
TouchableMixin._handleLongDelay index.ios.bundle:33176
JSTimers.setTimeout.JSTimersExecution.callbacks.(anonymous index.ios.bundle:8273
JSTimersExecution.callTimer index.ios.bundle:8062
Object.JSTimersExecution.callTimers index.ios.bundle:8085
jsCall index.ios.bundle:7511
MessageQueueMixin._callFunction index.ios.bundle:7774
<unknown> index.ios.bundle:7801
URL: undefined
line: undefined
message: Touchable cannot transition from `RESPONDER_INACTIVE_PRESS_IN` to `LONG_PRESS_DETECTED` for responder `.r[1]{TOP_LEVEL}[0].0.0.$nav2.0.1`
To solve the problem just wrap the text inside the
touchableopacity/touchablehighlight with a child view like this
render: function() {
return (
<View style={styles.contentContainer}>
<TouchableOpacity onPress={this._onPressQRCode}>
<View>
<Text style={styles.scanButtonText}>Click To Start Scanning</Text>
</View>
</TouchableOpacity>
</View>
);
and seems to not run into that error anymore.
Reacted by Sibelius Seraphini, Galen Han, Jesús Darío, Dylan Pinn, Damien, Donovan Charpin, Sonny Lazuardi, Mindaugas Jacionis, Nikola Lukic, Ben Clayton and 62 more
Reacted by Shawn
Activity
[-]when clicked on a TouchableOpacity/Highlight it will frequently throw an touchable cannot transition error[/-][+]when clicked on a TouchableOpacity/Highlight it will frequently throw a touchable cannot transition error[/+][-]when clicked on a TouchableOpacity/Highlight it will frequently throw a touchable cannot transition error[/-][+][Touchable* + Text] "Touchable cannot transition" error about 10% of the time[/+]arypurnomoz commentedon Jun 20, 2015
+1
[-][Touchable* + Text] "Touchable cannot transition" error about 10% of the time[/-][+][Touchable* + Text] "Touchable cannot transition" error about 20% of the time[/+]gkrimer commentedon Jun 23, 2015
This happens for me with regularity but only when running on the device and debugging in Chrome. If I run on the device without debugging this error does not occur. Anyone seeing the same behavior?
brentvatne commentedon Jun 23, 2015
@spicyj - assigned you because it seems related to responders 😄
sophiebits commentedon Jun 25, 2015
I don't actually know anything about this stuff… maybe @vjeux does.
philharton commentedon Jul 17, 2015
I've been getting the same error with a TouchableHighlight wrapping an Image, so it doesn't seem related to Text. I've only seen this while debugging in Chrome thus far but will update if that changes.
piyushchauhan2011 commentedon Jul 28, 2015
It is same when i'm wrapping the
<Icon />fromreact-native-icons. I'm really stressed out with the production app we are building and the error keeps coming up 😢piyushchauhan2011 commentedon Jul 28, 2015
@brentvatne @vjeux @spicyj The same error comes up when we try to use inspect element mode. It seems the elements there are also
TouchableHighlightand when we press on one of them in random order the same error comes up. So I think this is really an issue needs to be handled immediately.piyushchauhan2011 commentedon Aug 3, 2015
??
palmovitsch commentedon Aug 3, 2015
I had the same issue with Image surrounded by TouchableHighlight. Also just coming up on a real device while debugging in Chrome. Thanks uoroaix. Surrounding the Image with View solved the problem.
107 remaining items
japser36 commentedon Jan 30, 2020
I can confirm that this issue is still happening on RN 0.60.3 on Android, Samsung Galaxy S7
anastely commentedon Feb 23, 2020
+1, xiaomi redmi 5 plus 🤷♂️
simonkincaidkintronix commentedon Aug 16, 2020
Hi All
I had the same annoying error during debugging on a v0.57 app but I managed to hack/fix it.
This error occurs in
node_modules/react-native/Libraries/Components/Touchable/touchable.js
For me, you get
console.error( 'Attempted to transition from state' +curState +
'
to' +States.RESPONDER_ACTIVE_LONG_PRESS_IN +
'
, which is not supported. This is ' + 'most likely due toTouchable.longPressDelayTimeoutnot being cancelled.', );on line 666 of all places!
This only gets called by touchableHandleResponderGrant()
So I just decided to remove/comment out the lines that called it:
this.longPressDelayTimeout = setTimeout( this._handleLongDelay.bind(this, e), longDelayMS + delayMS, );Yes, this is a hack but I wanted to debug properly so I needed that error to go away.
If your app requires long presses I assume something will break, but then I think the new pressables in RN will supercede this anyway.
Hope this helps some people! o/
chore(stalebot): set the stale bot to start from oldest (#36337)
github-actions commentedon Mar 1, 2023
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
fabOnReact commentedon Jan 31, 2024
Anybody reproduces this issue on 0.73? I will implement the solution discussed #1693 (comment) Thanks
teivienn commentedon Feb 28, 2024
I think this problem is obsolete and can be closed. I can confirm with 100% certainty that this problem does not occur, and I have not encountered anything like this since version 60
shubhamguptadream11 commentedon Oct 15, 2024
There hasn't been any recent activity on this issue for a while. Additionally, recent conversations suggest that it is no longer reproducible. Based on the findings shared above, it seems to occur mostly while debugging on Chrome.
I am closing this issue for now.
If anyone experiences this issue again, please feel free to reopen it or create a new issue with a valid reproducer using this template and steps to reproduce the problem.