react-native-bootsplash 5.5.3 → 6.0.0-beta.1

package/src/generate.ts

@@ -1,5 +1,9 @@
 import murmurhash from "@emotion/hash";
-import { IOSConfig } from "@expo/config-plugins";
+import { getConfig as getExpoConfig } from "@expo/config";
+import * as Expo from "@expo/config-plugins";
+import { assignColorValue } from "@expo/config-plugins/build/android/Colors";
+import { addImports } from "@expo/config-plugins/build/android/codeMod";
+import { mergeContents } from "@expo/config-plugins/build/utils/generateCode";
 import plist from "@expo/plist";
 import { findProjectRoot } from "@react-native-community/cli-tools";
 import {
@@ -7,7 +11,7 @@ import {
   IOSProjectConfig,
 } from "@react-native-community/cli-types";
 import detectIndent from "detect-indent";
-import fs from "fs";
+import fs from "fs-extra";
 import { parse as parseHtml } from "node-html-parser";
 import path from "path";
 import pc from "picocolors";
@@ -21,14 +25,39 @@ import formatXml, { XMLFormatterOptions } from "xml-formatter";
 import { Manifest } from ".";
 
 const workingPath = process.env.INIT_CWD ?? process.env.PWD ?? process.cwd();
+const projectRoot = findProjectRoot(workingPath);
+
+export type Platforms = ("android" | "ios" | "web")[];
+
+export type RGBColor = {
+  R: string;
+  G: string;
+  B: string;
+};
 
 export type Color = {
   hex: string;
-  rgb: {
-    R: string;
-    G: string;
-    B: string;
-  };
+  rgb: RGBColor;
+};
+
+export const log = {
+  error: (text: string) => {
+    console.log(pc.red(`❌  ${text}`));
+  },
+  title: (emoji: string, text: string) => {
+    console.log(`\n${emoji}  ${pc.underline(pc.bold(text))}`);
+  },
+  warn: (text: string) => {
+    console.log(pc.yellow(`⚠️   ${text}`));
+  },
+  write: (filePath: string, dimensions?: { width: number; height: number }) => {
+    console.log(
+      `    ${path.relative(workingPath, filePath)}` +
+        (dimensions != null
+          ? ` (${dimensions.width}x${dimensions.height})`
+          : ""),
+    );
+  },
 };
 
 export const parseColor = (value: string): Color => {
@@ -45,22 +74,24 @@ export const parseColor = (value: string): Color => {
       : "#" + up;
 
   const rgb: Color["rgb"] = {
-    R: (parseInt("" + hex[1] + hex[2], 16) / 255).toPrecision(15),
-    G: (parseInt("" + hex[3] + hex[4], 16) / 255).toPrecision(15),
-    B: (parseInt("" + hex[5] + hex[6], 16) / 255).toPrecision(15),
+    R: (Number.parseInt("" + hex[1] + hex[2], 16) / 255).toPrecision(15),
+    G: (Number.parseInt("" + hex[3] + hex[4], 16) / 255).toPrecision(15),
+    B: (Number.parseInt("" + hex[5] + hex[6], 16) / 255).toPrecision(15),
   };
 
-  return { hex, rgb };
+  return { hex: hex.toLowerCase(), rgb };
 };
 
 const getStoryboard = ({
   logoHeight,
   logoWidth,
   background: { R, G, B },
+  fileNameSuffix,
 }: {
   logoHeight: number;
   logoWidth: number;
   background: Color["rgb"];
+  fileNameSuffix: string;
 }) => {
   const frameWidth = 375;
   const frameHeight = 667;
@@ -74,6 +105,7 @@ const getStoryboard = ({
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21678"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -86,7 +118,7 @@ const getStoryboard = ({
                         <rect key="frame" x="0.0" y="0.0" width="${frameWidth}" height="${frameHeight}"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
+                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo-${fileNameSuffix}" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
                                 <rect key="frame" x="${logoX}" y="${logoY}" width="${logoWidth}" height="${logoHeight}"/>
                                 <accessibility key="accessibilityConfiguration">
                                     <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
@@ -94,7 +126,7 @@ const getStoryboard = ({
                             </imageView>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
-                        <color key="backgroundColor" red="${R}" green="${G}" blue="${B}" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" name="BootSplashBackground-${fileNameSuffix}"/>
                         <constraints>
                             <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="Fh9-Fy-1nT"/>
                             <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="nvB-Ic-PnI"/>
@@ -107,73 +139,54 @@ const getStoryboard = ({
         </scene>
     </scenes>
     <resources>
-        <image name="BootSplashLogo" width="${logoWidth}" height="${logoHeight}"/>
+        <image name="BootSplashLogo-${fileNameSuffix}" width="${logoWidth}" height="${logoHeight}"/>
+        <namedColor name="BootSplashBackground-${fileNameSuffix}">
+            <color red="${R}" green="${G}" blue="${B}" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
     </resources>
 </document>
 `;
 };
 
-export const addFileToXcodeProject = (filePath: string) => {
-  const projectRoot = findProjectRoot(workingPath);
-
-  const pbxprojectPath = IOSConfig.Paths.getPBXProjectPath(projectRoot);
-  const project = IOSConfig.XcodeUtils.getPbxproj(projectRoot);
-  const xcodeProjectPath = IOSConfig.Paths.getXcodeProjectPath(projectRoot);
-
-  IOSConfig.XcodeUtils.addResourceFileToGroup({
-    filepath: filePath,
-    groupName: path.parse(xcodeProjectPath).name,
-    project,
-    isBuildFile: true,
-  });
-
-  hfs.write(pbxprojectPath, project.writeSync());
-  logWrite(pbxprojectPath);
-};
-
 // Freely inspired by https://github.com/humanwhocodes/humanfs
 export const hfs = {
   buffer: (path: string) => fs.readFileSync(path),
   exists: (path: string) => fs.existsSync(path),
+  isDir: (path: string) => fs.lstatSync(path).isDirectory(),
   json: (path: string) => JSON.parse(fs.readFileSync(path, "utf-8")) as unknown,
   readDir: (path: string) => fs.readdirSync(path, "utf-8"),
   realPath: (path: string) => fs.realpathSync(path, "utf-8"),
-  rm: (path: string) => fs.rmSync(path, { force: true }),
+  rm: (path: string) => fs.rmSync(path, { force: true, recursive: true }),
   text: (path: string) => fs.readFileSync(path, "utf-8"),
 
+  copy: (src: string, dest: string) => {
+    if (hfs.isDir(src) || !hfs.exists(dest)) {
+      return fs.copySync(src, dest, { overwrite: true });
+    }
+
+    const srcBuffer = fs.readFileSync(src);
+    const destBuffer = fs.readFileSync(dest);
+
+    if (!srcBuffer.equals(destBuffer)) {
+      return fs.copySync(src, dest, { overwrite: true });
+    }
+  },
   ensureDir: (dir: string) => {
     fs.mkdirSync(dir, { recursive: true });
   },
-  write: (file: string, data: string) => {
-    const trimmed = data.trim();
-    fs.writeFileSync(file, trimmed === "" ? trimmed : trimmed + "\n", "utf-8");
+  write: (path: string, content: string) => {
+    const trimmed = content.trim();
+    fs.writeFileSync(path, trimmed === "" ? trimmed : trimmed + "\n", "utf-8");
   },
 };
 
-export const log = {
-  error: (text: string) => console.log(pc.red(`❌  ${text}`)),
-  text: (text: string) => console.log(text),
-  title: (emoji: string, text: string) =>
-    console.log(`\n${emoji}  ${pc.underline(pc.bold(text))}`),
-  warn: (text: string) => console.log(pc.yellow(`⚠️   ${text}`)),
-};
-
-export const logWrite = (
-  filePath: string,
-  dimensions?: { width: number; height: number },
-) =>
-  console.log(
-    `    ${path.relative(workingPath, filePath)}` +
-      (dimensions != null ? ` (${dimensions.width}x${dimensions.height})` : ""),
-  );
-
-export const writeJson = (file: string, json: object) => {
-  hfs.write(file, JSON.stringify(json, null, 2));
-  logWrite(file);
+export const writeJson = (filePath: string, content: object) => {
+  hfs.write(filePath, JSON.stringify(content, null, 2));
+  log.write(filePath);
 };
 
-export const readXml = (file: string) => {
-  const xml = hfs.text(file);
+export const readXml = (filePath: string) => {
+  const xml = hfs.text(filePath);
   const { indent } = detectIndent(xml);
 
   const formatOptions: XMLFormatterOptions = {
@@ -184,11 +197,11 @@ export const readXml = (file: string) => {
 };
 
 export const writeXml = (
-  file: string,
-  xml: string,
+  filePath: string,
+  content: string,
   options?: XMLFormatterOptions,
 ) => {
-  const formatted = formatXml(xml, {
+  const formatted = formatXml(content, {
     collapseContent: true,
     forceSelfClosingEmptyTag: true,
     indentation: "    ",
@@ -197,12 +210,12 @@ export const writeXml = (
     ...options,
   });
 
-  hfs.write(file, formatted);
-  logWrite(file);
+  hfs.write(filePath, formatted);
+  log.write(filePath);
 };
 
-export const readHtml = (file: string) => {
-  const html = hfs.text(file);
+export const readHtml = (filePath: string) => {
+  const html = hfs.text(filePath);
   const { type, amount } = detectIndent(html);
 
   const formatOptions: PrettierOptions = {
@@ -214,11 +227,11 @@ export const readHtml = (file: string) => {
 };
 
 export const writeHtml = async (
-  file: string,
-  html: string,
+  filePath: string,
+  content: string,
   options?: Omit<PrettierOptions, "parser" | "plugins">,
 ) => {
-  const formatted = await prettier.format(html, {
+  const formatted = await prettier.format(content, {
     parser: "html",
     plugins: [htmlPlugin, cssPlugin],
     tabWidth: 2,
@@ -226,35 +239,84 @@ export const writeHtml = async (
     ...options,
   });
 
-  hfs.write(file, formatted);
-  logWrite(file);
+  hfs.write(filePath, formatted);
+  log.write(filePath);
 };
 
-export const cleanIOSAssets = (dir: string, prefix: string) => {
+const cleanIOS = (dir: string) => {
   hfs
     .readDir(dir)
-    .filter((file) => file.startsWith(prefix) && file.endsWith(".png"))
+    .filter((file) => file === "Colors.xcassets" || file === "Images.xcassets")
     .map((file) => path.join(dir, file))
-    .forEach((file) => hfs.rm(file));
+    .flatMap((dir) =>
+      hfs
+        .readDir(dir)
+        .filter((file) => file.startsWith("BootSplash"))
+        .map((file) => path.join(dir, file)),
+    )
+    .forEach((file) => {
+      hfs.rm(file);
+    });
 };
 
-export const getIOSAssetFileName = async ({
-  name,
-  image,
-  width,
-}: {
-  name: string;
-  image: Sharp;
-  width: number;
-}) => {
+const getImageBase64 = async (
+  image: Sharp | undefined,
+  width: number,
+): Promise<string> => {
+  if (image == null) {
+    return "";
+  }
+
   const buffer = await image
     .clone()
     .resize(width)
     .png({ quality: 100 })
     .toBuffer();
 
-  const hash = murmurhash(buffer.toString("base64"));
-  return `${name}-${hash}`;
+  return buffer.toString("base64");
+};
+
+const getFileNameSuffix = async ({
+  background,
+  brand,
+  brandWidth,
+  darkBackground,
+  darkBrand,
+  darkLogo,
+  logo,
+  logoWidth,
+}: {
+  background: Color;
+  brand: Sharp | undefined;
+  brandWidth: number;
+  darkBackground: Color | undefined;
+  darkBrand: Sharp | undefined;
+  darkLogo: Sharp | undefined;
+  logo: Sharp;
+  logoWidth: number;
+}) => {
+  const [logoHash, darkLogoHash, brandHash, darkBrandHash] = await Promise.all([
+    getImageBase64(logo, logoWidth),
+    getImageBase64(darkLogo, logoWidth),
+    getImageBase64(brand, brandWidth),
+    getImageBase64(darkBrand, brandWidth),
+  ]);
+
+  const record: Record<string, string> = {
+    background: background.hex,
+    darkBackground: darkBackground?.hex ?? "",
+    logo: logoHash,
+    darkLogo: darkLogoHash,
+    brand: brandHash,
+    darkBrand: darkBrandHash,
+  };
+
+  const stableKey = Object.keys(record)
+    .sort()
+    .map((key) => record[key])
+    .join();
+
+  return murmurhash(stableKey);
 };
 
 const ensureSupportedFormat = async (
@@ -273,23 +335,38 @@ const ensureSupportedFormat = async (
   }
 };
 
-const getAndroidResPath = (
-  android: AndroidProjectConfig,
-  {
-    brandHeight,
-    brandWidth,
-    flavor,
-    logoHeight,
-    logoWidth,
-  }: {
-    brandHeight: number;
-    brandWidth: number;
-    flavor: string;
-    logoHeight: number;
-    logoWidth: number;
-  },
-): string | undefined => {
-  const androidResPath = path.resolve(
+const getAndroidOutputPath = ({
+  android,
+  assetsOutputPath,
+  brandHeight,
+  brandWidth,
+  flavor,
+  isExpo,
+  logoHeight,
+  logoWidth,
+  platforms,
+}: {
+  android: AndroidProjectConfig | undefined;
+  assetsOutputPath: string;
+  brandHeight: number;
+  brandWidth: number;
+  flavor: string;
+  isExpo: boolean;
+  logoHeight: number;
+  logoWidth: number;
+  platforms: Platforms;
+}) => {
+  if (!platforms.includes("android")) {
+    return;
+  }
+  if (isExpo) {
+    return path.resolve(assetsOutputPath, "android");
+  }
+  if (android == null) {
+    return;
+  }
+
+  const androidOutputPath = path.resolve(
     android.sourceDir,
     android.appName,
     "src",
@@ -297,74 +374,123 @@ const getAndroidResPath = (
     "res",
   );
 
-  if (!hfs.exists(androidResPath)) {
-    log.warn(
+  if (!hfs.exists(androidOutputPath)) {
+    return log.warn(
       `No ${path.relative(
         workingPath,
-        androidResPath,
+        androidOutputPath,
       )} directory found. Skipping Android assets generation…`,
     );
-  } else if (logoWidth > 288 || logoHeight > 288) {
-    log.warn(
+  }
+
+  if (logoWidth > 288 || logoHeight > 288) {
+    return log.warn(
       "Logo size exceeding 288x288dp will be cropped by Android. Skipping Android assets generation…",
     );
-  } else if (brandHeight > 80 || brandWidth > 200) {
-    log.warn(
+  }
+  if (brandWidth > 200 || brandHeight > 80) {
+    return log.warn(
       "Brand size exceeding 200x80dp will be cropped by Android. Skipping Android assets generation…",
     );
-  } else {
-    if (logoWidth > 192 || logoHeight > 192) {
-      log.warn(`Logo size exceeds 192x192dp. It might be cropped by Android.`);
-    }
+  }
 
-    return androidResPath;
+  if (logoWidth > 192 || logoHeight > 192) {
+    log.warn("Logo size exceeds 192x192dp. It might be cropped by Android.");
   }
+
+  return androidOutputPath;
 };
 
-const getIOSProjectPath = (ios: IOSProjectConfig): string | undefined => {
-  if (ios.xcodeProject == null) {
-    log.warn("No Xcode project found. Skipping iOS assets generation…");
+const getIOSOutputPath = ({
+  assetsOutputPath,
+  ios,
+  isExpo,
+  platforms,
+}: {
+  ios: IOSProjectConfig | undefined;
+  assetsOutputPath: string;
+  isExpo: boolean;
+  platforms: Platforms;
+}) => {
+  if (!platforms.includes("ios")) {
+    return;
+  }
+  if (isExpo) {
+    return path.resolve(assetsOutputPath, "ios");
+  }
+  if (ios == null) {
     return;
   }
+  if (ios.xcodeProject == null) {
+    return log.warn("No Xcode project found. Skipping iOS assets generation…");
+  }
 
-  const iosProjectPath = path
+  const iosOutputPath = path
     .resolve(ios.sourceDir, ios.xcodeProject.name)
     .replace(/\.(xcodeproj|xcworkspace)$/, "");
 
-  if (!hfs.exists(iosProjectPath)) {
-    log.warn(
+  if (!hfs.exists(iosOutputPath)) {
+    return log.warn(
       `No ${path.relative(
         workingPath,
-        iosProjectPath,
+        iosOutputPath,
       )} directory found. Skipping iOS assets generation…`,
     );
-  } else {
-    return iosProjectPath;
   }
+
+  return iosOutputPath;
 };
 
-const getHtmlTemplatePath = (html: string): string | undefined => {
+const getHtmlTemplatePath = ({
+  html,
+  platforms,
+}: {
+  html: string;
+  platforms: Platforms;
+}) => {
+  if (!platforms.includes("web")) {
+    return;
+  }
+
   const htmlTemplatePath = path.resolve(workingPath, html);
 
   if (!hfs.exists(htmlTemplatePath)) {
-    log.warn(
+    return log.warn(
       `No ${path.relative(
         workingPath,
         htmlTemplatePath,
       )} file found. Skipping HTML + CSS generation…`,
     );
-  } else {
-    return htmlTemplatePath;
   }
+
+  return htmlTemplatePath;
+};
+
+export const getImageHeight = (
+  image: Sharp | undefined,
+  width: number,
+): Promise<number> => {
+  if (image == null) {
+    return Promise.resolve(0);
+  }
+
+  return image
+    .clone()
+    .resize(width)
+    .toBuffer()
+    .then((buffer) => sharp(buffer).metadata())
+    .then(({ height = 0 }) => Math.round(height));
 };
 
 export type AddonConfig = {
   licenseKey: string;
+  isExpo: boolean;
+  fileNameSuffix: string;
 
-  androidResPath: string | undefined;
-  iosProjectPath: string | undefined;
-  htmlTemplatePath: string | undefined;
-  assetsOutputPath: string | undefined;
+  androidOutputPath: string | void;
+  iosOutputPath: string | void;
+  htmlTemplatePath: string | void;
+  assetsOutputPath: string;
 
   logoPath: string;
   darkLogoPath: string | undefined;
@@ -408,10 +534,10 @@ export const generate = async ({
   ios?: IOSProjectConfig;
 
   logo: string;
-  platforms: string[];
+  platforms: Platforms;
   background: string;
   logoWidth: number;
-  assetsOutput?: string;
+  assetsOutput: string;
   html: string;
   flavor: string;
 
@@ -422,10 +548,14 @@ export const generate = async ({
   darkLogo?: string;
   darkBrand?: string;
 }) => {
+  const isExpo =
+    getExpoConfig(projectRoot, { skipSDKVersionRequirement: true }).exp
+      .sdkVersion != null;
+
   const [nodeStringVersion = ""] = process.versions.node.split(".");
-  const nodeVersion = parseInt(nodeStringVersion, 10);
+  const nodeVersion = Number.parseInt(nodeStringVersion, 10);
 
-  if (!isNaN(nodeVersion) && nodeVersion < 18) {
+  if (!Number.isNaN(nodeVersion) && nodeVersion < 18) {
     log.error("Requires Node 18 (or higher)");
     process.exit(1);
   }
@@ -445,10 +575,7 @@ export const generate = async ({
       ? path.resolve(workingPath, args.darkBrand)
       : undefined;
 
-  const assetsOutputPath =
-    args.assetsOutput != null
-      ? path.resolve(workingPath, args.assetsOutput)
-      : undefined;
+  const assetsOutputPath = path.resolve(workingPath, args.assetsOutput);
 
   const logo = sharp(logoPath);
   const darkLogo = darkLogoPath != null ? sharp(darkLogoPath) : undefined;
@@ -470,7 +597,7 @@ export const generate = async ({
 
   if (licenseKey != null && !executeAddon) {
     log.warn(
-      `You specified a license key but none of the options that requires it.`,
+      "You specified a license key but none of the options that requires it.",
     );
   }
 
@@ -499,20 +626,8 @@ export const generate = async ({
   await ensureSupportedFormat("Brand", brand);
   await ensureSupportedFormat("Dark brand", darkBrand);
 
-  const logoHeight = await logo
-    .clone()
-    .resize(logoWidth)
-    .toBuffer()
-    .then((buffer) => sharp(buffer).metadata())
-    .then(({ height = 0 }) => Math.round(height));
-
-  const brandHeight =
-    (await brand
-      ?.clone()
-      .resize(brandWidth)
-      .toBuffer()
-      .then((buffer) => sharp(buffer).metadata())
-      .then(({ height = 0 }) => Math.round(height))) ?? 0;
+  const logoHeight = await getImageHeight(logo, logoWidth);
+  const brandHeight = await getImageHeight(brand, brandWidth);
 
   if (logoWidth < args.logoWidth) {
     log.warn(
@@ -525,52 +640,45 @@ export const generate = async ({
     );
   }
 
-  const androidResPath =
-    platforms.includes("android") && android != null
-      ? getAndroidResPath(android, {
-          brandHeight,
-          brandWidth,
-          flavor,
-          logoHeight,
-          logoWidth,
-        })
-      : undefined;
-
-  const iosProjectPath =
-    platforms.includes("ios") && ios != null
-      ? getIOSProjectPath(ios)
-      : undefined;
-
-  const htmlTemplatePath = platforms.includes("web")
-    ? getHtmlTemplatePath(html)
-    : undefined;
-
-  if (androidResPath != null) {
-    log.title("🤖", "Android");
+  const fileNameSuffix = await getFileNameSuffix({
+    background,
+    brand,
+    brandWidth,
+    darkBackground,
+    darkBrand,
+    darkLogo,
+    logo,
+    logoWidth,
+  });
 
-    const valuesPath = path.resolve(androidResPath, "values");
-    hfs.ensureDir(valuesPath);
+  const androidOutputPath = getAndroidOutputPath({
+    android,
+    assetsOutputPath,
+    brandHeight,
+    brandWidth,
+    flavor,
+    isExpo,
+    logoHeight,
+    logoWidth,
+    platforms,
+  });
 
-    const colorsXmlPath = path.resolve(valuesPath, "colors.xml");
-    const colorsXmlEntry = `<color name="bootsplash_background">${background.hex}</color>`;
+  const iosOutputPath = getIOSOutputPath({
+    assetsOutputPath,
+    ios,
+    isExpo,
+    platforms,
+  });
 
-    if (hfs.exists(colorsXmlPath)) {
-      const { root, formatOptions } = readXml(colorsXmlPath);
-      const nextColor = parseHtml(colorsXmlEntry);
-      const prevColor = root.querySelector(
-        'color[name="bootsplash_background"]',
-      );
+  const htmlTemplatePath = getHtmlTemplatePath({
+    html,
+    platforms,
+  });
 
-      if (prevColor != null) {
-        prevColor.replaceWith(nextColor);
-      } else {
-        root.querySelector("resources")?.appendChild(nextColor);
-      }
+  if (androidOutputPath != null) {
+    log.title("🤖", "Android");
 
-      writeXml(colorsXmlPath, root.toString(), formatOptions);
-    } else {
-      writeXml(colorsXmlPath, `<resources>${colorsXmlEntry}</resources>`);
-    }
+    hfs.ensureDir(androidOutputPath);
 
     await Promise.all(
       [
@@ -581,7 +689,7 @@ export const generate = async ({
         { ratio: 4, suffix: "xxxhdpi" },
       ].map(({ ratio, suffix }) => {
         const drawableDirPath = path.resolve(
-          androidResPath,
+          androidOutputPath,
           `drawable-${suffix}`,
         );
 
@@ -618,74 +726,99 @@ export const generate = async ({
               .toFile(filePath),
           )
           .then(() => {
-            logWrite(filePath, {
+            log.write(filePath, {
               width: canvasSize,
               height: canvasSize,
             });
           });
       }),
     );
-  }
 
-  if (iosProjectPath != null) {
-    log.title("🍏", "iOS");
+    if (!isExpo) {
+      const valuesPath = path.resolve(androidOutputPath, "values");
+      hfs.ensureDir(valuesPath);
 
-    const storyboardPath = path.resolve(
-      iosProjectPath,
-      "BootSplash.storyboard",
-    );
+      const colorsXmlPath = path.resolve(valuesPath, "colors.xml");
+      const colorsXmlEntry = `<color name="bootsplash_background">${background.hex}</color>`;
 
-    writeXml(
-      storyboardPath,
-      getStoryboard({
-        logoHeight,
-        logoWidth,
-        background: background.rgb,
-      }),
-      { whiteSpaceAtEndOfSelfclosingTag: false },
-    );
+      if (hfs.exists(colorsXmlPath)) {
+        const { root, formatOptions } = readXml(colorsXmlPath);
+        const nextColor = parseHtml(colorsXmlEntry);
 
-    addFileToXcodeProject(
-      path.join(path.basename(iosProjectPath), "BootSplash.storyboard"),
-    );
+        const prevColor = root.querySelector(
+          'color[name="bootsplash_background"]',
+        );
+
+        if (prevColor != null) {
+          prevColor.replaceWith(nextColor);
+        } else {
+          root.querySelector("resources")?.appendChild(nextColor);
+        }
 
-    const infoPlistPath = path.join(iosProjectPath, "Info.plist");
+        writeXml(colorsXmlPath, root.toString(), formatOptions);
+      } else {
+        writeXml(colorsXmlPath, `<resources>${colorsXmlEntry}</resources>`);
+      }
+    }
+  }
 
-    const infoPlist = plist.parse(hfs.text(infoPlistPath)) as Record<
-      string,
-      unknown
-    >;
+  if (iosOutputPath != null) {
+    log.title("🍏", "iOS");
 
-    infoPlist["UILaunchStoryboardName"] = "BootSplash";
+    hfs.ensureDir(iosOutputPath);
+    cleanIOS(iosOutputPath);
 
-    const formatted = formatXml(plist.build(infoPlist), {
-      collapseContent: true,
-      forceSelfClosingEmptyTag: false,
-      indentation: "\t",
-      lineSeparator: "\n",
-      whiteSpaceAtEndOfSelfclosingTag: false,
-    })
-      .replace(/<string\/>/gm, "<string></string>")
-      .replace(/^\t/gm, "");
+    const storyboardPath = path.resolve(iosOutputPath, "BootSplash.storyboard");
 
-    hfs.write(infoPlistPath, formatted);
-    logWrite(infoPlistPath);
+    const colorsSetPath = path.resolve(
+      iosOutputPath,
+      "Colors.xcassets",
+      `BootSplashBackground-${fileNameSuffix}.colorset`,
+    );
 
     const imageSetPath = path.resolve(
-      iosProjectPath,
+      iosOutputPath,
       "Images.xcassets",
-      "BootSplashLogo.imageset",
+      `BootSplashLogo-${fileNameSuffix}.imageset`,
     );
 
+    hfs.ensureDir(colorsSetPath);
     hfs.ensureDir(imageSetPath);
-    cleanIOSAssets(imageSetPath, "bootsplash_logo");
 
-    const logoFileName = await getIOSAssetFileName({
-      name: "bootsplash_logo",
-      image: logo,
-      width: logoWidth,
+    writeXml(
+      storyboardPath,
+      getStoryboard({
+        logoHeight,
+        logoWidth,
+        background: background.rgb,
+        fileNameSuffix,
+      }),
+      { whiteSpaceAtEndOfSelfclosingTag: false },
+    );
+
+    writeJson(path.resolve(colorsSetPath, "Contents.json"), {
+      colors: [
+        {
+          idiom: "universal",
+          color: {
+            "color-space": "srgb",
+            components: {
+              blue: background.rgb.B,
+              green: background.rgb.G,
+              red: background.rgb.R,
+              alpha: "1.000",
+            },
+          },
+        },
+      ],
+      info: {
+        author: "xcode",
+        version: 1,
+      },
     });
 
+    const logoFileName = `logo-${fileNameSuffix}`;
+
     writeJson(path.resolve(imageSetPath, "Contents.json"), {
       images: [
         {
@@ -727,10 +860,60 @@ export const generate = async ({
           .png({ quality: 100 })
           .toFile(filePath)
           .then(({ width, height }) => {
-            logWrite(filePath, { width, height });
+            log.write(filePath, { width, height });
           });
       }),
     );
+
+    if (!isExpo) {
+      const infoPlistPath = path.resolve(iosOutputPath, "Info.plist");
+
+      const infoPlist = plist.parse(hfs.text(infoPlistPath)) as Record<
+        string,
+        unknown
+      >;
+
+      infoPlist["UILaunchStoryboardName"] = "BootSplash";
+
+      const formatted = formatXml(plist.build(infoPlist), {
+        collapseContent: true,
+        forceSelfClosingEmptyTag: false,
+        indentation: "\t",
+        lineSeparator: "\n",
+        whiteSpaceAtEndOfSelfclosingTag: false,
+      })
+        .replace(/<string\/>/gm, "<string></string>")
+        .replace(/^\t/gm, "");
+
+      hfs.write(infoPlistPath, formatted);
+      log.write(infoPlistPath);
+
+      const pbxprojectPath =
+        Expo.IOSConfig.Paths.getPBXProjectPath(projectRoot);
+
+      const xcodeProjectPath =
+        Expo.IOSConfig.Paths.getXcodeProjectPath(projectRoot);
+
+      const project = Expo.IOSConfig.XcodeUtils.getPbxproj(projectRoot);
+      const projectName = path.basename(iosOutputPath);
+
+      Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
+        filepath: path.join(projectName, "BootSplash.storyboard"),
+        groupName: path.parse(xcodeProjectPath).name,
+        project,
+        isBuildFile: true,
+      });
+
+      Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
+        filepath: path.join(projectName, "Colors.xcassets"),
+        groupName: path.parse(xcodeProjectPath).name,
+        project,
+        isBuildFile: true,
+      });
+
+      hfs.write(pbxprojectPath, project.writeSync());
+      log.write(pbxprojectPath);
+    }
   }
 
   if (htmlTemplatePath != null) {
@@ -797,52 +980,49 @@ export const generate = async ({
     await writeHtml(htmlTemplatePath, root.toString(), formatOptions);
   }
 
-  if (assetsOutputPath != null) {
-    log.title("📄", "Assets");
-
-    hfs.ensureDir(assetsOutputPath);
+  log.title("📄", "Assets");
 
-    writeJson(path.resolve(assetsOutputPath, "bootsplash_manifest.json"), {
-      background: background.hex,
-      logo: {
-        width: logoWidth,
-        height: logoHeight,
-      },
-    } satisfies Manifest);
-
-    await Promise.all(
-      [
-        { ratio: 1, suffix: "" },
-        { ratio: 1.5, suffix: "@1,5x" },
-        { ratio: 2, suffix: "@2x" },
-        { ratio: 3, suffix: "@3x" },
-        { ratio: 4, suffix: "@4x" },
-      ].map(({ ratio, suffix }) => {
-        const filePath = path.resolve(
-          assetsOutputPath,
-          `bootsplash_logo${suffix}.png`,
-        );
+  hfs.ensureDir(assetsOutputPath);
 
-        return logo
-          .clone()
-          .resize(Math.round(logoWidth * ratio))
-          .png({ quality: 100 })
-          .toFile(filePath)
-          .then(({ width, height }) => {
-            logWrite(filePath, { width, height });
-          });
-      }),
-    );
-  }
+  writeJson(path.resolve(assetsOutputPath, "manifest.json"), {
+    background: background.hex,
+    logo: {
+      width: logoWidth,
+      height: logoHeight,
+    },
+  } satisfies Manifest);
+
+  await Promise.all(
+    [
+      { ratio: 1, suffix: "" },
+      { ratio: 1.5, suffix: "@1,5x" },
+      { ratio: 2, suffix: "@2x" },
+      { ratio: 3, suffix: "@3x" },
+      { ratio: 4, suffix: "@4x" },
+    ].map(({ ratio, suffix }) => {
+      const filePath = path.resolve(assetsOutputPath, `logo${suffix}.png`);
+
+      return logo
+        .clone()
+        .resize(Math.round(logoWidth * ratio))
+        .png({ quality: 100 })
+        .toFile(filePath)
+        .then(({ width, height }) => {
+          log.write(filePath, { width, height });
+        });
+    }),
+  );
 
   if (licenseKey != null && executeAddon) {
     const addon = requireAddon();
 
     await addon?.execute({
       licenseKey,
+      isExpo,
+      fileNameSuffix,
 
-      androidResPath,
-      iosProjectPath,
+      androidOutputPath,
+      iosOutputPath,
       htmlTemplatePath,
       assetsOutputPath,
 
@@ -865,7 +1045,7 @@ export const generate = async ({
       darkBrand,
     });
   } else {
-    log.text(`
+    console.log(`
 ${pc.blue("┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓")}
 ${pc.blue("┃")}  🔑  ${pc.bold(
       "Get a license key for brand image / dark mode support",
@@ -876,5 +1056,338 @@ ${pc.blue("┃")}      ${pc.underline(
 ${pc.blue("┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛")}`);
   }
 
-  log.text(`\n💖  Thanks for using ${pc.underline("react-native-bootsplash")}`);
+  console.log(
+    `\n💖  Thanks for using ${pc.underline("react-native-bootsplash")}`,
+  );
+};
+
+export type ExpoProps = {
+  assetsDir?: string;
+  edgeToEdge?: boolean;
+};
+
+export type ExpoPlugin = Expo.ConfigPlugin<ExpoProps>;
+
+const withAndroidAssets: ExpoPlugin = (config, props) =>
+  Expo.withDangerousMod(config, [
+    "android",
+    (config) => {
+      const { assetsDir = "assets/bootsplash" } = props;
+      const { platformProjectRoot } = config.modRequest;
+
+      const srcDir = path.resolve(workingPath, assetsDir, "android");
+
+      const destDir = path.resolve(
+        platformProjectRoot,
+        "app",
+        "src",
+        "main",
+        "res",
+      );
+
+      for (const drawableDir of hfs.readDir(srcDir)) {
+        const srcDrawableDir = path.join(srcDir, drawableDir);
+        const destDrawableDir = path.join(destDir, drawableDir);
+
+        hfs.ensureDir(destDrawableDir);
+
+        for (const file of hfs.readDir(srcDrawableDir)) {
+          hfs.copy(
+            path.join(srcDrawableDir, file),
+            path.join(destDrawableDir, file),
+          );
+        }
+      }
+
+      return config;
+    },
+  ]);
+
+const withAndroidManifest: ExpoPlugin = (config) =>
+  Expo.withAndroidManifest(config, (config) => {
+    config.modResults.manifest.application?.forEach((application) => {
+      if (application.$["android:name"] === ".MainApplication") {
+        const { activity } = application;
+
+        activity?.forEach((activity) => {
+          if (activity.$["android:name"] === ".MainActivity") {
+            activity.$["android:theme"] = "@style/BootTheme";
+          }
+        });
+      }
+    });
+
+    return config;
+  });
+
+const withMainActivity: ExpoPlugin = (config) =>
+  Expo.withMainActivity(config, (config) => {
+    const { modResults } = config;
+    const { language } = modResults;
+
+    const withImports = addImports(
+      modResults.contents.replace(
+        /(\/\/ )?setTheme\(R\.style\.AppTheme\)/,
+        "// setTheme(R.style.AppTheme)",
+      ),
+      ["android.os.Bundle", "com.zoontek.rnbootsplash.RNBootSplash"],
+      language === "java",
+    );
+
+    // indented with 4 spaces
+    const withInit = mergeContents({
+      src: withImports,
+      comment: "    //",
+      tag: "bootsplash-init",
+      offset: 0,
+      anchor: /super\.onCreate\(null\)/,
+      newSrc:
+        "    RNBootSplash.init(this, R.style.BootTheme)" +
+        (language === "java" ? ";" : ""),
+    });
+
+    return {
+      ...config,
+      modResults: {
+        ...modResults,
+        contents: withInit.contents,
+      },
+    };
+  });
+
+const withAndroidStyles: ExpoPlugin = (config, props) =>
+  Expo.withAndroidStyles(config, async (config) => {
+    const { assetsDir = "assets/bootsplash", edgeToEdge = false } = props;
+    const { modResults } = config;
+    const { resources } = modResults;
+    const { style = [] } = resources;
+
+    const manifest = (await hfs.json(
+      path.resolve(workingPath, assetsDir, "manifest.json"),
+    )) as Manifest;
+
+    const item = [
+      {
+        $: { name: "postBootSplashTheme" },
+        _: "@style/AppTheme",
+      },
+      {
+        $: { name: "bootSplashBackground" },
+        _: "@color/bootsplash_background",
+      },
+      {
+        $: { name: "bootSplashLogo" },
+        _: "@drawable/bootsplash_logo",
+      },
+    ];
+
+    if (manifest.brand != null) {
+      item.push({
+        $: { name: "bootSplashBrand" },
+        _: "@drawable/bootsplash_brand",
+      });
+    }
+
+    const withBootTheme = [
+      ...style.filter(({ $ }) => $.name !== "BootTheme"),
+      {
+        $: {
+          name: "BootTheme",
+          parent: edgeToEdge
+            ? "Theme.BootSplash.EdgeToEdge"
+            : "Theme.BootSplash",
+        },
+        item,
+      },
+    ];
+
+    return {
+      ...config,
+      modResults: {
+        ...modResults,
+        resources: {
+          ...resources,
+          style: withBootTheme,
+        },
+      },
+    };
+  });
+
+const withAndroidColors: ExpoPlugin = (config, props) =>
+  Expo.withAndroidColors(config, async (config) => {
+    const { assetsDir = "assets/bootsplash" } = props;
+
+    const manifest = (await hfs.json(
+      path.resolve(workingPath, assetsDir, "manifest.json"),
+    )) as Manifest;
+
+    config.modResults = assignColorValue(config.modResults, {
+      name: "bootsplash_background",
+      value: manifest.background,
+    });
+
+    return config;
+  });
+
+const withAndroidColorsNight: ExpoPlugin = (config, props) =>
+  Expo.withAndroidColorsNight(config, async (config) => {
+    const { assetsDir = "assets/bootsplash" } = props;
+
+    const manifest = (await hfs.json(
+      path.resolve(workingPath, assetsDir, "manifest.json"),
+    )) as Manifest;
+
+    if (manifest.darkBackground != null) {
+      config.modResults = assignColorValue(config.modResults, {
+        name: "bootsplash_background",
+        value: manifest.darkBackground,
+      });
+    }
+
+    return config;
+  });
+
+const withIOSAssets: ExpoPlugin = (config, props) =>
+  Expo.withDangerousMod(config, [
+    "ios",
+    (config) => {
+      const { assetsDir = "assets/bootsplash" } = props;
+      const { platformProjectRoot, projectName = "" } = config.modRequest;
+
+      const srcDir = path.resolve(workingPath, assetsDir, "ios");
+      const destDir = path.resolve(platformProjectRoot, projectName);
+
+      cleanIOS(destDir);
+
+      hfs.copy(
+        path.join(srcDir, "BootSplash.storyboard"),
+        path.join(destDir, "BootSplash.storyboard"),
+      );
+
+      for (const xcassetsDir of ["Colors.xcassets", "Images.xcassets"]) {
+        const srcXcassetsDir = path.join(srcDir, xcassetsDir);
+        const destXcassetsDir = path.join(destDir, xcassetsDir);
+
+        hfs.ensureDir(destXcassetsDir);
+
+        for (const file of hfs.readDir(srcXcassetsDir)) {
+          hfs.copy(
+            path.join(srcXcassetsDir, file),
+            path.join(destXcassetsDir, file),
+          );
+        }
+      }
+
+      return config;
+    },
+  ]);
+
+const withAppDelegate: ExpoPlugin = (config) =>
+  Expo.withAppDelegate(config, (config) => {
+    const [sdkStringVersion = ""] = config.sdkVersion?.split(".") ?? "";
+    const isAtLeastExpo51 = Number.parseInt(sdkStringVersion, 10) >= 51;
+
+    const { modResults } = config;
+    const { language } = modResults;
+
+    if (language !== "objc" && language !== "objcpp") {
+      throw new Error(
+        `Cannot modify the project AppDelegate as it's not in a supported language: ${language}`,
+      );
+    }
+
+    const withHeader = mergeContents({
+      src: modResults.contents,
+      comment: "//",
+      tag: "bootsplash-header",
+      offset: 1,
+      anchor: /#import "AppDelegate\.h"/,
+      newSrc: '#import "RNBootSplash.h"',
+    });
+
+    const withRootView = mergeContents({
+      src: withHeader.contents,
+      comment: "//",
+      tag: "bootsplash-init",
+      offset: 0,
+      anchor: /@end/,
+      newSrc: isAtLeastExpo51
+        ? dedent`
+          - (void)customizeRootView:(RCTRootView *)rootView {
+            [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
+          }
+        `
+        : dedent`
+          - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initProps:(NSDictionary *)initProps {
+            UIView *rootView = [super createRootViewWithBridge:bridge moduleName:moduleName initProps:initProps];
+            [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
+            return rootView;
+          }
+        `,
+    });
+
+    return {
+      ...config,
+      modResults: {
+        ...modResults,
+        contents: withRootView.contents,
+      },
+    };
+  });
+
+const withInfoPlist: ExpoPlugin = (config) =>
+  Expo.withInfoPlist(config, (config) => {
+    config.modResults["UILaunchStoryboardName"] = "BootSplash";
+    return config;
+  });
+
+const withXcodeProject: ExpoPlugin = (config) =>
+  Expo.withXcodeProject(config, (config) => {
+    const { projectName = "" } = config.modRequest;
+
+    Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
+      filepath: path.join(projectName, "BootSplash.storyboard"),
+      groupName: projectName,
+      project: config.modResults,
+      isBuildFile: true,
+    });
+
+    Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
+      filepath: path.join(projectName, "Colors.xcassets"),
+      groupName: projectName,
+      project: config.modResults,
+      isBuildFile: true,
+    });
+
+    return config;
+  });
+
+export const withGenerate: ExpoPlugin = (config, props = {}) => {
+  const plugins: ExpoPlugin[] = [];
+  const { platforms = [] } = config;
+
+  if (platforms.includes("android")) {
+    plugins.push(
+      withAndroidAssets,
+      withAndroidManifest,
+      withMainActivity,
+      withAndroidStyles,
+      withAndroidColors,
+      withAndroidColorsNight,
+    );
+  }
+
+  if (platforms.includes("ios")) {
+    plugins.push(
+      withIOSAssets,
+      withAppDelegate,
+      withInfoPlist,
+      withXcodeProject,
+    );
+  }
+
+  return Expo.withPlugins(
+    config,
+    plugins.map((plugin) => [plugin, props]),
+  );
 };