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.

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

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

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

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);
    }
  },

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.

Android 7 & RN 0.53

I’ve same issue with TouchableHighlight

@Piropa Thank you. +1

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 ContributeWhat to Expect from Maintainers

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

+1 RN 0.49.3 on Android

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