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

Created on 19 Jan 2017  ·  46Comments  ·  Source: facebook/react-native

Same as #5823 that has been closed, when I'm in debugging mode with [email protected] 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.

Ran Commands Locked

Most helpful comment

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.

All 46 comments

My console.error output:

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.
reactConsoleErrorHandler @ ExceptionsManager.js:71
console.error @ YellowBox.js:61
_handleLongDelay @ Touchable.js:596
(anonymous) @ JSTimers.js:80
callTimer @ JSTimersExecution.js:95
callTimers @ JSTimersExecution.js:136
__callFunction @ MessageQueue.js:236
(anonymous) @ MessageQueue.js:108
guard @ MessageQueue.js:46
callFunctionReturnFlushedQueue @ MessageQueue.js:107
onmessage @ debuggerWorker.js:44

I'm on RN 0.37. I haven't hit this error in iOS simulator, but got this on physical iPhone 6S on iOS 10.2.1.

Same issue here

+1
iPhone 6 on iOS 10.2

+1

+1

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

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.

+1

Android 7.1.1
Nexus 6

image

+1

+1

I am also getting this error when remote JS debugging is on my Android device. RN v0.42.3

+1 RN 0.42.0

+1 RN 0.44

+1 RN 0.44.2

+1 RN 0.45.1
I'm really sorry to keep the spam going, but it's been bothering be for a while now, and I think it is the reason my apps closes itself now and then.

I'd be happy to provide any useful information in order to solve this issue.

+1

+1 RN 0.43.4

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.

Does Android not use internet time servers properly to have a 7s
discrepancy? 🤔
On Mon, Jul 10, 2017 at 6:52 AM Larry-Liu2016 notifications@github.com
wrote:

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.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/11989#issuecomment-314111441,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoJStomJi_3OHaNf8iN5NkooI3HBgnzks5sMiyYgaJpZM4LoMao
.

>

Cheers,
Gary

+1

+1

+1

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

I just did what @Larry-Liu2016 suggested and this worked for me on RN 0.47.2
This also seems to solve the onlongpress issue reported here: https://github.com/facebook/react-native/issues/4944

Thanks @Larry-Liu2016

RN 0.48.2 +1
How is this question triggered?
What is the solution?

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

+1 RN 0.48.3

@Larry-Liu2016 suggestion worked for me on RN 0.46.4. Thanks

+1 RN 0.49.3 on Android

+1 on Android

+1

+1

Solved using React Native debugger instead of plain Chrome window

@Larry-Liu2016 +1

@Larry-Liu2016 is right, I have synchronized time to my android mobile phone with the computers time, exactly the same even the seconds, and now that error does not appear.

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

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

@sneerin This issue it is just in development mode, not in production..

@jetonk Still pretty boring when you develop and your app crash cuz of that shit. e.e

Time synchronized and not working...
I have also tried inserting View inside TouchableNativeFeedback with the same result.

Android 7 & RN 0.53

I've same issue with TouchableHighlight

Time synchronized, not working here either...

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

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

@Piropa Thank you. +1

Locking due to repetitive +1 comments. A solution was posted a long time ago by @Larry-Liu2016 here. In summary, check the clock on your devices.

Was this page helpful?
0 / 5 - 0 ratings