expo-splash-screen CLI tool is not working anymore

Summary

I previously ran yarn run configure-splash-screen -b ‘#121212’ -i app/assets/1/images/splash.png —status-bar-hidden and it worked perfectly since I tried to add the -i option on the same command I get a weird output, could not find anything about it.

$ /Users/path/Code/work/path/app/node_modules/.bin/configure-splash-screen -b ‘#121212’ -i app/assets/1/images/splash.png —status-bar-hidden

Cannot read property ‘productType’ of undefined

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

bare

What platform(s) does this occur on?

Android, iOS

SDK Version (managed workflow only)

No response

Environment

Expo CLI 4.7.3 environment info: System: OS: macOS 11.4 Shell: 5.8 - /bin/zsh Binaries: Node: 15.8.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.9 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 IDEs: Android Studio: 4.0 AI-193.6911.18.40.6626763 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild npmPackages: expo: ~40.0.0 => 40.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: ^0.64.1 => 0.64.2 react-native-web: ^0.16.0 => 0.16.0 Expo Workflow: bare

Reproducible demo or steps to reproduce from a blank project

Install a bare workflow project run yarn run configure-splash-screen -b ‘#F4F4F4’ -i app/assets/1/images/splash.png --status-bar-hidden then yarn run configure-splash-screen -i ‘cover’ -b ‘#F4F4F4’ -i app/assets/1/images/splash.png --status-bar-hidden

[ramisalem]

Any update on this?

[Thomas0c]

FWIW I looked further into this in order to determine the error and determine whether I would be able to fix it. I’m only able to replicate the issue on an ejected Expo project.

Summary of my findings:

• Source of the thrown error is the @expo/configure-splash-screen package.
• It happens for Android due to missing darkModeBackgroundColor and darkModeStatusBarBackgroundColor which results in deletionFlag: true being set, which in turn throws the error when calling:

const configuredDarkXmlContent = ensureDesiredXmlContent(darkFileContent, {
            backgroundColor: darkModeBackgroundColor,
            statusBarBackgroundColor: darkModeStatusBarBackgroundColor,
});

Ref: https://github.com/expo/expo-cli/blob/main/unlinked-packages/configure-splash-screen/src/android/Colors.xml.ts#L122-L125

• A temporary fix is to provide darkModeStatusBarBackgroundColor, darkModeBackgroundColor and statusBarBackgroundColor.

In summary

Following commands do not work (throw above mentioned error):

yarn configure-splash-screen -b red

yarn configure-splash-screen -b red --dark-mode-background-color red

The following works:

yarn configure-splash-screen -b red --dark-mode-background-color red --dark-mode-status-bar-background-color red --status-bar-background-color red

Patching

In order to solve the issue for the project I’m working on (where dark mode support is not needed) I’ve overwritten the ./android/Colors.xml.js file of the project using patch-package to check for the presence of both darkModeBackgroundColor and darkModeStatusBarBackgroundColor prior to configuring dark xml content. Thus the patched configureColorsXml function looks like this:

async function configureColorsXml(androidMainPath, config) {
    var _a, _b, _c, _d;
    const backgroundColor = config.backgroundColor;
    const darkModeBackgroundColor = (_a = config.darkMode) === null || _a === void 0 ? void 0 : _a.backgroundColor;
    const statusBarBackgroundColor = (_b = config.statusBar) === null || _b === void 0 ? void 0 : _b.backgroundColor;
    const darkModeStatusBarBackgroundColor = (_d = (_c = config.darkMode) === null || _c === void 0 ? void 0 : _c.statusBar) === null || _d === void 0 ? void 0 : _d.backgroundColor;
    if (darkModeStatusBarBackgroundColor && !statusBarBackgroundColor) {
        throw new Error(`'darkModeStatusBarBackgroundColor' is available only if 'statusBarBackgroundColor' is provided as well.`);
    }
    
    // Throw error if missing darkModeBackgroundColor
    if (darkModeStatusBarBackgroundColor && !darkModeBackgroundColor) {
        throw new Error(`'darkModeStatusBarBackgroundColor' is available only if 'darkModeStatusBarBackgroundColor' is provided as well.`);
    }
    
    // Throw error if missing darkModeStatusBarBackgroundColor
    if (!darkModeStatusBarBackgroundColor && darkModeBackgroundColor) {
        throw new Error(`'darkModeBackgroundColor' is available only if 'darkModeStatusBarBackgroundColor' is provided as well.`);
    }

    const filePath = path_1.default.resolve(androidMainPath, COLORS_XML_FILE_PATH);
    const darkFilePath = path_1.default.resolve(androidMainPath, COLORS_NIGHT_XML_FILE_PATH);
    const xmlContent = await xml_manipulation_1.readXmlFile(filePath);
    const darkFileContent = await xml_manipulation_1.readXmlFile(darkFilePath);
    const configuredXmlContent = ensureDesiredXmlContent(xmlContent, {
        backgroundColor,
        statusBarBackgroundColor,
    });
    
    // Make sure that darkModeBackgroundColor and darkModeStatusBarBackgroundColor are set to avoid 'Cannot convert ExpectedElement to Element when deletionFlag is setExpectedElement' error
    if (darkModeBackgroundColor && darkModeStatusBarBackgroundColor) {
        const configuredDarkXmlContent = ensureDesiredXmlContent(darkFileContent, {
            backgroundColor: darkModeBackgroundColor,
            statusBarBackgroundColor: darkModeStatusBarBackgroundColor,
        });
        await xml_manipulation_1.writeXmlFileOrRemoveFileUponNoResources(darkFilePath, configuredDarkXmlContent, {
            disregardComments: true,
        });
    }

    await xml_manipulation_1.writeXmlFile(filePath, configuredXmlContent);
}

With that patched the following now works for both iOS and Android:

yarn configure-splash-screen -b red