React Native behavior different in simulator / on device / with or without Chrome debugging

Question

I'm building a React Native app (currently iOS only) and I found a very nasty bug that only manifests itself when 1.) running on a real device, and 2.) running without Chrome debugging. (Ouch, right?)

I'm using react-native-router-flux with tabs and when I tap on a button that loads a new tab route (Actions.tabRouteName), the screen goes blank. As I said, it works fine in the simulator, and also, on the device when I enable Chrome debugging.

Other things I tried: running on another device, reloading JS, rebuilding app in Xcode.

Any reason the behavior would be different in these different run cases?

Thank you.

Update: This appears to have something to do with animations and route switching. I posted more details in this Github issue. I also found anecdotal support for the idea that other people are encountering similar issues with debugging in this Github issue.

Answer 1

Any reason the behavior would be different in these different run cases?

It's because when you use remote debugging in Chrome, it practically runs the RN app in the browser (it then uses the V8 JavaScript engine) and communicates with the simulator (or device) through WebSockets. When it runs without remote debugging enabled, it uses JavaScript Core. There are many differences between these environments and these can cause inconsistencies, so don't rely much on running your app only with JS debugging enabled, it can give you false errors or hide errors that would actually cause problems on a real device.