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

Similar to #1693. It seems to be an issue with the Touchable component with Chrome Debugging on React Native 0.19.0.

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.

stack:
reactConsoleError                                 @ ExceptionsManager.js:76
console.error                                     @ YellowBox.js:49
TouchableMixin._handleLongDelay                   @ Touchable.js:575
JSTimersExecution.callbacks.(anonymous function)  @ JSTimers.js:47
JSTimersExecution.callTimer                       @ JSTimersExecution.js:69
JSTimersExecution.callTimers                      @ JSTimersExecution.js:92
__callFunction                                    @ MessageQueue.js:183
(anonymous function)                              @ MessageQueue.js:87
guard                                             @ MessageQueue.js:41
callFunctionReturnFlushedQueue                    @ MessageQueue.js:86
onmessage                                         @ debuggerWorker.js:39

The code that produces this error is from a freshly started application using a TouchHighlight component:

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

P.S. Is there a better way to copy a stacktrace? I’m just copying from the Chrome dev tools console

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 72
  • Comments: 162 (7 by maintainers)

Commits related to this issue

Most upvoted comments

Hey Dyscrete, thanks for reporting this issue!

React Native, as you’ve probably heard, is getting really popular and truth is we’re getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don’t know how to do something or something is not working as you expect but not sure it’s a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you’re using. Thank you for your contributions!

Fixed after add View

<TouchableNativeFeedback>
     <View> // <= here
         <Text style={css.item}>{rowData.title + rowData.id}</Text>
     </View>
</TouchableNativeFeedback>

Same error for me. React 0.31 Chrome debug. In normal use there is no problem.

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:60 Constructor._handleLongDelay Touchable.js:595 JSTimersExecution.callbacks.(anonymous index.ios.bundle?platform=ios&dev=true&minify=false:8476:13 Object.callTimer JSTimersExecution.js:84 <unknown> JSTimersExecution.js:119 Object.callTimers JSTimersExecution.js:119 MessageQueue.__callFunction MessageQueue.js:204 <unknown> MessageQueue.js:95

I only get this when I’m in remote debugging. This doesn’t happen normally. RN .41.2. Windows 10. Android

+1 same error only on Android but iOS works fine.

+1 I also get this problem,and It’s happened frequently switch navigator

@ckwong90, some here, only apears when remote debugging RN .41.2. macOS Sierra 10.12.3

PLEASE STOP +1 !!!

RN.50 +1

Guys, your +1s aren’t helpful, and this is in #1693

rn 48 +1,

+1

This only happens with remote debugging and I fixed this temporarily by doing the following:

  1. Open Android Settings
  2. Apps
  3. Click on your Application
  4. Storage
  5. Clear Cache

Note: This really is a temporary solution. It still repeatedly pops up every now and then.

I change TouchableHighlight to TouchableOpacity , it not happen

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

@fungilation Maybe I did a mistake by opening a new ticket, because this one is open and talk about the same problem: #1693

Solution to me was to

  1. Ensure phone and pc got same timezone
  2. Manually update time on pc: Date and Time -> Internet Time tab -> Change Settings -> Update Time
  3. Toggle-on auto time update in android settings, then toggle it off
  4. Restart the app

This problem occurs when I debug remotely .

I had the same issue on Android when a) my mobile phone was connected to my PC via USB b) I used remote debugging via network

Disconnecting USB resolved the issue. No idea if there is a causal relationship, though.

Edit: After getting additional issues with async timeouts I checked the current time on PC and Android device via

adb shell date && date.

There was a 5 seconds discrepancy. One might be tempted to guess that there is an inconsistency in how RN handles the current time when debugging remotely. Via

curl -s --head http://google.com | grep ^Date: | sed 's/Date: //g'

I pinned down the culprit in my case: the system time of my Android device was off by 5 seconds. Rebooting the Android device fixed the discrepancy.

I ‘fixed’ this by manually setting the device time in Android. Make sure the new time will equal that of your computer (aim for the next minute change), confirm the time change on the very same second your computer time will change to the next minute.

+1

rn 49.3+ 1

Issue occurred only if remote js debug enabled… with normal mode it is working fine.

after developing for 3weeks suddenly this issue appear when I use the nativebase Fab component. I hope F8 can fix this issue

+1

I already wrapped the components in a View, but got this error. After that any TouchableHighlight in my App throwed this error. Solved it (temporary?) by clearing the app data in settings. The problem occurred in Android, Emulator, Win10, RN 0.42.3 with “Debug JS Remotely” without “Hot Reloading”.

hm, my English is bad, but inserting additional View resolve this problem

As I see a lot of people seems to always have this issue, and this one is closed, so I create a new one here: #11989

In Libraries\Components\Touchable\TouchableHighlight.js replace

touchableGetLongPressDelayMS: function() { return this.props.delayLongPress; },

with

touchableGetLongPressDelayMS: function() { return this.props.delayLongPress === 0 ? 0 : this.props.delayLongPress || 500; },

It resolved the problem for me.

+1 for 0.48.3

+1 happen when i switch navigator

+1

I encounter this problem with react-native-button and debug model in Chrome

I solved the issue by wrapping the Button component with View.