Ionic android 12 splash error while adding cordova-android@11

Since google raised the minimum sdk to 31 on the google play console I had to make some changes and updates to android 12, but when I try to add a new android platform android@11 I have had this error regarding the flash that has changed on cordova11

could anyone help me?

Thank you very much in advance

here the error:

Cannot read properties of null (reading 'find')
TypeError: Cannot read properties of null (reading 'find')
    at E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:387:49
    at Array.forEach (<anonymous>)
    at updateProjectSplashScreen (E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:384:7)
    at updateProjectAccordingTo (E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:269:5)
    at E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:67:21
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
[ERROR] An error occurred while running subprocess cordova.

        cordova.cmd platform add android@11 --verbose exited with exit code 1.

and the file wich raise the erro is: E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js

function updateProjectSplashScreen (platformConfig, locations) {

    // res/values/themes.xml

    const themes = xmlHelpers.parseElementtreeSync(locations.themes);

    const splashScreenTheme = themes.find('style[@name="Theme.App.SplashScreen"]');

    [

        'windowSplashScreenAnimatedIcon',

        'windowSplashScreenAnimationDuration',

        'windowSplashScreenBackground',

        'windowSplashScreenBrandingImage',

        'windowSplashScreenIconBackgroundColor',

        'postSplashScreenTheme'

    ].forEach(themeKey => {

        const cdvConfigPrefKey = 'Android' + themeKey.charAt(0).toUpperCase() + themeKey.slice(1);

        const cdvConfigPrefValue = platformConfig.getPreference(cdvConfigPrefKey, this.platform);

        let themeTargetNode = splashScreenTheme.find(`item[@name="${themeKey}"]`);

        switch (themeKey) {

        case 'windowSplashScreenBackground':

            // use the user defined value for "colors.xml"

            updateProjectSplashScreenBackgroundColor(cdvConfigPrefValue, locations);

            // force the themes value to `@color/cdv_splashscreen_background`

            themeTargetNode.text = '@color/cdv_splashscreen_background';

            break;

        case 'windowSplashScreenAnimatedIcon':

            // handle here the cases of "png" vs "xml" (drawable)

            // If "png":

            //  - Clear out default or previous set "drawable/ic_cdv_splashscreen.xml" if exisiting.

            //  - Copy png in correct mipmap dir with name "ic_cdv_splashscreen.png"

            // If "xml":

            //  - Clear out "{mipmap}/ic_cdv_splashscreen.png" if exisiting.

            //  - Copy xml into drawable dir with name "ic_cdv_splashscreen.xml"

            // updateProjectSplashScreenIcon()

            // value should change depending on case:

            // If "png": "@mipmap/ic_cdv_splashscreen"

            // If "xml": "@drawable/ic_cdv_splashscreen"

            updateProjectSplashScreenImage(locations, themeKey, cdvConfigPrefKey, cdvConfigPrefValue);

            break;

        case 'windowSplashScreenBrandingImage':

            // display warning only when set.

            if (cdvConfigPrefValue) {

                events.emit('warn', `"${themeKey}" is currently not supported by the splash screen compatibility library. https://issuetracker.google.com/issues/194301890`);

            }

            updateProjectSplashScreenImage(locations, themeKey, cdvConfigPrefKey, cdvConfigPrefValue);

            // force the themes value to `@color/cdv_splashscreen_icon_background`

            if (!cdvConfigPrefValue && themeTargetNode) {

                splashScreenTheme.remove(themeTargetNode);

            } else if (cdvConfigPrefValue) {

                // if there is no current node, create a new node.

                if (!themeTargetNode) {

                    themeTargetNode = themes.getroot().makeelement('item', { name: themeKey });

                    splashScreenTheme.append(themeTargetNode);

                }

                // set the user defined color.

                themeTargetNode.text = '@drawable/ic_cdv_splashscreen_branding';

            }

            break;

        case 'windowSplashScreenIconBackgroundColor':

            // use the user defined value for "colors.xml"

            updateProjectSplashScreenIconBackgroundColor(cdvConfigPrefValue, locations);

            // force the themes value to `@color/cdv_splashscreen_icon_background`

            if (!cdvConfigPrefValue && themeTargetNode) {

                // currentItem.remove();

                splashScreenTheme.remove(themeTargetNode);

            } else if (cdvConfigPrefValue) {

                // if there is no current color, create a new node.

                if (!themeTargetNode) {

                    themeTargetNode = themes.getroot().makeelement('item', { name: themeKey });

                    splashScreenTheme.append(themeTargetNode);

                }

                // set the user defined color.

                themeTargetNode.text = '@color/cdv_splashscreen_icon_background';

            }

            break;

        case 'windowSplashScreenAnimationDuration':

            themeTargetNode.text = cdvConfigPrefValue || '200';

            break;

        case 'postSplashScreenTheme':

            themeTargetNode.text = cdvConfigPrefValue || '@style/Theme.AppCompat.NoActionBar';

            break;

        default:

            events.emit('warn', `The theme property "${themeKey}" does not exist`);

        }

    });

    fs.writeFileSync(locations.themes, themes.write({ indent: 4 }), 'utf-8');

    events.emit('verbose', 'Wrote out Android application themes to ' + locations.themes);
}

