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);
}
1 Like

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.

I changed the themes.xml.

<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen.Common">

And this works for me.

1 Like

Hi,
Did anyone find a solution for this. I am having the same issue. This is in my themes.xml

<style name="MyTheme" parent="android:Theme.Holo.Light">

This is in my colors.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="cdv_splashscreen_background">#FFFFFF</color>
</resources>

This the error I get.

Cannot read property 'find' of null
TypeError: Cannot read property 'find' of null
    at C:\NetQuarry\Adrian\Source\MatrixCR.Mobile\node_modules\cordova-android\lib\prepare.js:387:49
    at Array.forEach (<anonymous>)
    at updateProjectSplashScreen (C:\NetQuarry\Adrian\Source\MatrixCR.Mobile\node_modules\cordova-android\lib\prepare.js:384:7)
    at updateProjectAccordingTo (C:\NetQuarry\Adrian\Source\MatrixCR.Mobile\node_modules\cordova-android\lib\prepare.js:269:5)
    at C:\NetQuarry\Adrian\Source\MatrixCR.Mobile\node_modules\cordova-android\lib\prepare.js:67:21
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 0)
[ERROR] An error occurred while running subprocess cordova.

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

        Re-running this command with the --verbose flag may provide more information.

can you found any solution ??
i am gating" Cannot read properties of null (reading ā€˜findā€™) "

    <platform name="android">
        <preference name="Scheme" value="http" />
        <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:requestLegacyExternalStorage="true" />
            <application android:usesCleartextTraffic="true" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <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/icon/drawable-ldpi-icon.png" />
        <preference name="AndroidWindowSplashScreenBackground" value="#000000" />
    </platform>

The issue I faced is that the themes.xml was getting overwritten by one of the plugin and that is when I was getting the error Cannot read properties of null as the Theme name in the Manifest file was not matching the one the the themes.xml.

You will need to find which plugin is overwriting the theme.xml.

Hope this is helpful.

thanks for reply, yes i got itā€¦ plugin name cordova-plugin-telerik-imagepicker

but i think ionic team should create one full blog topic or some cmd to create icon or splash screen for android 12 or higher like ionic cordova resources --splash something like that.

1 Like

im added this to my config.xml

<platform name="android">

        ...
        <config-file parent="/resources" target="app/src/main/res/values/themes.xml">
             <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
                  <item name="windowSplashScreenBackground">#FFFFFF</item>
                  <item name="windowSplashScreenAnimatedIcon">@drawable/notification_icon.png</item>
                  <item name="windowSplashScreenBrandingImage">@drawable/notification_icon.png</item>
                  <item name="windowSplashScreenIconBackgroundColor">#FFFFFF</item>
                  <item name="windowSplashScreenAnimationDuration">1000</item>
                  <item name="postSplashScreenTheme">@style/MyTheme</item>
             </style>
        </config-file>
        ...
</platform>
1 Like

Hi can you elaborate a bit on that? Iā€™ve been struggling with update to Android 12 myself for quite a time and this is the last broken thing. I understand that the cordova splashscreen plugin no longer works and the thing is to use the native android splashscreen. But I donā€™t understand the Cordova setup. Those things are not documented anywhere as far as I can tellā€¦

Whatā€™s @drawable/notification_icon.png in your case? And where is it supposed to be located in the project tree?

Thanks!

itā€™s worked for me and not even one less item