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

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.

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

[Thomas101]

Hey,

I’ve been doing some digging on this issue. Found out that it’s because of a bug with setTimeout. When using chrome debugging they can fire in the incorrect order. (See dedicated issue and example in #4470).

What happens with this one is in the function touchableHandleResponderGrant in Components/Touchable/Touchable.js you setup two setTimeouts and when they fire in the incorrect order the touch responder graph drops out to an error state which causes the red screen of death.

I’ve got very much a ‘paint over the cracks’ fix, which most probably has unforeseen side-effects but will at least enable you to debug in chrome again. I definitely remove this before deploying to production In Components/Touchable/Touchable.js change…

RESPONDER_INACTIVE_PRESS_IN: {
    DELAY: States.RESPONDER_ACTIVE_PRESS_IN,
    RESPONDER_GRANT: States.ERROR,
    RESPONDER_RELEASE: States.NOT_RESPONDER,
    RESPONDER_TERMINATED: States.NOT_RESPONDER,
    ENTER_PRESS_RECT: States.RESPONDER_INACTIVE_PRESS_IN,
    LEAVE_PRESS_RECT: States.RESPONDER_INACTIVE_PRESS_OUT,
    LONG_PRESS_DETECTED: States.ERROR,
  },

to be

RESPONDER_INACTIVE_PRESS_IN: {
    DELAY: States.RESPONDER_ACTIVE_PRESS_IN,
    RESPONDER_GRANT: States.ERROR,
    RESPONDER_RELEASE: States.NOT_RESPONDER,
    RESPONDER_TERMINATED: States.NOT_RESPONDER,
    ENTER_PRESS_RECT: States.RESPONDER_INACTIVE_PRESS_IN,
    LEAVE_PRESS_RECT: States.RESPONDER_INACTIVE_PRESS_OUT,
    LONG_PRESS_DETECTED: States.RESPONDER_ACTIVE_LONG_PRESS_IN,//States.ERROR,
  },

Again I definitely remove this before deploying to production