React-native: setTimeout and setInterval don't fire on Android RN 0.31 when attached to Chrome Debugger

[tslearn]

setTimeout(() => console.log("#############", 1000);
setInterval(() => console.log("#############", 1000);
NetInfo.fetch().done(v => console.log(v));

not fire on android RN 0.31 but fire on RN 0.30

Env: Mac os 11.6

[satya164]

Facing the same issue when I connect to chrome debugger.

[rigdern]

Is this related to #9319?

[nihgwu]

what about #4470 , seems it's not a regression, but a knowing bug for quite a long time

[satya164]

@nihgwu in this case it doesn't fire at all. I can reproduce this issue when I upgrade from RN 0.30. Haven't gotten the time to make a reproducible sample.

@rigdern might be

[c-h-]

Having same issue RN 31 while debugging with Chrome only

[satya164]

Ok, successfully reproduced this with a new project.

Steps to reproduce,

• Init the project

react-native init TimerBug
cd TimerBug
react-native run-android

• Add the following to index.android.js

setTimeout(() => console.warn('fired'), 10); // duration can be anything

See YellowBox coming up

• Connect to chrome debugger

It never fires

cc @bestander

[mkonicek]

This might be related to the new bridge on Android and https://github.com/facebook/react-native/issues/9319 (AsyncStorage.getAllKey callback doesn't get called when debugging).

I'll ping @cjhopman and @mhorowitz on fb@work messenger.

[lexs]

I found the problem and a fix should make it to the next release. We we're accidentally dropping all native calls made during loading of the JS bundle which causes the thing that was driving the queue to not be called.

[satya164]

@lexs We can probably cherry-pick this to current release?

[lexs]

@satya164 Sure, commit is here: https://github.com/facebook/react-native/commit/b4999fca0d783bfaeb47200e434760aae8badb14
Closing this issue now.

[klvnptr]

it still exists in v0.33.0-rc.0
hope it will be fixed in stable v0.33.0
thank you

[bestander]

Yes, it has been cherry-picked but a new release was not triggered.
Will be released with stable

[Hanruis]

my project depends on a lib that base on android RN0.31 .. i had change the line of code .. but i dont know how to rebuild react-native package to get it work...

i had try : npm rebuild & react-native upgrade ... but not not work

[rigdern]

@Hanruis, here are some instructions for Android on how to configure your app to use a custom version of React Native: https://facebook.github.io/react-native/docs/android-building-from-source.html

[Hanruis]

@rigdern thx. i know it....but is there any easier way possible to just rebuild the react-native npm package and get it work?

[bestander]

@Hanruis, the npm package comes with prebuilt jars of React Native, you need full source code to produce them, @rigdern's solution is the correct.

A quick recap:

1. checkout RN source 0.31-stable branch
2. cherry-pick the commit with the fix
3. Follow https://facebook.github.io/react-native/docs/android-building-from-source.html

[Hanruis]

@bestander get, thx ~~~

[Odinvt]

For the people who are still facing this issue ! which is the case for us on RN 0.44.0 on Android :

We found indeed that the problem was related to the device time not being exactly as the time on the chrome remote debugger machine. This is due to the React Native javascript setTimeout function calling the native Timing.createTimer method with a Date.now() parameter which is not the same as the native side's time when in remote js debug mode (where the javascript execution environment is the chrome browser or whatever debugger you're using) as you can see in JSTimers.js#L93.

So, the solution for us was 1 of the following :

• Either set the time of the device to be exactly as the remote debugging machine's time using ADB
• Or compensate for the time difference between the native side and the remote js side

We chose the second solution as the first one wasn't suited for our needs so we created a package called React Native Timer Native (I know, i'm not so good when it comes to naming things ^^') which is a fork of React Native Timer.

What it does --as a stupid hack-- is simply call a native method (when in dev mode) with the current javascript timestamp, then the native method gets its current timestamp using System.currentTimeMillis(), calculates the difference and returns it back to javascript, then the js package just adds that to whatever duration you passed to timer.setTimeout .

The device time must be in the future compared to the remote debugging machine time otherwise it doesn't work properly

It does get the timeouts executed with a decent precision (still need to substract the time that the bridge takes to call the native method so any inputs are welcome ;) ).

[Misiur]

This is still an issue with RN 0.45.1 (you can check with @satya164 code)

[AlexisChevalier]

I have the same issue on the iOS platfom with RN 0.45.1. I first discovered it through the redux-saga library. One of the delays wasn't working with the remote debugger enabled but was actually working correctly without the remote debugger.

I then tried with a simple setTimeout(function() { console.warn("Test"); }, 10000); in a component, I got the same result, it shows hello without the debugger but nothing with the debugger.

[skozin]

We have the same issue when running RN 0.45.1 in iOS simulator attached to Chrome debugger. Timers don't fire at all. But they start to fire when we detach JS debugger.

iOS simulator automatically synchronizes time with the host machine, and, as far as I know, there is no way to adjust it manually using the UI.

[cbrevik]

Seems like timers in general are affected (fetch too) #14681

[adamnator92]

same issues when running RN 0.46.1 when i debug my app with google chrome debugger. setInterval didnt fire most of the sometimes, but it worked well only when i disabled debug JS Remotely

[cbrevik]

@Adamnator92 this is fixed in 0.47: https://github.com/facebook/react-native/issues/14681#issuecomment-314394327

[adamnator92]

@cbrevik thank you so much for that :)

[mandriv]

@cbrevik I still experience significant delays while using setTimeout on Android with Chrome debugger. No issues when the debugger is detached. RN 0.47.2

[cbrevik]

@mandriv The fix in 0.47 which I referenced was iOS-specific. So problems with Android is probably caused by something else.

[dgrcode]

I'm having the same issue, with iOS and 0.47.

This should be at least mentioned in the docs, probably here. This is a hard bug to find and I can imagine it has caused a good amount of developer hours lost.

Simple solution: ⌘D or equivalent, Stop Remote Debugging.

[Techwolf12]

Same issue here with iOS simulator & 0.47.
When chrome debugger is active it fires after a UI interaction, without debugger, at the interval set.

Please reopen the issue as this is not fixed.

[mhdizade]

Same issue

[mhdizade]

I set the device time exactly with the debugger time and it works ;)

[Fr33maan]

For whom guess how to update device time, use adb from a terminal:
adb shell su root date $(date +%m%d%H%M%Y.%S)
It was the solution for me, now events fire correctly

[jordanmkoncz]

I had to also fully restart my Android Emulator after running the adb shell command for updating device time in order to get things working again when remote JS debugging is enabled.

[hstarorg]

Same issue in rn 0.52.1

[willbattel]

Still getting this in 0.53.3.

[dhirendrarathod2000]

RN 0.53 Same issue
For me it does not work on either

[lodi-g]

RN 0.54 ; getting this issue as well.

[srikanthkyatham]

RN 0.53 android - I was able to resolve following the trick here
https://stackoverflow.com/a/39304401/1177995

[isaachinman]

Experiencing this issue on v0.54.2. Any fixes?

[dgurns]

Same here, v0.54.0

[dogofpavlov]

Got the same issue as well, just starting into ReactNative and discovering things like makes me cautious moving forward, this seems pretty basic.

[Sharcoux]

Need to sync debugging computer with device. Execute on your computer:

adb shell su root "date `date +%m%d%H%M%Y.%S`"