Capacitor showing blank screen for react app in android studio

user_1843883 0
Viewed 379

I've tried setting up the below react apps locally and this is working as expected, however, when I try to install capacitor to these react apps and execute it from android studio. The app is opening up with a blank screen.

https://github.com/aditya-sridhar/simple-reactjs-app

https://github.com/arnab-datta/counter-app

Steps followed for adding a capacitor to react app and running it on android studio are as follows

  1. Clone/Download the app from github
  2. Do an npm install
  3. Bring up the app locally to check if the app works from the browser
  4. Bring down the app
  5. Install npm install @capacitor/core
  6. Install npm install @capacitor/cli --save-dev
  7. Initialize Capacitor using npx cap init and proceed with default values
  8. Install npm install @capacitor/android
  9. Do npm run build
  10. Add android platform using npx cap add android
  11. Run android platform using npx cap run android

Note: While doing, npx cap run android I got an error and added local.properties in the generated Android folder.

Screen Image as follows

enter image description here

capacitor progressive-web-apps reactjs android
1 Answers

After a lot of investigations and reading various forums, I found that the following solution works for me both for ios and android.

Add the following hostname property under server section in the capacitor.config.ts file. set hostname to be 127.0.0.1 instead of url property set to http://localhost:8100 or http://127.0.0.1:8100

server: {
    hostname: '127.0.0.1',
    cleartext: true,
    allowNavigation: ['*'],
  }

Then run npx cap sync

Then the ionic cap run android/ios works fine for me.

To debug with live-reload, you can just run ionic cap run -l android/ios --external

Hope this helps

user_97021830
Related