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

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?

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

@aprct we found it only happens when remote debugging is enabled. Doesn’t seem to happen when run under production mode

Also happening on Android, real device.

I had the same issue. As mentioned by @yozi-developer, you should avoid any clock drift between device and developer machine. For some reason, my iMac’s clock is drifting slightly, which is not automatically corrected even though the clock should be synchronised according to System Preferences. A difference of 1 second between device and debug machine was enough to trigger this issue frequently. By eliminating that difference, the issue went away. v0.32.0

+1

+1 RN 0.44

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

+1

Still same error on RN 0.51.0. Debugging on Android device using React Native Debugger.

+1 RN 0.47.1

+1 RN 0.45.1

+1

+1 Attempted to transition from state RESPONDER_INACTIVE_PRESS_IN to RESPONDER_ACTIVE_LONG_PRESS_IN, which is not supported. This is most likely due to Touchable.longPressDelayTimeout not being cancelled.

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!

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.

This started happening for me on a physical iPhone 6 device via Xcode.

I was trying to reset my Push Notification permissions per these instructions: https://developer.apple.com/library/prerelease/content/technotes/tn2265/_index.html#//apple_ref/doc/uid/DTS40010376-CH1-TNTAG42

And I had forgotten to set my date & time back to “automatic”. Resetting it stopped the errors.

I can now use remote JS debugging with React Native Debugger without this problem.

I’m getting it remote debugging on a physical iphone

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

RN 0.49.1 still getting this. I think it has something to do with doing things to “fast”. Only happens when debugging on device and debugging promise heavy screens. Also, I’ve only been getting this when clearing warnings.

Some more details: It seems like whenever I click on a button, and then click on it again before the app reacts to my click, it throws this error. I’m 99% sure this is not intended behavior.

RN 0.39, iPhone 5s, iOS 10.2.

Happens when debugging in chrome (via React Native Debugger app) and pressing TouchableWithouthFeedback. Wrapping child in View solves this problem for me.

when TouchableOpacity wraped by ScrollView,it occured still

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

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.

RN 0.48.3 still getting with List view

+1 RN 0.45.1

still happening with this code

    render() {
        let {onNavigateToOfferScreen, navigation} = this.props;
        let {dataSource} = this.state;
        return (
            <ListView style={styles.container} dataSource={dataSource} renderRow={offer => (
                <TouchableHighlight onPress={() => onNavigateToOfferScreen(offer)}>
                    <View style={styles.row} elevation={2}>
                        <Text style={styles.businessName}>{offer.name}</Text>
                    </View>
                </TouchableHighlight>
            )}/>
        );
    }

Same on react-native v0.35, debugging with android 6.0 device.

Same on react-native v0.33.0

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

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?

Getting pretty tired of this bug. It prevents you from debugging effectively when every second tap leads to a popup overlay error, especially when you double tap and mistakenly click on the restart button on the overlay.

Thought after over a year of using RN this would be fixed.

+1 RN 0.46.4

This is still a problem. Consistently happens during Navigation hooks for TouchableNativeFeedback on android

Don’t know if this helps anyone at all (we all seem to have slightly different issues with this), but my app was crashing whenever I used TouchableOpacity with any kind of styles. It turns out there was a ‘width: 100%’ in my styles. When I removed that, the app stopped crashing.

It always happened to me with TouchableOpacity. Even wrapping the inner components in a view.

I am also getting this TouchableHighlight. I am not sure about TouchableOpacity.

Can confirm clock drift is the issue. My android clock was 1 second a head, and after correcting that the issue goes away. I could not find a way to force clock sync (on an unrooted phone), so I had to manually set the time on my phone using a an app counting down until next minute on an NTP server.

Same on react-native v0.32.0

@yozi-developer Thanks!

I am using react native 0.32 and I thought I was going to have to abandon Chrome debugging because touch was not responding at all.

Syncing time on my MacBook host and Android target seemed to eliminate or reduce touch problems when debugging under Chrome.

I found an internal Intranet domain server I could use as a ntp server and pointed my MacBook to it. You can query on OS X or Linux using: ntpdate -q mycompany.com.internal

Then I installed the Android ClockSync app and configured the app’s settings:

1. NTP Server: mycompany.com.internal
2. Enabled Rootless Mode
3. I turned off Automatic data & time System setting under Android Date & Time System
4. I then used ClockSync to synchronize time
5. ClockSync takes you to the system’s Android Date & Time System setting where a count down timer allows you to manually set time.

Before this I was manually prompted by react to manually set time using a adb shell command. This did not seem to work for me.

+1

On RN 0.31.0 with a TouchableHighlight

<TouchableHighlight onPress={onPress} underlayColor={'transparent'}>
      <View style={style}>
        {children}
      </View>
    </TouchableHighlight>

@matto1990, usage the Network Time both on device and pc fixed this issue for me

Can’t reproduce this on master currently.

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!

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 😢

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.