Actually, i did NOT solve the problem by now, but made a little step forward.

The error occurs in node_modules\cordova-android\lib\prepare.js in the method: updateProjectSplashScreen(…), because var splashScreenTheme is null, because theme (= style[@name=“Theme.App.SplashScreen”]) is not found or var themeTargetNode is null, because theme item is not found.

I added the theme manually in themes.xml (& colors.xml) in platforms/android/app/src/main/res/values dir with the following content:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <style name="Theme.App.SplashScreen" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <!-- Set the splash screen background -->
        <!-- <item name="android:windowBackground">@android:color/white</item> -->
        <item name="windowSplashScreenBackground">@color/cdv_splashscreen_background</item>
        
        <!-- Use windowSplashScreenAnimatedIcon to add either a drawable or an animated drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_cdv_splashscreen</item>
        
        <!-- Required for animated icons -->
        <item name="windowSplashScreenAnimationDuration">200</item>
		
		<!-- Required: Set the theme of the Activity that directly follows your splash screen. -->
		<!-- <item name="postSplashScreenTheme">@style/Theme.App</item> -->
		<item name="postSplashScreenTheme">@style/Theme.AppCompat.NoActionBar</item>
    </style>
</resources>

Content of colors.xml:

<?xml version='1.0' encoding='utf-8'?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="cdv_splashscreen_background">#FFFFFF</color>
</resources>

This solved the error during build, but the app crashes on splash screen without errors, when it’s started. I think i misconfigured the theme. I hope anyone here can correct the themes.xml file.

P.S.: Same problem was posted on stackoverflow: Ionic android 12 splash error while adding cordova-android@11 - Stack Overflow.

P.P.S.: I had to fix 2 other issues not mentioned in the ionic migration guide (https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11):

  • Did NOT remove cordova-plugin-androidx-adapter to prevent errors like: package android.support.v4.content does not exist or package android.support.v7.app does not exist.
  • Changed compile to implementation in some old plugins’ gradle files (in platforms/android/ cordova-plugin-badge/XXX-badge.gradle, com-sarriaroman-photoviewer/XXX-photoviewer.gradle & phonegap-plugin-barcodescanner/XXX-barcodescanner.gradle)

I automated all corrections by using a “before ionic build script” in package.json, e.g.:

 "scripts": { "ionic:build:before": "./scripts/fix_android.sh", ... }

Content of scripts/fix_android.sh:

#!/usr/bin/env bash
echo ""
echo "Executing fix_android.sh"

