Stuck at Whitescreen after building Ionic React android app

Issue

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

Solution

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:

1. In capacitor.config.json the webDir should be set to "build"

2. 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.

Answered By - Michael Atkinson