When the react-native is running, debug js remotely can be turned on and run normally. However, when the debug js remotely is not turned on, the program will run incorrectly. Why
Remote JS debugging makes the phone reliant to the browser Javascript engine that may be different in some cases (for me the problem came using new Date().
When the remote JS debugging runs on device it uses the device JavascriptCore provided by the react-native application.
I'm not aware about other occasions where this may occur.
Related
So this has been asked before but I'm asking it again because nothing has worked, I've read through all of the similar posts I could find and all but one has semi fixed the problem.
https://medium.com/#adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff
This medium article is the only solution that i can find that will get debug builds running again but that is only because it is pre packaging the javascript bundle and not really fixing the problem of the app not connecting to the metro server, once the debug build is running via this method I'm unable to shake the device and get the debug menu to show up.
I've been developing this app for probably 10 months, live for 3-4 months, and can usually trudge through these errors that pop up but this one is tricky.
I've been using cleartextTrafficPermitted="true", tried implementing a custom network security config android:networkSecurityConfig="#xml/network_security_config", tried a different physical device, cleared the metro cache, deleted .gradle/ build folders, cleaned, rebuilt.. All with the same end result of the app crashing on boot and the same error in logcat Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
Release builds work but that's because its not trying to connect to the metro server, pretty stumped on this one.
Answering this for others that might find it useful. Still not sure what I did wrong but in the process of setting up a CI/CD pipeline for the app I re cloned the project and magically android debug builds started working again. No changes to the code, the android project must have gotten corrupted somehow so recloning allowed android studio to start from square one. Weird one.
With old Android versions, app is so slow working when debug js remotely is active. Is there a way to see the logs which we have on Chrome ?
If Chrome is the issue, you can use React Native Tools Extension on Visual Studio. That way you can simply use VS code itself for reading logs.
EDIT: If putting Remote Debugger ON the issue, go ahead and use react-native log-android or react-native log-ios . Click here for more information on accessing console logs
You can use the server terminal for that, all consoles are going to be availabe there for you and you wont need to enable "debug remotly"
I upgraded a react native project recently from expo SDK 36 to 38. It compiles now, but anytime I click on "Debug Remote JS", it causes the UI to become slow and unresponsive, only occasionally picking up the on click events. I created a bare bones project to duplicate it. To verify, either run expo init from cli or here's a project https://github.com/seniordevops/tab-application.git. Click the tabs without the debugger on, then turn on debug remote JS and watch the slow down. Happens on both Mac and PC. Any ideas on the root cause?
This is mostly due to the fact that the clock on your PC and mobile are not synchronized.
You either have to synchronize them or have the phone clock one second earlier than your PC/Mac.
I suspect the reason could be an upstream problem of react-native. Please check this expo-cli issue:
https://github.com/expo/expo-cli/issues/2405
a maintainer reports:
when you are debugging on your device, the javascript is being
executed in your browser on your computer :(
Recently I switched from Ionic framework to vue-native (vue.js wrapper around react-native), everything seems to be cool, development is fast and easy, but I have some real issues with debugging those apps. With Ionic Framework (Cordova) I was able to open an app in web browser and could easily manage Vuex state (for example) from Chrome Console. It doesn't seems so easy and trivial in react native world. Is it possible to have similar debugging experience in vue-native? When my app starts to grow and gets complicated it's really hard to handle it other way around. Any help appreciated.
Basically all my problems gone away when I ported my apps to Expo (which allows for JS remote debugging) and grabbed React Native Debugger - https://github.com/jhen0409/react-native-debugger.
Important part is having simulator installed on your developer machine (like iphone simulator) because debugger doesn't play nicely with real machines.
Inside debugger hit cmd+t to open a new window and set port to 19001 (because of Expo using this port). Now start expo with npm start command and in Expo panel hit 'Run in simulator' button.
In simulator make a shake gesture (ctrl+cmd+z) and allow remote debugging in developer menu.
Done. Pleasant experience similar to one known from Cordova. You have a js console, you can inspect elements and change styles live. Expo comes with live reload to make things smoother.
More info here: https://docs.expo.io/versions/latest/workflow/debugging/
Unfortunately, you cannot debug script parts in the VUE files in Chrome Dev Tools (you can put the breakpoints, but they are not working well), but if you put the methods to a separate JS file, it works like a charm. I know, it's a workaround, but not a big pain, and working well.
See my TODO app for example: https://github.com/TheBojda/VueNativeTodo
I've been developing a react-native app using the simulator for a while. On the simulator (iOS), the app loads very fast (on reload for eg). However, when I tried to load the app to the device, it spends between 1-3 minutes in the splash screen before loading into the app.
My project is fairly small, and has no extra resources other than the javascript. Looking at the documentation I couldn't find what might be the cause of the issue, though I suspect it has to do with the fact that it is not getting the JS from the packager local server.
What am I doing wrong?
(btw - react-native v0.31)
I ran into the same issue and discovered that it was because I was running my app on device in development mode. To get the performance you're looking for, you'll need to build and run the app in production or "release" mode. You can do this by passing in a --configuration option and setting it to Release using the React Native CLI:
$ react-native run-ios --configuration Release
If that doesn't do the trick, then you may need to build your app in "Release" mode from Xcode. To do that, navigate to your projects /ios directory and open the .xcodeproj file in Xcode. Choose your build target in the Toolbar. Scroll to the bottom and choose "Edit Scheme...". Then under Build Configuration, switch from "Debug" to "Release". Now build your app on your target device and it should be much more performant than before.
You can read more in the official React Native documentation under Running on Device: Building your app for production.
For me the issue was related to the wifi network of my development machine. I was using WPA2 Enterprise auth to connect to wifi on my development machine. I found that if I used a wired connection to connect to my network or if I used another wifi connection that used a different form of auth then the delay went away. I think the delay is a network timeout.