Add react-native-bootsplash generate command

Author: zoontek

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
   ignorePatterns: [
     "app.plugin.js",
     ".eslintrc.js",
+    "cli.js",
     "react-native.config.js",
     "dist",
     "example",

README.md

@@ -37,15 +37,15 @@ _⚠️  Don't forget going into the `ios` directory to execute a `pod install
 In order to speed up the setup, we provide a **CLI** to generate assets, create the Android Drawable XML file and the iOS Storyboard file automatically ✨.
 
 ```bash
-$ npx react-native generate-bootsplash --help
+$ npx react-native-bootsplash generate --help
 # --- or ---
-$ yarn react-native generate-bootsplash --help
+$ yarn react-native-bootsplash generate --help
 ```
 
 The command can take multiple arguments:
 
 ```bash
-Usage: react-native generate-bootsplash [options] <logo>
+Usage: react-native-bootsplash generate [options] <logo>
 
 Generate a launch screen using a logo file path (PNG or SVG)
 
@@ -82,7 +82,7 @@ _📍 This license key grants unlimited and unrestricted usage of the generator
 
 ```bash
 # Without license key
-yarn react-native generate-bootsplash svgs/light-logo.svg \
+yarn react-native-bootsplash generate svgs/light-logo.svg \
   --platforms=android,ios,web \
   --background=F5FCFF \
   --logo-width=100 \
@@ -91,7 +91,7 @@ yarn react-native generate-bootsplash svgs/light-logo.svg \
   --html=public/index.html
 
 # With license key 🔑
-yarn react-native generate-bootsplash svgs/light-logo.svg \
+yarn react-native-bootsplash generate svgs/light-logo.svg \
   --platforms=android,ios,web \
   --background=F5FCFF \
   --logo-width=100 \

cli.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+const { Command } = require("commander");
+
+const program = new Command();
+const pkg = require("./package.json");
+
+const validProjectTypes = ["detect", "bare", "expo"];
+const validPlatforms = ["android", "ios", "web"];
+
+program
+  .name(pkg.name)
+  .description(pkg.description)
+  .version(pkg.version)
+  .command("generate", { isDefault: true })
+  .description("Generate a launch screen using a logo file path (PNG or SVG)")
+  .argument("<logo>", "Logo file path (PNG or SVG)")
+  .option(
+    "--project-type <string>",
+    'Project type ("detect", "bare" or "expo")',
+    "detect",
+  )
+  .option(
+    "--platforms <list>",
+    "Platforms to generate for, separated by a comma",
+    validPlatforms.join(","),
+  )
+  .option(
+    "--background <string>",
+    "Background color (in hexadecimal format)",
+    "#fff",
+  )
+  .option(
+    "--logo-width <number>",
+    "Logo width at @1x (in dp - we recommend approximately ~100)",
+    100,
+  )
+  .option(
+    "--assets-output <string>",
+    "Assets output directory path",
+    "assets/bootsplash",
+  )
+  .option(
+    "--flavor <string>",
+    "Android flavor build variant (where your resource directory is)",
+    "main",
+  )
+  .option(
+    "--html <string>",
+    "HTML template file path (your web app entry point)",
+    "public/index.html",
+  )
+  .option(
+    "--license-key <string>",
+    "License key to enable brand and dark mode assets generation",
+  )
+  .option("--brand <string>", "Brand file path (PNG or SVG)")
+  .option(
+    "--brand-width <number>",
+    "Brand width at @1x (in dp - we recommend approximately ~80)",
+    80,
+  )
+  .option(
+    "--dark-background <string>",
+    "[dark mode] Background color (in hexadecimal format)",
+  )
+  .option("--dark-logo <string>", "[dark mode] Logo file path (PNG or SVG)")
+  .option("--dark-brand <string>", "[dark mode] Brand file path (PNG or SVG)")
+  .action((logo, options) => {
+    const { projectType, platforms, logoWidth, brandWidth, ...rest } = options;
+
+    const args = {
+      ...rest,
+
+      projectType: validProjectTypes.includes(projectType.toLowerCase())
+        ? projectType.toLowerCase()
+        : "detect",
+
+      platforms: [
+        ...new Set(
+          platforms
+            .toLowerCase()
+            .split(/[ ,;|]/)
+            .map((platform) => platform.trim())
+            .filter((item) => validPlatforms.includes(item)),
+        ),
+      ],
+
+      logoWidth: Number.parseInt(logoWidth, 10),
+      brandWidth: Number.parseInt(brandWidth, 10),
+    };
+
+    const { generate } = require("./dist/commonjs/generate");
+
+    generate({ logo, ...args }).catch((error) => {
+      console.error(error);
+      process.exit(1);
+    });
+  });
+
+program.parse(process.argv);

example/ios/Podfile.lock

@@ -1509,7 +1509,7 @@ PODS:
     - React-logger (= 0.76.1)
     - React-perflogger (= 0.76.1)
     - React-utils (= 0.76.1)
-  - RNBootSplash (6.2.6):
+  - RNBootSplash (6.3.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1799,7 +1799,7 @@ SPEC CHECKSUMS:
   React-utils: 0c825829a8e2ca39bb049d95f270a2dbf39ecb05
   ReactCodegen: 3b0ff1c9015e3ebcf2bd2f8559995c74bfacf8a1
   ReactCommon: c21a3d6a8d3e98b6e99730139a52f59f0beea89d
-  RNBootSplash: fadbf027011dbd9e5b8b9989800de20dc3d1a068
+  RNBootSplash: de964357c89eacce30bc5f26bc663eb34567b894
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: db69236006b8b1c6d55ab453390c882306cbf219
 

example/yarn.lock

@@ -1353,6 +1353,26 @@
     execa "^5.0.0"
     fast-glob "^3.3.2"
 
+"@react-native-community/cli-config-android@^15.0.0":
+  version "15.1.2"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config-android/-/cli-config-android-15.1.2.tgz#623d8d4a6693ed9c28e0d6fa41372466ebc32a7a"
+  integrity sha512-A6YQPl+0pTG0vuTcYLHJODkLy8qgZ2YIfy5XiZEAyxAbkSFbyOf7XR7hzjTw6S0BUJzF+eizHeAsKQ2b1bO75A==
+  dependencies:
+    "@react-native-community/cli-tools" "15.1.2"
+    chalk "^4.1.2"
+    fast-glob "^3.3.2"
+    fast-xml-parser "^4.4.1"
+
+"@react-native-community/cli-config-apple@^15.0.0":
+  version "15.1.2"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config-apple/-/cli-config-apple-15.1.2.tgz#2a9f245f6f158eff60495f9e3cce698b35adb4ea"
+  integrity sha512-BoCLHAFyPwYV9GcbXd9tzrmjJbuRFhuMQ808+gR9exGqVhcK16z60V71z44I5tvOcwvnOtu5fmiVMC5FvcxyNA==
+  dependencies:
+    "@react-native-community/cli-tools" "15.1.2"
+    chalk "^4.1.2"
+    execa "^5.0.0"
+    fast-glob "^3.3.2"
+
 "@react-native-community/[email protected]":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-15.0.0.tgz#c49b1f6b0cc374175a827467bbaf3cee9e9f4ceb"
@@ -1457,7 +1477,7 @@
     shell-quote "^1.7.3"
     sudo-prompt "^9.0.0"
 
-"@react-native-community/cli-tools@^15.0.0":
+"@react-native-community/cli-tools@15.1.2", "@react-native-community/cli-tools@^15.0.0":
   version "15.1.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-15.1.2.tgz#31e0456171f161870f725fd13f9e9ac79f58d344"
   integrity sha512-eShBHf/K1e2xJTumiy7CF/akh0DiKfW3YSJ/jpp0RVBgwaXPK6JMrVdGRdbSVad6VqaXVFVtPOe3gSDRa5GDKg==
@@ -2852,7 +2872,7 @@ commander@^10.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
-commander@^12.0.0:
+commander@^12.0.0, commander@^12.1.0:
   version "12.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
   integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bootsplash",
-  "version": "6.2.6",
+  "version": "6.3.0",
   "license": "MIT",
   "description": "Display a bootsplash on your app starts. Hide it when you want.",
   "author": "Mathieu Acthernoene <[email protected]>",
@@ -20,8 +20,12 @@
     "!src/addon",
     "RNBootSplash.podspec",
     "app.plugin.js",
+    "cli.js",
     "react-native.config.js"
   ],
+  "bin": {
+    "react-native-bootsplash": "./cli.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/zoontek/react-native-bootsplash.git"
@@ -66,7 +70,10 @@
   },
   "dependencies": {
     "@expo/config-plugins": "^8.0.4",
+    "@react-native-community/cli-config-android": "^15.0.0",
+    "@react-native-community/cli-config-apple": "^15.0.0",
     "@react-native-community/cli-tools": "^15.0.0",
+    "commander": "^12.1.0",
     "detect-indent": "^6.1.0",
     "fs-extra": "^11.2.0",
     "node-html-parser": "^6.1.13",

react-native.config.js

@@ -1,5 +1,5 @@
-const platforms = ["android", "ios", "web"];
-const projectTypes = ["detect", "bare", "expo"];
+const validProjectTypes = ["detect", "bare", "expo"];
+const validPlatforms = ["android", "ios", "web"];
 
 /** @type {import("@react-native-community/cli-types").Command} */
 const generateBootSplash = {
@@ -10,22 +10,22 @@ const generateBootSplash = {
       name: "--project-type <string>",
       description: 'Project type ("detect", "bare" or "expo")',
       default: "detect",
-      parse: (value) => {
-        const type = value.toLowerCase();
-        return projectTypes.includes(type) ? type : "detect";
-      },
+      parse: (projectType) =>
+        validProjectTypes.includes(projectType.toLowerCase())
+          ? projectType.toLowerCase()
+          : "detect",
     },
     {
       name: "--platforms <list>",
       description: "Platforms to generate for, separated by a comma",
-      default: platforms.join(","),
-      parse: (value) => [
+      default: validPlatforms.join(","),
+      parse: (platforms) => [
         ...new Set(
-          value
+          platforms
             .toLowerCase()
             .split(/[ ,;|]/)
             .map((platform) => platform.trim())
-            .filter((item) => platforms.includes(item)),
+            .filter((item) => validPlatforms.includes(item)),
         ),
       ],
     },
@@ -39,7 +39,7 @@ const generateBootSplash = {
       description:
         "Logo width at @1x (in dp - we recommend approximately ~100)",
       default: 100,
-      parse: (value) => Number.parseInt(value, 10),
+      parse: (logoWidth) => Number.parseInt(logoWidth, 10),
     },
     {
       name: "--assets-output <string>",
@@ -71,7 +71,7 @@ const generateBootSplash = {
       description:
         "Brand width at @1x (in dp - we recommend approximately ~80)",
       default: 80,
-      parse: (value) => Number.parseInt(value, 10),
+      parse: (brandWidth) => Number.parseInt(brandWidth, 10),
     },
     {
       name: "--dark-background <string>",
@@ -86,10 +86,10 @@ const generateBootSplash = {
       description: "[dark mode] Brand file path (PNG or SVG)",
     },
   ],
-  func: ([logo], { project: { android, ios } }, args) => {
+  func: ([logo], _config, args) => {
     const { generate } = require("./dist/commonjs/generate");
 
-    generate({ android, ios, logo, ...args }).catch((error) => {
+    generate({ logo, ...args }).catch((error) => {
       console.error(error);
       process.exit(1);
     });

src/generate.ts

@@ -1,10 +1,8 @@
 import * as Expo from "@expo/config-plugins";
 import plist from "@expo/plist";
+import { projectConfig as getAndroidProjectConfig } from "@react-native-community/cli-config-android";
+import { getProjectConfig as getAppleProjectConfig } from "@react-native-community/cli-config-apple";
 import { findProjectRoot } from "@react-native-community/cli-tools";
-import {
-  AndroidProjectConfig,
-  IOSProjectConfig,
-} from "@react-native-community/cli-types";
 import childProcess from "child_process";
 import crypto from "crypto";
 import detectIndent from "detect-indent";
@@ -26,6 +24,10 @@ import { Manifest } from ".";
 const workingPath = process.env.INIT_CWD ?? process.env.PWD ?? process.cwd();
 const projectRoot = findProjectRoot(workingPath);
 
+const getIOSProjectConfig = getAppleProjectConfig({ platformName: "ios" });
+const ios = getIOSProjectConfig(projectRoot, {});
+const android = getAndroidProjectConfig(projectRoot);
+
 type PackageJson = {
   version?: string;
   dependencies?: Record<string, string>;
@@ -416,7 +418,6 @@ const ensureSupportedFormat = async (
 };
 
 const getAndroidOutputPath = ({
-  android,
   assetsOutputPath,
   brandHeight,
   brandWidth,
@@ -426,7 +427,6 @@ const getAndroidOutputPath = ({
   logoWidth,
   platforms,
 }: {
-  android: AndroidProjectConfig | undefined;
   assetsOutputPath: string;
   brandHeight: number;
   brandWidth: number;
@@ -487,12 +487,10 @@ const getAndroidOutputPath = ({
 };
 
 const getIOSOutputPath = ({
-  ios,
   assetsOutputPath,
   isExpo,
   platforms,
 }: {
-  ios: IOSProjectConfig | undefined;
   assetsOutputPath: string;
   isExpo: boolean;
   platforms: Platforms;
@@ -627,18 +625,13 @@ const requireAddon = ():
 };
 
 export const generate = async ({
-  android,
-  ios,
   projectType,
   platforms,
   html,
   flavor,
   licenseKey,
   ...args
 }: {
-  android?: AndroidProjectConfig;
-  ios?: IOSProjectConfig;
-
   logo: string;
   projectType: ProjectType;
   platforms: Platforms;
@@ -756,7 +749,6 @@ export const generate = async ({
   });
 
   const androidOutputPath = getAndroidOutputPath({
-    android,
     assetsOutputPath,
     brandHeight,
     brandWidth,
@@ -769,7 +761,6 @@ export const generate = async ({
 
   const iosOutputPath = getIOSOutputPath({
     assetsOutputPath,
-    ios,
     isExpo,
     platforms,
   });