ionic angular capacitor splash screen does not show on android

i am following https://capacitorjs.com/docs/apis/splash-screen#android-12-splash-screen-api

however, on android instead of splash screen it shows icon with a white background. my capacitor.config.ts looks like below

const config: CapacitorConfig = {
appId: 'it.moblize.baniya',
appName: 'baniya',
webDir: 'www',
plugins: {
Keyboard: {
resize: "body",
resizeOnFullScreen: true,
},
PushNotifications: {
presentationOptions: ["badge", "sound", "alert"],
},
SplashScreen: {
launchShowDuration: 3000,
launchAutoHide: false,
launchFadeOutDuration: 3000,
backgroundColor: "#108453",
androidSplashResourceName: "splash",
androidScaleType: "CENTER_CROP",
splashFullScreen: true,
splashImmersive: true,
layoutName: "launch_screen",
useDialog: true,
},

},
};


and in the styels.xml it looks like below

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:background">@null</item>
</style>


<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
<item name="android:background">@drawable/splash</item>
</style>
</resources>


I am on latest android version and using capacitor 7. I don't care if older android versions are not compatible etc. need to work on latest android versions at least.

Continue reading...