Stuck at Whitescreen after building Ionic React android app - android

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!

Related

Ionic cordova run android and update file from folder

I would like to be able to upload/update files from my local machine using real device android.
I've wrote this command line :
ionic cordova run android
from my ionic project folder.
I can see my app on the real device but when i update a file from the project folder, i can't see the result in the real device.
If i want to see the change i have to re-run android.
Is there a way without android studio to be able to see the changes after editing a file in the ionic project'folder ?
You need to build every time on mobile, you can run your application on browser if you want to see the results after editings.
Finaly i had to run this command and the local machine folder reflect the real device app :
ionic cordova run android --livereload -cs

WebStorm react-native debug not working

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.

running mapbox.js cordova application on mobile device

when i run the mapbox.js example in my cordova application using visual studio, it running and display the map correctly in visual studio emulator "simulate in browser-Nexus 4", if i run the same application apk file in my mobile device map is not loading.
The difference seems to be, in the example page on both, that the mapbox doesn't take up any difficulty in loading the map. The issue only appears to be an issue when running mapbox on mobile devices.
I got a solution for this question...
If we face the above problem means, we can install whitelist plugin with Cordova CLI, from npm. In the Command Prompt, change directories to the "(your cordova project\bin)" folder
(For example:C:\Users\user\Documents\Visual Studio 2017\Projects\DemoProject\DemoProject\bin )
and run the following command.
$ cordova plugin add cordova-plugin-whitelist
$ cordova prepare
By using this, we can easily run the cordova.apk in our mobile devices

Ionic Build or Ionic Run builds the wrong app

I am trying to build or run an Ionic Cordova App. But it always builds a default app with playlists.
OS is Windows 10
I do the following from my command prompt:
c:\users\martijn\documents\ionic start testapp blank
c:\users\martijn\documents\testapp\ionic run android
now it is building a different app then in my app directory. When I do ionic serve I see the right app in my browser. Can't figure out why running or building gives me a different app, I think it is a default example app.
Can somebody help?
See link here:
https://github.com/driftyco/ionic-cli/issues/1283
Appears you may have to delete the the last apk file from platforms\android\build\outputs\apk

Cordova project running on Android and on iPad, but not on iPhone

I have a Cordova project, that I can run on my Android phone using ionic run android --device and on my iPad using ionic run ios --device. However, now I connect my iPhone 5, and run the last command again, but get the following error message.
...
[ 60%] TakingInstallLock
[ 65%] PreflightingApplication
[ 65%] InstallingEmbeddedProfile
[ 70%] VerifyingApplication
2015-06-24 17:58:48.564 ios-deploy[33436:1048931] [ !! ] Error 0xe8008015: ∑~}ˇ AMDeviceSecureInstallApplication(0, device, url, options, install_callback, 0)
Error code 253 for command: ios-deploy with args: -d,-b,/path/to/project/App/platforms/ios/build/device/project_name.app
ERROR running one or more of the platforms: Error: /path/to/project/platforms/ios/cordova/run: Command failed with exit code 2
You may not have the required environment or OS to run this project
Online (also on SO) I find many users facing this issue with an Android device, and then they need to install the Android APK. I also read here that I have to run the following command first: sudo npm install -g ios-deploy, which I did. It did not help though.
I am using version 5.0.0, and I read here that I have to downgrade to version 4.3.0. I find this hard to believe though. Is there another cause for this error? How can I check for it, and how can I solve it?
I encountered the same ios deploy AMDeviceSecureInstallApplication error when deploying to a new ios device. Here is how I was able to resolve it and successfully deploy to the new ios device. Start xcode and open your xcodeproj file which can be found in your project_name/platforms/ios directory. Once the project is finished loading then from the top menu select Product and then select destination and choose your new ios device. Then when you click run in xcode you will be prompted that it cannot run on the new ios device because of your code signing provisioning profile. There will be an option that says something like "try and fix it" and simply select that option and follow the prompts, confirm which provisioning profile you want to use to deploy your app to the device. If you only have one provisioning profile then select that one and the app will now run on your device. And in the future you should be able to deploy to this device using the ionic run ios --device command.

Categories

Resources