Document or remove depenence upon exact sync of Date/Time between emulator and debugger

When running the Android Studio emulator to develop a react-native app the system time and the emulator time must be exactly in sync to the second. If they are not in sync many things go wrong and the development and debugging experience become nearly impossible.

Recommendations:

1. Documenting the dependence upon exact sync of system time when developing in the Android Studio emulator.
2. If possible eliminate the dependence upon exact clock sync.
3. Consider adding to the react-native cli run-android script an adb command to set the time in the emulator to exact system time.

Note that the symptoms can be subtle if the time is only off by a few seconds. For months now I haven’t been able to use the debugger because it slowed my app to crawl where interactions took 5+ seconds and attempting to resume from a breakpoint crashed the app. Once I synced the time between the emulator and Windows I was able to use the debugger somewhat normally. It’s still 2-4x slower than normal dev mode but it’s at least barebones usable now.

Given this behavior I think this is possibly also the root of other Android debugging issues. Animations, especially if there are several running at once, tend to perform “oddly” in the Android emulator, not stopping when they should or running in serial instead of parallel. Pausing at breakpoints also seems to create a lot of strange behavior especially with animations lagging, running past their assigned durations, and other timing issues.

For others who may stumble upon this issue you can first try updating your time. In Windows right click on the clock, go to “Adjust date/time” then click “sync now”. As an additional step I set my Android emulator to the same time server as Windows default with the following adb command:

adb shell settings put global ntp_server time.windows.com

This seems to persist across reboots of the emulator and help with the issue. A cold boot of the emulator can also help correct clock issues.

This is a very counter-intuitive issue that likely results in a lot of frustration for many developers. Documenting it prominently in sections about debugging would likely go a long way to alleviating potential issues for many people.

React Native version:

System:
    OS: Windows 10 10.0.20180
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 39.08 GB / 63.93 GB
  Binaries:
    Node: 14.7.0 - C:\dev\tools\nodejs\node.EXE
    Yarn: 1.22.0 - C:\dev\tools\nvm\v13.1.0\yarn.CMD
    npm: 6.14.7 - C:\dev\tools\nodejs\npm.CMD
    Watchman: 4.9.4 - C:\dev\tools\watchman\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.3, 30.0.1
      System Images: android-24 | Google Play Intel x86 Atom, android-25 | Google APIs ARM EABI v7a, android-25 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64, android-R | Google Play Intel x86 Atom_64
      Android NDK: 21.0.6113669
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 12.0.2
    Python: 3.8.4
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Open any version of the Android Studio emulator running any version of Android
2. Set date and time in emulator to be a little ahead of behind the system time
3. react-native run-android
4. Attempt to debug js remotely or simply develop the app. Animations hang. Intervals and timeouts fire at the wrong time. The app crashes. The debugger hangs. All manner of chaos ensues making development impossible.

Expected Results

Any one of:

1. There should be no dependence on exact sync of system time. It should work fine when emulator time is out of sync with host time.
2. OR - An error alert is displayed that time must be exactly synced
3. OR - react-native run-android automatically sets date and time of emulator to host time

Snack, code example, screenshot, or link to a repository:

Cannot provide a snack or repo since this is a system and emulator issue during development. It can be reproduced with any version of RN and any version of Android Studio Emulator.

[MichaelBorde]

The problem is located here: https://github.com/facebook/react-native/blob/22764e6cdcf45ca5930676f6e95f9ab2f82bc78d/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java#L335

On java side the timer “adjusted” duration is based on android time and javascript time. This might be ok for a setTimeout but this duration remains “adjusted” (so wrong) for a setInterval lifespan.

Do you think this could be causing setInterval to run faster than the specified interval?

Yes I do. That happens very often on a low end device.

Let’s say you define an interval of 500 ms and at the same time you run complex code on js or java side, the adjusted delay could be 250 ms.

I have a blinking button on my app and after a react navigation screen transition it blinks abnormally fast.

[MichaelBorde]

The problem is located here: https://github.com/facebook/react-native/blob/22764e6cdcf45ca5930676f6e95f9ab2f82bc78d/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java#L335

On java side the timer “adjusted” duration is based on android time and javascript time.

This might be ok for a setTimeout but this duration remains “adjusted” (so wrong) for a setInterval lifespan.