I'm using WebStorm for developing a react-native app + an emulator from the Android Studio virtual device.
The app is loaded great from the WebStorm into the emulator but the debugger isn't working, won't stop on breakpoints.
This is my settings:
This is the configuration of WebStorm:
The device in the emulator is Nexus 5X API 22 (Android 5.1 x86), i enabled "Remote JS Debugging" after its first loaded.
WebStorm output:
/usr/local/bin/node --debug-brk=60746 --expose_debug_as=v8debug /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/launcher.js --port=8081 --sourcesStoragePath=/dev/calculatorApp/.tmp/reactNativeBuild
Debugger listening on [::]:60746
[intellij] Downloaded debuggerWorker.js (Logic to run the React Native app) from the Packager.
[intellij] Starting debugger app worker.
[intellij] Established a connection with the Proxy (Packager) to the React Native application
[intellij] Debugging session started successfully.
Running application "CalculatorApp" with appParams: {"initialProps":{},"rootTag":1}. DEV === true, development-level warning are ON, performance optimizations are OFF
Process finished with exit code 137 (interrupted by signal 9: SIGKILL)
In my case I found out that the debugger in IntelliJ/WebStorm wouldn't work if I create the project with create-react-native-app app-name from the command line.
However, the debugger does attach if you create the project following the prompts inside of IntelliJ/WebStorm itself.
e.g. File -> New -> Project -> React Native
I suspect it is because it doesn't use the create-react-native-app command to generate the project files but rather some other mechanism.
If I run create-react-native-app app-name and then load the project in IntelliJ/WebStorm, I noticed that the only sub-directories it creates are node-modules and .expo.
However, if you create the React Native project in IntelliJ/WebStorm, it generates additional directories, android, ios, __tests__, that are not created when you run create-react-native-app app-name.
Related
ionic run android -l --external with this I got to test the app on phone with hot reloading, but when I try to build it on studio it just shows a blank white screen after the capacitor logo.
I am just testing out ionic, just got the tabs template going on to test it out.
here's how I build the apk.
ionic run android -> then on android studio -> build apk
I'm getting a similar problem, using WSL and the Windows Android Studio:
On WSL:
ionic start photo-gallery tabs --type=react --capacitor
cd photo-gallery/
ionic integrations enable capacitor
npx cap init photo-app com.mike.atkinson
mkdir www
-- create a www/index.html file
npx cap add android
ionic serve #check everything runs OK in a browser then ^C
#line below stops a warning in the Windows Android Studio when the App is run.
mkdir node_modules/#capacitor/android/capacitor/build/intermediates/check_manifest_result/debug/checkDebugManifest/out
On Windows:
Run Android Studio
Select photo-app
build it
Create an Android Virtual Machine - using Pixel XL with Android 10
Select it
Run photo-app <-- just a blank screen
Connect phone (Umidigi A3S running Android 10)
Select phone
Run photo-app <-- just shows the splash screen then a blank screen
As I am new to Android, it is probably something I'm doing wrong, but as this is an example React app I can't figure out what.
It turns out I made two simple errors:
In capacitor.config.json the webDir should be set to "build"
Ionic serve only does the build for the web service, to build for the android target you need to do:
npm run build
then run the Android Studio on the Windows side.
I'm using angular, but ran into the same situation. For me it was my (Windows) firewall blocking port 8100.
So I added the Inbound rule to allow TCP traffic on port 8100 (Private and Domain, NOT public).
Next problem was that my WiFi was, by default, set to a public WiFi... So I corrected this and it all worked!
Supposedly the two ways you can start a react native android app are:
react-native run-android via command line
OR
Open your project in android studio and press Run.
The issues I am experiencing are that using option 1, i will get an error that no devices are available:
com.android.builder.testing.api.DeviceException: No connected devices!
and using option 2 results in an emulator starting and the installation of the app successfully, but the JS packager doesnt start as part of this flow.
Now sure, I can easily get around this by either
Run the packager manually before starting the app in Studio
Starting an emulator before running react-native run-android
but it seems like this is indicative of a problem somewhere
I have checked out this similar question here React Native: Android Studio doesn't automatically bundle when building but that is unrelated to whats happening to me
When building a react-native project for android you run the following command
react-native run-android --variant=release
However for a successful release build an android emulator needs to be running. If it's not you'll get the following error:
* What went wrong:
Execution failed for task ':app:installRelease'.
> com.android.builder.testing.api.DeviceException: No connected devices!
But I don't want to start an emulator because I'm building the project in a container that doesn't support android emulators.
Is it possible to build a react native application for Android without running an emulator?
Note:
A physical device won't work because I'm working with containers that are running in CircleCI which is a Cloud-based Continuous Integration service.
The react-native command line utility wraps another utility called gradlew (which is in fact another wrapper for gradle that will download gradle if it doesn't already exist).
The gradlew utility lives inside the android directory and can be used directly like this:
cd android
./gradlew assembleRelease
So if you're wanting to build a release Android Package (APK) but not run it on an emulator then the above command will work!
You could test your app in browser. But which need some third-party tools, such as https://snack.expo.io/, and here is a good tutorial about using it.
Why not just use a physical device?
As long as you have followed these steps:
1. Open the Settings app.
2. (Only on Android 8.0 or higher) Select System.
3. Scroll to the bottom and select About phone.
4. Scroll to the bottom and tap Build number 7 times.
5. Return to the previous screen to find Developer options near the bottom.
you can enable USB debugging on your device under developer options. After enabling USB debugging, react-native will target your device and install the release apk.
I have a problem...After the build of my project PhoneGap, I want to run the it on my device with this command:
cordova run android
When I run this command I receive this error:
WARNING : No target specified, deploying to emulator
So run the emulator...I woun't the emulator, it's very slow...I Enable USB debugging on my device...Where is the problem? Also I want use the library of AngularJs...Where must I put the library? Thanks!
I have developed an app using Sencha Touch 2.1.0. My app is running successfully on the emulator, but when I try to launch on any device (I have tried four different devices), the default Sencha splash screen does not disappear and the app does not start working. The error I found from the log-cat is:
12-27 18:39:21.580: E/Web Console(23413): Uncaught Error: [Ext.Loader] Failed loading 'file:///android_asset/touch/src/event/Dispatcher.js', please verify that the file exists at file:///android_asset/touch/sencha-touch.js:8321
12-27 18:39:21.580: E/Web Console(23413): Uncaught Error: [Ext.Loader] Failed loading 'file:///android_asset/touch/src/event/publisher/Dom.js', please verify that the file exists at file:///android_asset/touch/sencha-touch.js:8321
It looks like you are using a development build of the app where it loads in each class individually. I always use sencha's build tools, and build for "testing" or "production" before I go onto the device. The call to build for testing, if called from your project root is:
// this figures out all your project dependencies
sencha app resolve http://localhost/ref/to/your/project/index.html dependencies.json
// this will build your project for testing, which does not remove white
// space or comments, and does not generate cache.manifest files for HTML5 caching
sencha app build -e testing
The build destination directory is configured in the app.json file and will have some lines similar to:
"buildPaths": {
"testing": "../builds/testing",
"production": "../builds/production",
"package": "../builds/package",
"native": "../builds/native"
},
My development flow is to build in the browser, then build for "testing" when I need to test on the device. Here is my build.sh script, which I run from my application root. This script generates all my dependencies, builds for testing (based on my app.json buildPaths params), changes directory to a directory called "builds/android/" where I hold my android (phoneGap) project, then builds the project to the device I have attached via USB:
sencha app resolve http://localhost/careathand/front/mobile/dev/index.html dependencies.json
sencha app build -e testing
# build the application on the device with cordova
cd ../builds/android/
./cordova/debug
./cordova/log | grep Cordova
Now all I have to do is run the following command from my project root:
sh build.sh
A round about answer, but hopefully this helps streamline your dev process and ultimately fix the problem.
$ sencha package run packager.json
seems not to work on Android 4.x.
Could you try this instead of?
$ sencha app build native
$ adb install build/[yourProject]/[yourAppName].apk