[configure-splash-screen] Refactor and integrate with @expo/config

packages/config/package.json

@@ -37,6 +37,7 @@
     "@expo/config-types": "^39.0.0",
     "@expo/image-utils": "0.3.6",
     "@expo/json-file": "8.2.23",
+    "@expo/configure-splash-screen": "~0.1.11",
     "@expo/plist": "0.0.10",
     "fs-extra": "9.0.0",
     "glob": "7.1.6",

packages/config/src/android/SplashScreen.ts

@@ -1,23 +1,45 @@
+import {
+  AndroidSplashScreenConfig,
+  SplashScreenImageResizeMode,
+  configureAndroidSplashScreen,
+} from '@expo/configure-splash-screen';
+
 import { ExpoConfig } from '../Config.types';
 import { addWarningAndroid } from '../WarningAggregator';
 
-export function getSplashScreen(config: ExpoConfig) {
-  if (config.splash?.image || config.android?.splash?.mdpi) {
-    return true;
-  } else {
-    return false;
+export function getSplashScreenConfig(config: ExpoConfig): AndroidSplashScreenConfig | undefined {
+  if (!config.splash && !config.android?.splash) {
+    return;
   }
+
+  const result: AndroidSplashScreenConfig = {
+    imageResizeMode:
+      config.android?.splash?.resizeMode ??
+      config.splash?.resizeMode ??
+      SplashScreenImageResizeMode.CONTAIN,
+    backgroundColor:
+      config.android?.splash?.backgroundColor ?? config.splash?.backgroundColor ?? '#FFFFFF', // white
+    image:
+      config.android?.splash?.xxxhdpi ??
+      config.android?.splash?.xxhdpi ??
+      config.android?.splash?.xhdpi ??
+      config.android?.splash?.hdpi ??
+      config.android?.splash?.mdpi ??
+      config.splash?.image,
+  };
+
+  return result;
 }
 
 export async function setSplashScreenAsync(config: ExpoConfig, projectRoot: string) {
-  const splash = getSplashScreen(config);
-  if (!splash) {
+  const splashConfig = getSplashScreenConfig(config);
+  if (!splashConfig) {
     return;
   }
 
-  addWarningAndroid(
-    'splash',
-    'This is the image that your app uses on the loading screen, we recommend installing and using expo-splash-screen.',
-    'https://github.com/expo/expo/blob/master/packages/expo-splash-screen/README.md'
-  );
+  try {
+    await configureAndroidSplashScreen(projectRoot, splashConfig);
+  } catch (e) {
+    addWarningAndroid('splash', e);
+  }
 }

packages/config/src/ios/SplashScreen.ts

@@ -1,23 +1,39 @@
+import {
+  configureIosSplashScreen,
+  IosSplashScreenConfig,
+  SplashScreenImageResizeMode,
+} from '@expo/configure-splash-screen';
+
 import { ExpoConfig } from '../Config.types';
 import { addWarningIOS } from '../WarningAggregator';
 
-export function getSplashScreen(config: ExpoConfig) {
-  if (config.splash || config.ios?.splash) {
-    return true;
-  } else {
-    return false;
+export function getSplashScreen(config: ExpoConfig): IosSplashScreenConfig | undefined {
+  if (!config.splash && !config.ios?.splash) {
+    return;
   }
+
+  const result: IosSplashScreenConfig = {
+    imageResizeMode:
+      config.ios?.splash?.resizeMode ??
+      config.splash?.resizeMode ??
+      SplashScreenImageResizeMode.CONTAIN,
+    backgroundColor:
+      config.ios?.splash?.backgroundColor ?? config.splash?.backgroundColor ?? '#FFFFFF', // white
+    image: config.ios?.splash?.image ?? config.splash?.image,
+  };
+
+  return result;
 }
 
-export function setSplashScreenAsync(config: ExpoConfig, projectRoot: string) {
-  const splash = getSplashScreen(config);
-  if (!splash) {
+export async function setSplashScreenAsync(config: ExpoConfig, projectRoot: string) {
+  const splashConfig = getSplashScreen(config);
+
+  if (!splashConfig) {
     return;
   }
-
-  addWarningIOS(
-    'splash',
-    'This is the image that your app uses on the loading screen, we recommend installing and using expo-splash-screen.',
-    'https://github.com/expo/expo/blob/master/packages/expo-splash-screen/README.md'
-  );
+  try {
+    await configureIosSplashScreen(projectRoot, splashConfig);
+  } catch (e) {
+    addWarningIOS('splash', e);
+  }
 }

packages/configure-splash-screen/package.json

@@ -3,9 +3,10 @@
   "version": "0.1.16",
   "description": "Supplementary module for 'expo-splash-screen' providing cli configuration command",
   "bin": {
-    "configure-splash-screen": "./build/configure.js",
-    "expo-splash-screen": "./build/configure.js"
+    "configure-splash-screen": "./build/index-cli.js",
+    "expo-splash-screen": "./build/index-cli.js"
   },
+  "main": "./build/index.js",
   "scripts": {
     "start": "yarn run prepare",
     "build": "tsc",
@@ -44,6 +45,7 @@
     "core-js": "^3.6.5",
     "deep-equal": "^2.0.3",
     "fs-extra": "^9.0.0",
+    "lodash": "^4.17.15",
     "pngjs": "^5.0.0",
     "xcode": "^3.0.0",
     "xml-js": "^1.6.11"
@@ -57,8 +59,10 @@
     "@types/color-string": "^1.5.0",
     "@types/deep-equal": "^1.0.1",
     "@types/fs-extra": "^9.0.1",
-    "@types/jest": "^26.0.8",
+    "@types/jest": "^25.2.2",
+    "@types/lodash": "^4.14.155",
     "babel-jest": "^26.2.2",
+    "conditional-type-checks": "^1.0.5",
     "eslint": "^6.8.0",
     "jest": "^26.2.2",
     "memfs": "^3.1.2",

packages/configure-splash-screen/src/SplashScreenConfig.ts

@@ -0,0 +1,95 @@
+import { Color } from 'color-string';
+
+import { SplashScreenImageResizeModeType, SplashScreenStatusBarStyleType } from './constants';
+
+/**
+ * iOS SplashScreen config.
+ */
+export type IosSplashScreenConfig = {
+  backgroundColor: Color;
+
+  image?: string;
+  imageResizeMode?: SplashScreenImageResizeModeType;
+
+  statusBar?: {
+    hidden?: boolean;
+    style?: SplashScreenStatusBarStyleType;
+  };
+
+  darkMode?: {
+    backgroundColor?: Color;
+    image?: string;
+  };
+};
+
+/**
+ * Android SplashScreen config.
+ */
+export type AndroidSplashScreenConfig = {
+  backgroundColor: Color;
+
+  image?: string;
+  imageResizeMode?: SplashScreenImageResizeModeType;
+
+  statusBar?: {
+    hidden?: boolean;
+    style?: SplashScreenStatusBarStyleType;
+    translucent?: boolean;
+    backgroundColor?: Color;
+  };
+
+  darkMode?: {
+    backgroundColor?: Color;
+    image?: string;
+    statusBar?: {
+      style?: SplashScreenStatusBarStyleType;
+      backgroundColor?: Color;
+    };
+  };
+};
+
+/**
+ * The very same as `IosSplashScreenConfig`, but JSON-friendly (values for each property are JavaScript built-in types).
+ */
+export type IosSplashScreenConfigJSON = {
+  backgroundColor: string;
+
+  image?: string;
+  imageResizeMode?: string;
+
+  statusBar?: {
+    hidden?: boolean;
+    style?: string;
+  };
+
+  darkMode?: {
+    backgroundColor?: string;
+    image?: string;
+  };
+};
+
+/**
+ * The very same as `IosSplashScreenConfig`, but JSON-friendly (values for each property are JavaScript built-in types).
+ */
+export type AndroidSplashScreenConfigJSON = {
+  backgroundColor: string;
+
+  image?: string;
+  imageResizeMode?: string;
+
+  statusBar?: {
+    hidden?: boolean;
+    style?: string;
+    translucent?: boolean;
+    backgroundColor?: string;
+  };
+
+  darkMode?: {
+    backgroundColor?: string;
+    image?: string;
+    statusBar?: {
+      style?: string;
+      backgroundColor?: string;
+    };
+  };
+};

packages/configure-splash-screen/src/__tests__/cli-command.test.ts

@@ -0,0 +1,138 @@
+import configureAndroid from '../android';
+import createCommand from '../cli-command';
+import configureIos from '../ios';
+
+jest.mock('../ios', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+jest.mock('../android', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+describe('cli-command', () => {
+  describe('successful scenarios', () => {
+    it('basic scenario', async () => {
+      await createCommand().parseAsync(['--background-color', 'rgba(10, 20, 30, 0.2)'], {
+        from: 'user',
+      });
+      expect(configureIos).toHaveBeenLastCalledWith(expect.anything(), {
+        backgroundColor: 'rgba(10, 20, 30, 0.2)',
+        darkMode: {
+          backgroundColor: undefined,
+          image: undefined,
+        },
+        image: undefined,
+        imageResizeMode: undefined,
+        statusBar: {
+          hidden: undefined,
+          style: undefined,
+        },
+      });
+      expect(configureAndroid).toHaveBeenLastCalledWith(expect.anything(), {
+        backgroundColor: 'rgba(10, 20, 30, 0.2)',
+        darkMode: {
+          backgroundColor: undefined,
+          image: undefined,
+          statusBar: {
+            backgroundColor: undefined,
+            style: undefined,
+          },
+        },
+        image: undefined,
+        imageResizeMode: undefined,
+        statusBar: {
+          hidden: undefined,
+          style: undefined,
+        },
+      });
+    });
+
+    it('all available parameters', async () => {
+      /* eslint-disable prettier/prettier */
+      await createCommand().parseAsync(
+        [
+          '--background-color',
+          'rgba(10, 20, 30, 0.2)',
+          '--image-path',
+          './assets/background.png',
+          '--image-resize-mode',
+          'contain',
+          '--dark-mode-background-color',
+          'yellow',
+          '--dark-mode-image-path',
+          './assets/background-dark.png',
+          '--status-bar-style',
+          'dark-content',
+          '--status-bar-hidden',
+          '--status-bar-translucent',
+          '--status-bar-background-color',
+          '#FFEECCDD',
+          '--dark-mode-status-bar-background-color',
+          'red',
+          '--dark-mode-status-bar-style',
+          'light-content',
+        ],
+        {
+          from: 'user',
+        }
+      );
+      /* eslint-enable */
+      expect(configureIos).toHaveBeenLastCalledWith(expect.anything(), {
+        backgroundColor: 'rgba(10, 20, 30, 0.2)',
+        image: './assets/background.png',
+        imageResizeMode: 'contain',
+        darkMode: {
+          backgroundColor: 'yellow',
+          image: './assets/background-dark.png',
+        },
+        statusBar: {
+          hidden: true,
+          style: 'dark-content',
+        },
+      });
+      expect(configureAndroid).toHaveBeenLastCalledWith(expect.anything(), {
+        backgroundColor: 'rgba(10, 20, 30, 0.2)',
+        image: './assets/background.png',
+        imageResizeMode: 'contain',
+        darkMode: {
+          backgroundColor: 'yellow',
+          image: './assets/background-dark.png',
+          statusBar: {
+            backgroundColor: 'red',
+            style: 'light-content',
+          },
+        },
+        statusBar: {
+          backgroundColor: '#FFEECCDD',
+          hidden: true,
+          style: 'dark-content',
+          translucent: true,
+        },
+      });
+    });
+  });
+
+  describe('rejecting scenarios', () => {
+    it('reject upon wrong platform', async () => {
+      await expect(async () => {
+        await createCommand().parseAsync(['--platform', 'what?'], { from: 'user' });
+      }).rejects.toThrowError(
+        new Error(
+          `'platform': Invalid value 'what?'. Available values are "android" | "ios" | "all".`
+        )
+      );
+    });
+
+    it('reject upon missing backgroundColor', async () => {
+      await expect(async () => {
+        await createCommand().parseAsync(['--platform', 'all'], { from: 'user' });
+      }).rejects.toThrowError(
+        new Error(
+          `'backgroundColor': Required option is not provided. Provide a valid color string.`
+        )
+      );
+    });
+  });
+});