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

[arypurnomoz]

+1

[gkrimer]

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]

@spicyj - assigned you because it seems related to responders 😄

[sophiebits]

I don't actually know anything about this stuff… maybe @vjeux does.

[philharton]

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]

It is same when i'm wrapping the <Icon /> from react-native-icons. I'm really stressed out with the production app we are building and the error keeps coming up 😢

[piyushchauhan2011]

@brentvatne @vjeux @spicyj The same error comes up when we try to use inspect element mode. It seems the elements there are also TouchableHighlight and 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]

??

[palmovitsch]

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.

[ilansas]

Do we have an official fix or explanation ? This error is so annoying !

[aleclarson]

Any update on this, @vjeux? The error message is cryptic and the stack trace is useless to us.

[piyushchauhan2011]

👍

[vjeux]

No update sorry, if anyone of you can investigate what is happening and figure out if you can make a fix that would be awesome!

[deanmcpherson]

For reference, I was seeing a heap of these warnings, and it turned out I had removed the LaunchScreen from the project (also fixed #2018 for me). No idea why the LaunchScreen would be so important, but it fixed if for me.

[satya164]

Also happening on Android, real device.

[ghost]

Seeing this too on Nexus 6 + Chromium debugging. App is just a very simple test of Navigator, and it works without debugging, though route transitions are sluggish. As soon as I debug it, I get a red screen of death with the above message.

[satya164]

@RoryHunter Check https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions for the transitions issue

[kanerogers]

Encountered this same issue:

• On iOS
• Real device (iPhone 6 Plus)
• Debugging in Chrome.

Only started happening to me this morning, but went through the following steps to resolve it:

1. Wrapping text in a view (as mentioned above) - no success.
2. Checking out to an earlier revision - no success.
3. Cleaning project, quitting XCode, Chrome, etc - no success.
4. Restarted device, re-opened app with inspector enabled - no success.
5. Disabled inspector after restart - issue resolved.

Given that the restart and some further fiddling resolved the issue, could this be memory related?

Here's further details:

Stack Trace

Error: Touchable cannot transition from `RESPONDER_INACTIVE_PRESS_IN` to `LONG_PRESS_DETECTED` for responder `.r[1]{TOP_LEVEL}[0].2.1.0.1.0`
 stack: 
  TouchableMixin._receiveSignal           index.ios.bundle?…:41098
  TouchableMixin._handleLongDelay         index.ios.bundle?…:41077
  JSTimersExecution.callbacks.(anonymous  index.ios.bundle?…:6158
  JSTimersExecution.callTimer             index.ios.bundle?…:5942
  Object.JSTimersExecution.callTimers     index.ios.bundle?…:5965
  MessageQueue.__callFunction             index.ios.bundle?…:5574
  <unknown>                               index.ios.bundle?…:5512
  guard                                   index.ios.bundle?…:5467
  <unknown>                               index.ios.bundle?…:5512
 URL: undefined
 line: undefined
 message: Touchable cannot transition from `RESPONDER_INACTIVE_PRESS_IN` to `LONG_PRESS_DETECTED` for responder `.r[1]{TOP_LEVEL}[0].2.1.0.1.0`

Component source:

      <TouchableHighlight
        style={styles.container}
        underlayColor='#eee'
        onPress={this.props.handler}>

        <View style={styles.container}>
          <View style={styles.label}>
            <Text style={styles.labelText}>{this.props.label}</Text>
          </View>
          <View style={styles.icon}>
            <Icon name={this.props.icon} size={60} color="green" />
          </View>
        </View>

      </TouchableHighlight>

Inspector screenshot:

Hope any of this helps!

[JAStanton]

+1 I have been getting this a lot lately.

[piyushchauhan2011]

👍 same here

[theopolisme]

👍 have been encountering repeatedly.

[strindhaug]

I don't really understand why clock drift should cause this... In any sensible implementation, the machine that calculates the future timestamp to wait for should be the same machine that does the waiting.

The only way I could imagine that the clock difference should have any effect is if each time a setTimeout call is performed the device calculates the future timestamp based on its clock, and sends this timestamp to the debugger that does the waiting based on its clock. But surely that cannot be how it's implemented, is it? (That would require a whole lot of extra code to make it that way, for no good reason I can think of; except it enables this bug...)

If it's really designed that way; does anyone know why? And where the code that splits the call between device and debugger is located?

[dantman]

The only way I could imagine that the clock difference should have any effect is if each time a setTimeout call is performed the device calculates the future timestamp based on its clock, and sends this timestamp to the debugger that does the waiting based on its clock. But surely that cannot be how it's implemented, is it?

React Native doesn't have a debugger communication protocol. It only has a bridge to allow a JS context and the native app code to communicate.

React Native doesn't start up the js and native code on the device and then communicate with the debugger on your computer when you run with the debugger. To my understanding when you run RN in debugger mode it runs the native app code on the device and the debugger runs the JS code, then the JS<->native bridge just communicates over the network instead of locally. And you get the debugger free because the JS code is being executed in a browser with built in dev tools.

That would by why there are different clocks in debug mode, the native app code is running on the device with the device's clock and the JS code is running on your computer with your computer's clock.

[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 to Touchable.longPressDelayTimeout not 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]

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 #1693 (comment) 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