## Copy resources/android/colors.xml & themes.xml to platforms/android/app/src/main/res/values
target=platforms/android/app/src/main/res/values
if [ -d "$target" ]; then
	file4="resources/android/colors.xml"
	if [ -f "$file4" ]; then
	  cp -rvf "$file4" platforms/android/app/src/main/res/values
	  echo "Copied colors.xml"
	else
	  echo ${file4}" not found!"
	fi
	file5="resources/android/themes.xml"
	if [ -f "$file5" ]; then
	  cp -rvf "$file5" platforms/android/app/src/main/res/values
	  echo "Copied themes.xml"
	else
	  echo ${file5}" not found!"
	fi
else
	echo ${target}" not found!"
fi

## Change compile to implementation in old plugins' gradle files
file6="platforms/android/cordova-plugin-badge/XXX-badge.gradle"
if [ -f "$file6" ]; then
	if grep -lr "compile" "$file6"; then
		sed -i '' "s/compile/implementation/g" "$file6"
		echo "Changed compile to implementation in XXX-badge.gradle"
	else
		echo "$file6"
		echo "File already corrected!"	
	fi
else
	echo ${file6}" not found!"
fi
file7="platforms/android/com-sarriaroman-photoviewer/XXX-photoviewer.gradle"
if [ -f "$file7" ]; then
	if grep -lr "compile" "$file7"; then
		sed -i '' "s/compile/implementation/g" "$file7"
		echo "Changed compile to implementation in XXX-photoviewer.gradle"
	else
		echo "$file7"
		echo "File already corrected!"
	fi	
else
	echo ${file7}" not found!"
fi
file8="platforms/android/phonegap-plugin-barcodescanner/XXX-barcodescanner.gradle"
if [ -f "$file8" ]; then
	if grep -lr "compile" "$file8"; then
		sed -i '' "s/compile/implementation/g" "$file8"
		echo "Changed compile to implementation in XXX-barcodescanner.gradle"
	else
		echo "$file8"
		echo "File already corrected!"	
	fi
else
	echo ${file8}" not found!"
fi

## Remove all <splash> tags from config.xml
file9="config.xml"
if [ -f "$file9" ]; then
	if grep -lr "<splash" "$file9"; then
		sed -i '' "s/<splash .* \/>//g" "$file9"
		echo "Removed <splash> tags in config.xml"
	else
		echo "$file9"
		echo "File already corrected!"	
	fi
else
	echo ${file9}" not found!"
fi

echo ""
echo ""

UPDATE: Actually, the solution solves the compile problem, but the app runs on android 12 only and crashes on splash screen on all other android versions.

Thank you for your answer, it actually compile, and only run on android 12, do you have already solved that problem?

No, i did not find a solution by now.
I think there are 2 possible problems:

  1. The splash screen is misconfigured in my themes.xml
  2. A older plugin crashes the app on startup

The main problem is i can not see an error while crashing.

Is the same here, I think is the themes.xml file because it doesn’t show nothing on start.

2 Likes

try this: remove node_modules. remove package-lock.json and reinstall.

The error with previous versions is definitely related to themes.xml. If I remove themes.xml from config.xml, my app works again on Android 11 and below.

However, the splash screen is terrible without themes.xml.
When I have time, I’ll go through the themes.xml attribute by attribute and hope to find the error that causes Android 11 to crash.

As a workaround, I recommend removing the themes.xml from the conifg.xml.

My config.xml part for android:

    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="android-targetSdkVersion" value="32" />
        <preference name="android-minSdkVersion" value="26" />
        <preference name="AndroidXEnabled" value="true" />
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
            <application android:usesCleartextTraffic="true" />
            <application android:exported="true" />
            <activity android:windowSoftInputMode="adjustResize" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
        <!-- 
        <resource-file src="resources/android/xml/themes.xml" trget="app/src/main/res/values/themes.xml" />
        -->
        <resource-file src="resources/android/xml/colors.xml" target="app/src/main/res/values/colors.xml" />
    </platform>

Did you find any solution yet? I am facing the same problem.