Android alert box and input long press popup issue (Ionic React V6, capacitor V3 )

[milind-betaflux]

Ionic React V6, Capacitor v3

Issue 1:
On long pressing on any input box, half the screen above the on-screen keyboard turns purple (purple being our app’s base color). Also the cursor’s background also turns purple.

Issue 2:
All native alert boxes are by default full screen with some padding around it and also have the purple background.

Issue 3:
On opening any link using the in app browser within the app, when a native picker opens, for example like a date picker, that too opens in fullscreen mode with a purple background and with a lot of gap between individual picker items.

We are assuming all these issues are connected to a single issue and are unable to figure out what the issue might be. This only happens in Android and looks very weird.

Would be very grateful if anyone could help with this as we’ve been stuck on this for some time now and can’t find a fix.

[milind-betaflux]

Okay, we finally solved it ourselves. For anyone facing a similar issue here’s what solved it for us:

Basically, inside the android/app/src/main/res/values/styles.xml file we had to replace
< item name=“android:background”>@drawable/splash</ item>
with:
< item name=“android:background”>@drawable/ic_transparent</ item>

this did it for us, hope this helps:)