[Touchable* + Text] "Touchable cannot transition" error about 20% of the time

[uoroaix]

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.

[pacozaa]

+1

[hongbhuang]

+1

[tmehta2442]

I'm not sure if this will help, but I had the same error message (red box of death) that would sometimes pop up on my emulator and always cause my physical device to show a blank page.

I wasn't getting the log information needed via my emulator, so I realized I could get more from plugging in my device and logging out everything that is going on via Android Studio's "Logcat". In there I found that there was an issue with the way I was using componentDidMount (specifically "E/ReactNativeJS: TypeError: undefined is not an object (evaluating 'a.componentDidMount.bind')" ).

While your error may be different, seeing a very verbose log from your device may prove to be beneficial in narrowing down the issue :)

[Salakar]

Hey, everyone, this looks like this a developer experience issue and is a bit of a low priority for us.

We are probably not going to tackle this soon, but; the ideal solution most likely would be that this should be a warning here instead of a thrown exception. We'd encourage sending a pull request for this issue.

[japser36]

I can confirm that this issue is still happening on RN 0.60.3 on Android, Samsung Galaxy S7

[anastely]

I can confirm that this issue is still happening on RN 0.60.3 on Android, Samsung Galaxy S7

+1, xiaomi redmi 5 plus 🤷‍♂️

[simonkincaidkintronix]

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/

[github-actions[bot]]

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]

Anybody reproduces this issue on 0.73? I will implement the solution discussed https://github.com/facebook/react-native/issues/1693#issuecomment-474328006 Thanks

[teivienn]

Anybody reproduces this issue on 0.73? I will implement the solution discussed #1693 (comment) Thanks

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]

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.