add background color handling

Author: BenoitSerrano

src/modules/setSplashScreen/ios/service.ts

@@ -2,7 +2,8 @@ import { addIosImageSetContents, EImageSetType } from '../../../services/ios/ser
 import { generateResizedAssets } from '../../../services/image.processing';
 import { config } from './config';
 import { join } from 'path';
-import { replaceInFile, copyFile } from '../../../services/file.processing';
+import { replaceInFile } from '../../../services/file.processing';
+import { getNormalizedRGBAColors } from '../../../services/color.processing';
 import { EResizeMode } from '../../../services/type';
 import { getIosPackageName } from '../../../utils';
 
@@ -14,17 +15,24 @@ export const addIosSplashScreen = async (
   try {
     const iosSplashImageFolder = addIosImageSetContents('SplashImage', EImageSetType.IMAGE);
     await generateIosSplashImages(imageSource, iosSplashImageFolder);
-    copyStoryBoardToProject();
+    setBackgroundColorToStoryBoard(backgroundColor);
     setNewSplashScreenFileRefInInfoPlist();
   } catch (err) {
     console.log(err);
   }
 };
 
-const copyStoryBoardToProject = () => {
-  copyFile(
+const setBackgroundColorToStoryBoard = (backgroundColor: string) => {
+  const { red, green, blue, alpha } = getNormalizedRGBAColors(backgroundColor);
+  replaceInFile(
     join(__dirname, `../../../../templates/ios/SplashScreen.storyboard`),
-    `./ios/${config.iosStoryboardName}.storyboard`
+    `./ios/${config.iosStoryboardName}.storyboard`,
+    [
+      {
+        oldContent: /<color.*key="backgroundColor".*\/>/g,
+        newContent: `<color key="backgroundColor" red="${red}" green="${green}" blue="${blue}" alpha="${alpha}" colorSpace="custom" customColorSpace="sRGB"/>`,
+      },
+    ]
   );
 };
 
@@ -40,7 +48,7 @@ const setNewSplashScreenFileRefInInfoPlist = () => {
 };
 
 const generateIosSplashImages = (imageSource: string, iosSplashImageFolder: string) => {
-  const { multipliers, size, backgroundColor } = config.iosSplashImage;
+  const { multipliers, size } = config.iosSplashImage;
   return Promise.all(
     multipliers.map(multiplier =>
       generateResizedAssets(

src/services/color.processing.ts

@@ -1,5 +1,21 @@
 import colorParser from 'color-string';
 
+const BASE = 255;
+
+export const getNormalizedRGBAColors = (color: string) => {
+  try {
+    const [red, green, blue, alpha] = colorParser.get.rgb(color);
+    return {
+      red: red / BASE,
+      green: green / BASE,
+      blue: blue / BASE,
+      alpha,
+    };
+  } catch (err) {
+    throw new Error('Could not parse your color');
+  }
+};
+
 export const getHexColor = (color: string) => {
   try {
     const RGBA = colorParser.get.rgb(color);