react-native: Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`, which is not supported.

Same as #5823 that has been closed, when I’m in debugging mode with react-native@0.36.1 I got sometimes this error randomly:

console.error: "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."
Object.console.error
    YellowBox.js:61
Constructor._handleLongDelay
    Touchable.js:595
Constructor.proxiedMethod [as _handleLongDelay]
    createPrototypeProxy.js:44
<unknown>
    JSTimers.js:78
Object.callTimer
    JSTimersExecution.js:99
Object.callTimers
    JSTimersExecution.js:140
MessageQueue.__callFunction
    MessageQueue.js:236
<unknown>
    MessageQueue.js:108
guard
    MessageQueue.js:46
MessageQueue.callFunctionReturnFlushedQueue
    MessageQueue.js:107
message
    RNDebuggerWorker.js:123:57

Apparently, thanks to #5823 the code can be reproduced like that:

class App extends Component {
  constructor() {
    super()
    this.state = {
      testText: ''+Math.random()
    }
  }

  _updateTouch(e) {
    this.setState({testText: ''+Math.random()})
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>
          {this.state.testText}
        </Text>
        <TouchableHighlight onPress={this._updateTouch.bind(this)}>
          <Image
            style={width: 100, height: 100}
            source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          />
        </TouchableHighlight>
      </View>
    );
  }
}

I see a lot of people having the same issue on the old ticket, so I choose to open a new one because the old one is actually closed.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 51
Comments: 46 (3 by maintainers)

Most upvoted comments

Hey everyone. Just check the clocks on your computer and phone. If there is a noticeable difference, disable the auto setting on one device and change it to match the other.

My android phone’s clock was around 7s earlier than the clock on my Mac, and there was ~ 1/3 chance to trigger the error when button is pressed with chrome debugging on. After I adjust the clock to reduce the difference to around 1s (without changing any code), the problem is gone.

+49

Larry-Liu2016 on Jul 10, 2017

STOP with the +1 spam. Just give the original post or whichever comment a thumbs up 👍🏼 if you see the same.

+27

fungilation on Jul 28, 2017

This only happens to me when Remote JS Debugging is enabled, at least on Android 6, RN v0.41.2.

sebastian-palma on Feb 20, 2017

the solution to fix the clock is not an option, you can’t say every customer to fix their time.

sneerin on Dec 29, 2017

My practical solution was to edit react-native source code at: node-modules/react-native/Libraries/Components/Touchable/Touchable.js

Here I’ve changed “console.error” to “console.log” at line 628, this way I receive the message, however my app is not interrupted and the error is “dissmissed”

You could also use “console.warn” if you still want to get track of the error, turning it into a warning.

starting at line 623:

  _handleLongDelay: function(e) {
    this.longPressDelayTimeout = null;
    var curState = this.state.touchable.touchState;
    if (curState !== States.RESPONDER_ACTIVE_PRESS_IN &&
        curState !== States.RESPONDER_ACTIVE_LONG_PRESS_IN) {
      // console.error('Attempted to transition from state `' + curState + '` to `' +
      console.log('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.');
    } else {
      this._receiveSignal(Signals.LONG_PRESS_DETECTED, e);
    }
  },

Piropa on Feb 23, 2018

react-native: "0.40.0"

I faced with this issue when the following conditions:

Remote JS debugging is on
View has two components, one of them is conditional

<View style={styles.btnWrapper}>
  <TextButton
    title='text'
    onPress={this.foo}
  />
  {
   this.props.enableHint &&
   <TextButton
    title='text'
    onPress={this.bar}
   />
  }
</View>

// TextButton
<TouchableHighlight
  onPress={this.props.onPress}
>
  <Text>
    {this.props.title}
  </Text>
</TouchableHighlight>

When enableHint is eq false, RN throws this error

I change <TouchableHighlight> to <TouchableOpacity> and that’s works.

arkhwise on Feb 27, 2017

Android 7 & RN 0.53

I’ve same issue with TouchableHighlight

mohammad-goldast on Feb 11, 2018

@Piropa Thank you. +1

pacozaa on Mar 10, 2018

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

react-native-bot on Feb 24, 2018

We solutions over here. Stop comment +1. Not just here. In every post, please don’t comment “me too” and “+1”. Thanks for the cooperation

alanyong91 on Dec 18, 2017

+1 RN 0.49.3 on Android

koansang on Oct 17, 2017

@danna88 try to set the phone’s time manually and make sure it’s equal to the computer time. Then let us know if you still experience the issue.

compojoom on Sep 17, 2017