react-native-bootsplash 4.0.0-alpha.1 → 4.0.0

package/src/generate.ts

@@ -1,10 +1,12 @@
 import chalk from "chalk";
 import fs from "fs-extra";
-import jimp from "jimp";
+import Jimp from "jimp";
 import path from "path";
 
 const logoFileName = "bootsplash_logo";
 const xcassetName = "BootSplashLogo";
+// https://github.com/androidx/androidx/blob/androidx-main/core/core-splashscreen/src/main/res/values/dimens.xml#L22
+const splashScreenIconSizeNoBackground = 288;
 const androidColorName = "bootsplash_background";
 const androidColorRegex = /<color name="bootsplash_background">#\w+<\/color>/g;
 
@@ -96,17 +98,6 @@ const getStoryboard = ({
 `;
 };
 
-const bootSplashXml = `<?xml version="1.0" encoding="utf-8"?>
-
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
-    <item android:drawable="@color/${androidColorName}" />
-
-    <item>
-        <bitmap android:src="@mipmap/${logoFileName}" android:gravity="center" />
-    </item>
-</layer-list>
-`;
-
 const log = (text: string, dim = false) => {
   console.log(dim ? chalk.dim(text) : text);
 };
@@ -127,7 +118,7 @@ export const generate = async ({
   android,
   ios,
 
-  workingDirectory,
+  workingPath,
   logoPath,
   backgroundColor,
   logoWidth,
@@ -142,12 +133,13 @@ export const generate = async ({
     projectPath: string;
   } | null;
 
-  workingDirectory: string;
+  workingPath: string;
   logoPath: string;
+  assetsPath?: string;
+
   backgroundColor: string;
-  logoWidth: number;
   flavor: string;
-  assetsPath?: string;
+  logoWidth: number;
 }) => {
   if (!isValidHexadecimal(backgroundColor)) {
     throw new Error(
@@ -155,80 +147,64 @@ export const generate = async ({
     );
   }
 
-  const image = await jimp.read(logoPath);
+  const image = await Jimp.read(logoPath);
   const backgroundColorHex = toFullHexadecimal(backgroundColor);
 
-  const images: {
-    filePath: string;
-    width: number;
-    height: number;
-  }[] = [];
-
   const getHeight = (size: number) =>
     Math.ceil(size * (image.bitmap.height / image.bitmap.width));
 
-  const width = {
-    "@1x": logoWidth,
-    "@1,5x": logoWidth * 1.5,
-    "@2x": logoWidth * 2,
-    "@3x": logoWidth * 3,
-    "@4x": logoWidth * 4,
-  };
-
-  const height = {
-    "@1x": getHeight(width["@1x"]),
-    "@1,5x": getHeight(width["@1,5x"]),
-    "@2x": getHeight(width["@2x"]),
-    "@3x": getHeight(width["@3x"]),
-    "@4x": getHeight(width["@4x"]),
-  };
+  const logWrite = (
+    emoji: string,
+    filePath: string,
+    dimensions?: { width: number; height: number },
+  ) =>
+    log(
+      `${emoji}  ${path.relative(workingPath, filePath)}` +
+        (dimensions != null
+          ? ` (${dimensions.width}x${dimensions.height})`
+          : ""),
+    );
 
   if (assetsPath && fs.existsSync(assetsPath)) {
-    images.push(
-      {
-        filePath: path.resolve(assetsPath, logoFileName + ".png"),
-        width: width["@1x"],
-        height: height["@1x"],
-      },
-      {
-        filePath: path.resolve(assetsPath, logoFileName + "@1,5x.png"),
-        width: width["@1,5x"],
-        height: height["@1,5x"],
-      },
-      {
-        filePath: path.resolve(assetsPath, logoFileName + "@2x.png"),
-        width: width["@2x"],
-        height: height["@2x"],
-      },
-      {
-        filePath: path.resolve(assetsPath, logoFileName + "@3x.png"),
-        width: width["@3x"],
-        height: height["@3x"],
-      },
-      {
-        filePath: path.resolve(assetsPath, logoFileName + "@4x.png"),
-        width: width["@4x"],
-        height: height["@4x"],
-      },
+    log(`\n    ${chalk.underline("Assets")}`);
+
+    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 fileName = `${logoFileName}${suffix}.png`;
+        const filePath = path.resolve(assetsPath, fileName);
+        const width = logoWidth * ratio;
+        const height = getHeight(width);
+
+        return image
+          .clone()
+          .resize(width, height)
+          .quality(100)
+          .writeAsync(filePath)
+          .then(() => {
+            logWrite("✨", filePath, { width, height });
+          });
+      }),
     );
   }
 
   if (android) {
+    log(`\n    ${chalk.underline("Android")}`);
+
     const appPath = android.appName
       ? path.resolve(android.sourceDir, android.appName)
       : path.resolve(android.sourceDir); // @react-native-community/cli 2.x & 3.x support
 
     const resPath = path.resolve(appPath, "src", flavor, "res");
-    const drawablePath = path.resolve(resPath, "drawable");
     const valuesPath = path.resolve(resPath, "values");
 
-    fs.ensureDirSync(drawablePath);
     fs.ensureDirSync(valuesPath);
 
-    const bootSplashXmlPath = path.resolve(drawablePath, "bootsplash.xml");
-    fs.writeFileSync(bootSplashXmlPath, bootSplashXml, "utf-8");
-    log(`✨  ${path.relative(workingDirectory, bootSplashXmlPath)}`, true);
-
     const colorsXmlPath = path.resolve(valuesPath, "colors.xml");
     const colorsXmlEntry = `<color name="${androidColorName}">${backgroundColorHex}</color>`;
 
@@ -252,7 +228,7 @@ export const generate = async ({
         );
       }
 
-      log(`✏️   ${path.relative(workingDirectory, colorsXmlPath)}`, true);
+      logWrite("✏️ ", colorsXmlPath);
     } else {
       fs.writeFileSync(
         colorsXmlPath,
@@ -260,43 +236,45 @@ export const generate = async ({
         "utf-8",
       );
 
-      log(`✨  ${path.relative(workingDirectory, colorsXmlPath)}`, true);
+      logWrite("✨", colorsXmlPath);
     }
 
-    images.push(
-      {
-        filePath: path.resolve(resPath, "mipmap-mdpi", logoFileName + ".png"),
-        width: width["@1x"],
-        height: height["@1x"],
-      },
-      {
-        filePath: path.resolve(resPath, "mipmap-hdpi", logoFileName + ".png"),
-        width: width["@1,5x"],
-        height: height["@1,5x"],
-      },
-      {
-        filePath: path.resolve(resPath, "mipmap-xhdpi", logoFileName + ".png"),
-        width: width["@2x"],
-        height: height["@2x"],
-      },
-      {
-        filePath: path.resolve(resPath, "mipmap-xxhdpi", logoFileName + ".png"),
-        width: width["@3x"],
-        height: height["@3x"],
-      },
-      {
-        filePath: path.resolve(
-          resPath,
-          "mipmap-xxxhdpi",
-          logoFileName + ".png",
-        ),
-        width: width["@4x"],
-        height: height["@4x"],
-      },
+    await Promise.all(
+      [
+        { ratio: 1, directory: "mipmap-mdpi" },
+        { ratio: 1.5, directory: "mipmap-hdpi" },
+        { ratio: 2, directory: "mipmap-xhdpi" },
+        { ratio: 3, directory: "mipmap-xxhdpi" },
+        { ratio: 4, directory: "mipmap-xxxhdpi" },
+      ].map(({ ratio, directory }) => {
+        const fileName = `${logoFileName}.png`;
+        const filePath = path.resolve(resPath, directory, fileName);
+        const width = logoWidth * ratio;
+        const height = getHeight(width);
+
+        const canvasSize = splashScreenIconSizeNoBackground * ratio;
+
+        // https://github.com/oliver-moran/jimp/tree/master/packages/jimp#creating-new-images
+        const canvas = new Jimp(canvasSize, canvasSize, 0xffffff00);
+        const logo = image.clone().resize(width, height);
+
+        const x = (canvasSize - width) / 2;
+        const y = (canvasSize - height) / 2;
+
+        return canvas
+          .blit(logo, x, y)
+          .quality(100)
+          .writeAsync(filePath)
+          .then(() => {
+            logWrite("✨", filePath, { width: canvasSize, height: canvasSize });
+          });
+      }),
     );
   }
 
   if (ios) {
+    log(`\n    ${chalk.underline("iOS")}`);
+
     const projectPath = ios.projectPath.replace(/.xcodeproj$/, "");
     const imagesPath = path.resolve(projectPath, "Images.xcassets");
 
@@ -306,14 +284,14 @@ export const generate = async ({
       fs.writeFileSync(
         storyboardPath,
         getStoryboard({
-          height: height["@1x"],
-          width: width["@1x"],
+          height: getHeight(logoWidth),
+          width: logoWidth,
           backgroundColor: backgroundColorHex,
         }),
         "utf-8",
       );
 
-      log(`✨  ${path.relative(workingDirectory, storyboardPath)}`, true);
+      logWrite("✨", storyboardPath);
     } else {
       log(
         `No "${projectPath}" directory found. Skipping iOS storyboard generation…`,
@@ -330,22 +308,26 @@ export const generate = async ({
         "utf-8",
       );
 
-      images.push(
-        {
-          filePath: path.resolve(imageSetPath, logoFileName + ".png"),
-          width: width["@1x"],
-          height: height["@1x"],
-        },
-        {
-          filePath: path.resolve(imageSetPath, logoFileName + "@2x.png"),
-          width: width["@2x"],
-          height: height["@2x"],
-        },
-        {
-          filePath: path.resolve(imageSetPath, logoFileName + "@3x.png"),
-          width: width["@3x"],
-          height: height["@3x"],
-        },
+      await Promise.all(
+        [
+          { ratio: 1, suffix: "" },
+          { ratio: 2, suffix: "@2x" },
+          { ratio: 3, suffix: "@3x" },
+        ].map(({ ratio, suffix }) => {
+          const fileName = `${logoFileName}${suffix}.png`;
+          const filePath = path.resolve(imageSetPath, fileName);
+          const width = logoWidth * ratio;
+          const height = getHeight(width);
+
+          return image
+            .clone()
+            .resize(width, height)
+            .quality(100)
+            .writeAsync(filePath)
+            .then(() => {
+              logWrite("✨", filePath, { width, height });
+            });
+        }),
       );
     } else {
       log(
@@ -354,23 +336,19 @@ export const generate = async ({
     }
   }
 
-  await Promise.all(
-    images.map(({ filePath, width, height }) =>
-      image
-        .clone()
-        .cover(width, height)
-        .writeAsync(filePath)
-        .then(() => {
-          log(
-            `✨  ${path.relative(
-              workingDirectory,
-              filePath,
-            )} (${width}x${height})`,
-            true,
-          );
-        }),
-    ),
-  );
+  log(`
+ ${chalk.blue("┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓")}
+ ${chalk.blue("┃")}  💖  ${chalk.bold(
+    "Love this library? Consider sponsoring!",
+  )}  ${chalk.blue("┃")}
+ ${chalk.blue("┃")}  One-time amounts are available.              ${chalk.blue(
+    "┃",
+  )}
+ ${chalk.blue("┃")}  ${chalk.underline(
+    "https://github.com/sponsors/zoontek",
+  )}          ${chalk.blue("┃")}
+ ${chalk.blue("┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛")}
+`);
 
   log(
     `✅  Done! Thanks for using ${chalk.underline("react-native-bootsplash")}.`,

package/src/index.ts

@@ -4,17 +4,10 @@ export type VisibilityStatus = "visible" | "hidden" | "transitioning";
 export type Config = { fade?: boolean };
 
 const NativeModule: {
-  show: (fade: boolean) => Promise<true>;
   hide: (fade: boolean) => Promise<true>;
   getVisibilityStatus: () => Promise<VisibilityStatus>;
-  statusBarHeight?: number;
-  navigationBarHeight?: number;
 } = NativeModules.RNBootSplash;
 
-export function show(config: Config = {}): Promise<void> {
-  return NativeModule.show({ fade: false, ...config }.fade).then(() => {});
-}
-
 export function hide(config: Config = {}): Promise<void> {
   return NativeModule.hide({ fade: false, ...config }.fade).then(() => {});
 }
@@ -23,14 +16,7 @@ export function getVisibilityStatus(): Promise<VisibilityStatus> {
   return NativeModule.getVisibilityStatus();
 }
 
-export const statusBarHeight: number = NativeModule.statusBarHeight ?? 0;
-export const navigationBarHeight: number =
-  NativeModule.navigationBarHeight ?? 0;
-
 export default {
-  show,
   hide,
   getVisibilityStatus,
-  statusBarHeight,
-  navigationBarHeight,
 };

package/android/src/main/java/com/zoontek/rnbootsplash/RNBootSplashDialog.java

@@ -1,36 +0,0 @@
-package com.zoontek.rnbootsplash;
-
-import android.app.Activity;
-import android.app.Dialog;
-import android.os.Bundle;
-import android.view.Window;
-import android.widget.LinearLayout.LayoutParams;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.StyleRes;
-
-public class RNBootSplashDialog extends Dialog {
-
-  public RNBootSplashDialog(@NonNull final Activity activity,
-                            @StyleRes final int bootThemeResId) {
-    super(activity, bootThemeResId);
-    setCancelable(false);
-    setCanceledOnTouchOutside(false);
-  }
-
-  @Override
-  public void onBackPressed() {
-    // Prevent default behavior
-  }
-
-  @Override
-  protected void onCreate(Bundle savedInstanceState) {
-    Window window = getWindow();
-
-    if (window != null) {
-      window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
-    }
-
-    super.onCreate(savedInstanceState);
-  }
-}

package/android/src/main/res/anim/bootsplash_fade_in.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<alpha xmlns:android="http://schemas.android.com/apk/res/android"
-       android:interpolator="@android:interpolator/decelerate_quad"
-       android:fromAlpha="0.0"
-       android:toAlpha="1.0"
-       android:duration="220" />

package/android/src/main/res/anim/bootsplash_fade_out.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<alpha xmlns:android="http://schemas.android.com/apk/res/android"
-       android:interpolator="@android:interpolator/accelerate_quad"
-       android:fromAlpha="1.0"
-       android:toAlpha="0.0"
-       android:duration="220" />

package/android/src/main/res/values/styles.xml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<resources>
-  <style name="bootsplash_no_animation">
-    <item name="android:windowEnterAnimation">@null</item>
-    <item name="android:windowExitAnimation">@null</item>
-  </style>
-
-  <style name="bootsplash_fade_animation">
-    <item name="android:windowEnterAnimation">@anim/bootsplash_fade_in</item>
-    <item name="android:windowExitAnimation">@anim/bootsplash_fade_out</item>
-  </style>
-</resources>