react-native-bootsplash 6.0.0-beta.6 → 6.0.0-beta.7

package/dist/typescript/index.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps, ImageRequireSource, ViewProps } from "react-native";
+import { ImageRequireSource, ImageResizeMode, ImageSourcePropType, ImageStyle, ViewStyle } from "react-native";
 export type Config = {
     fade?: boolean;
 };
@@ -26,10 +26,28 @@ export type UseHideAnimationConfig = {
     statusBarTranslucent?: boolean;
     navigationBarTranslucent?: boolean;
 };
+export type ContainerProps = {
+    style: ViewStyle;
+    onLayout: () => void;
+};
+export type LogoProps = {
+    source: ImageSourcePropType;
+    fadeDuration?: number;
+    resizeMode?: ImageResizeMode;
+    style?: ImageStyle;
+    onLoadEnd?: () => void;
+};
+export type BrandProps = {
+    source: ImageSourcePropType;
+    fadeDuration?: number;
+    resizeMode?: ImageResizeMode;
+    style?: ImageStyle;
+    onLoadEnd?: () => void;
+};
 export type UseHideAnimation = {
-    container: ViewProps;
-    logo: ImageProps;
-    brand: ImageProps;
+    container: ContainerProps;
+    logo: LogoProps;
+    brand: BrandProps;
 };
 export declare function hide(config?: Config): Promise<void>;
 export declare function isVisible(): Promise<boolean>;

package/dist/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,kBAAkB,EAGlB,SAAS,EAEV,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,GAAE,MAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAGvD;AAED,wBAAgB,SAAS,IAAI,OAAO,CAAC,OAAO,CAAC,CAE5C;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,oBAoL9D;;;;;;AAED,wBAIE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,UAAU,EAGV,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,GAAE,MAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAGvD;AAED,wBAAgB,SAAS,IAAI,OAAO,CAAC,OAAO,CAAC,CAE5C;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,oBAoL9D;;;;;;AAED,wBAIE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bootsplash",
-  "version": "6.0.0-beta.6",
+  "version": "6.0.0-beta.7",
   "license": "MIT",
   "description": "Display a bootsplash on your app starts. Hide it when you want.",
   "author": "Mathieu Acthernoene <zoontek@gmail.com>",
@@ -64,7 +64,6 @@
     "react-native": ">=0.70.0"
   },
   "dependencies": {
-    "@emotion/hash": "^0.9.1",
     "@expo/config": "^8.1.2 || ^9.0.1",
     "@expo/config-plugins": "^7.2.5 || ^8.0.4",
     "detect-indent": "^6.1.0",

package/src/generate.ts

@@ -1,4 +1,3 @@
-import murmurhash from "@emotion/hash";
 import { getConfig as getExpoConfig } from "@expo/config";
 import * as Expo from "@expo/config-plugins";
 import { assignColorValue } from "@expo/config-plugins/build/android/Colors";
@@ -10,9 +9,10 @@ import {
   AndroidProjectConfig,
   IOSProjectConfig,
 } from "@react-native-community/cli-types";
+import crypto from "crypto";
 import detectIndent from "detect-indent";
 import fs from "fs-extra";
-import { parse as parseHtml } from "node-html-parser";
+import { HTMLElement, parse as parseHtml } from "node-html-parser";
 import path from "path";
 import pc from "picocolors";
 import { Options as PrettierOptions } from "prettier";
@@ -27,7 +27,7 @@ import { Manifest } from ".";
 const workingPath = process.env.INIT_CWD ?? process.env.PWD ?? process.cwd();
 const projectRoot = findProjectRoot(workingPath);
 
-export type Platforms = ("android" | "ios" | "web")[];
+type Platforms = ("android" | "ios" | "web")[];
 
 export type RGBColor = {
   R: string;
@@ -35,7 +35,7 @@ export type RGBColor = {
   B: string;
 };
 
-export type Color = {
+type Color = {
   hex: string;
   rgb: RGBColor;
 };
@@ -60,7 +60,7 @@ export const log = {
   },
 };
 
-export const parseColor = (value: string): Color => {
+const parseColor = (value: string): Color => {
   const up = value.toUpperCase().replace(/[^0-9A-F]/g, "");
 
   if (up.length !== 3 && up.length !== 6) {
@@ -185,62 +185,75 @@ export const writeJson = (filePath: string, content: object) => {
   log.write(filePath);
 };
 
-export const readXml = (filePath: string) => {
-  const xml = hfs.text(filePath);
-  const { indent } = detectIndent(xml);
+type FormatOptions = { indent?: detectIndent.Indent } & (
+  | {
+      formatter: "prettier";
+      selfClosingTags?: boolean;
+      useCssPlugin?: boolean;
+      htmlWhitespaceSensitivity?: PrettierOptions["htmlWhitespaceSensitivity"];
+      singleAttributePerLine?: PrettierOptions["singleAttributePerLine"];
+    }
+  | {
+      formatter: "xmlFormatter";
+      whiteSpaceAtEndOfSelfclosingTag?: XMLFormatterOptions["whiteSpaceAtEndOfSelfclosingTag"];
+    }
+);
 
-  const formatOptions: XMLFormatterOptions = {
-    indentation: indent || "    ",
-  };
+export const readXmlLike = (filePath: string) => {
+  const content = hfs.text(filePath);
 
-  return { root: parseHtml(xml), formatOptions };
+  return {
+    root: parseHtml(content),
+    formatOptions: { indent: detectIndent(content) },
+  };
 };
 
-export const writeXml = (
+export const writeXmlLike = async (
   filePath: string,
   content: string,
-  options?: XMLFormatterOptions,
+  { indent, ...formatOptions }: FormatOptions,
 ) => {
-  const formatted = formatXml(content, {
-    collapseContent: true,
-    forceSelfClosingEmptyTag: true,
-    indentation: "    ",
-    lineSeparator: "\n",
-    whiteSpaceAtEndOfSelfclosingTag: true,
-    ...options,
-  });
-
-  hfs.write(filePath, formatted);
-  log.write(filePath);
-};
-
-export const readHtml = (filePath: string) => {
-  const html = hfs.text(filePath);
-  const { type, amount } = detectIndent(html);
-
-  const formatOptions: PrettierOptions = {
-    useTabs: type === "tab",
-    tabWidth: amount || 2,
-  };
+  if (formatOptions.formatter === "prettier") {
+    const {
+      formatter,
+      useCssPlugin = false,
+      selfClosingTags = false,
+      ...options
+    } = formatOptions;
+
+    const formatted = await prettier.format(content, {
+      parser: "html",
+      bracketSameLine: true,
+      printWidth: 10000,
+      plugins: [htmlPlugin, ...(useCssPlugin ? [cssPlugin] : [])],
+      useTabs: indent?.type === "tab",
+      tabWidth: (indent?.amount ?? 0) || 2,
+      ...options,
+    });
 
-  return { root: parseHtml(html), formatOptions };
-};
+    hfs.write(
+      filePath,
+      selfClosingTags
+        ? formatted.replace(/><\/[a-z-0-9]+>/gi, " />")
+        : formatted,
+    );
 
-export const writeHtml = async (
-  filePath: string,
-  content: string,
-  options?: Omit<PrettierOptions, "parser" | "plugins">,
-) => {
-  const formatted = await prettier.format(content, {
-    parser: "html",
-    plugins: [htmlPlugin, cssPlugin],
-    tabWidth: 2,
-    useTabs: false,
-    ...options,
-  });
+    log.write(filePath);
+  } else {
+    const { formatter, ...options } = formatOptions;
+
+    const formatted = formatXml(content, {
+      collapseContent: true,
+      forceSelfClosingEmptyTag: true,
+      lineSeparator: "\n",
+      whiteSpaceAtEndOfSelfclosingTag: true,
+      indentation: (indent?.indent ?? "") || "    ",
+      ...options,
+    });
 
-  hfs.write(filePath, formatted);
-  log.write(filePath);
+    hfs.write(filePath, formatted);
+    log.write(filePath);
+  }
 };
 
 const cleanIOS = (dir: string) => {
@@ -316,7 +329,11 @@ const getFileNameSuffix = async ({
     .map((key) => record[key])
     .join();
 
-  return murmurhash(stableKey);
+  return crypto
+    .createHash("shake256", { outputLength: 3 })
+    .update(stableKey)
+    .digest("hex")
+    .toLowerCase();
 };
 
 const ensureSupportedFormat = async (
@@ -402,8 +419,8 @@ const getAndroidOutputPath = ({
 };
 
 const getIOSOutputPath = ({
-  assetsOutputPath,
   ios,
+  assetsOutputPath,
   isExpo,
   platforms,
 }: {
@@ -466,7 +483,7 @@ const getHtmlTemplatePath = ({
   return htmlTemplatePath;
 };
 
-export const getImageHeight = (
+const getImageHeight = (
   image: Sharp | undefined,
   width: number,
 ): Promise<number> => {
@@ -742,7 +759,7 @@ export const generate = async ({
       const colorsXmlEntry = `<color name="bootsplash_background">${background.hex}</color>`;
 
       if (hfs.exists(colorsXmlPath)) {
-        const { root, formatOptions } = readXml(colorsXmlPath);
+        const { root, formatOptions } = readXmlLike(colorsXmlPath);
         const nextColor = parseHtml(colorsXmlEntry);
 
         const prevColor = root.querySelector(
@@ -755,9 +772,99 @@ export const generate = async ({
           root.querySelector("resources")?.appendChild(nextColor);
         }
 
-        writeXml(colorsXmlPath, root.toString(), formatOptions);
+        await writeXmlLike(colorsXmlPath, root.toString(), {
+          ...formatOptions,
+          formatter: "xmlFormatter",
+        });
       } else {
-        writeXml(colorsXmlPath, `<resources>${colorsXmlEntry}</resources>`);
+        await writeXmlLike(
+          colorsXmlPath,
+          `<resources>${colorsXmlEntry}</resources>`,
+          { formatter: "xmlFormatter" },
+        );
+      }
+
+      {
+        const manifestXmlPath = path.resolve(
+          androidOutputPath,
+          "..",
+          "AndroidManifest.xml",
+        );
+
+        const { root, formatOptions } = readXmlLike(manifestXmlPath);
+        const activities = root.querySelectorAll("activity");
+
+        for (const activity of activities) {
+          if (activity.getAttribute("android:name") === ".MainActivity") {
+            activity.setAttribute("android:theme", "@style/BootTheme");
+          }
+        }
+
+        await writeXmlLike(manifestXmlPath, root.toString(), {
+          ...formatOptions,
+          formatter: "prettier",
+          htmlWhitespaceSensitivity: "ignore",
+          selfClosingTags: true,
+          singleAttributePerLine: true,
+        });
+      }
+
+      {
+        const stylesXmlPath = path.resolve(valuesPath, "styles.xml");
+        const { root, formatOptions } = readXmlLike(stylesXmlPath);
+
+        const prevStyle = root.querySelector('style[name="BootTheme"]');
+        const parent = prevStyle?.getAttribute("parent") ?? "Theme.BootSplash";
+
+        const extraItems = parseHtml(
+          prevStyle?.text
+            .split("\n")
+            .map((line) => line.trim())
+            .join("") ?? "",
+        )
+          .childNodes.filter((node) => {
+            if (!(node instanceof HTMLElement)) {
+              return true;
+            }
+
+            const name = node.getAttribute("name");
+
+            return (
+              name !== "bootSplashBackground" &&
+              name !== "bootSplashLogo" &&
+              name !== "bootSplashBrand" &&
+              name !== "postBootSplashTheme"
+            );
+          })
+          .map((node) => node.toString());
+
+        const styleItems: string[] = [
+          ...(extraItems.length > 0 ? [...extraItems, ""] : []),
+
+          '<item name="bootSplashBackground">@color/bootsplash_background</item>',
+          '<item name="bootSplashLogo">@drawable/bootsplash_logo</item>',
+
+          ...(brand != null && brandPath != null
+            ? ['<item name="bootSplashBrand">@drawable/bootsplash_brand</item>']
+            : []),
+
+          '<item name="postBootSplashTheme">@style/AppTheme</item>',
+        ];
+
+        const nextStyle = parseHtml(dedent`
+          <style name="BootTheme" parent="${parent}">
+            ${styleItems.join("\n")}
+          </style>
+        `);
+
+        prevStyle?.remove(); // remove the existing style
+        root.querySelector("resources")?.appendChild(nextStyle);
+
+        await writeXmlLike(stylesXmlPath, root.toString(), {
+          ...formatOptions,
+          formatter: "prettier",
+          htmlWhitespaceSensitivity: "ignore",
+        });
       }
     }
   }
@@ -785,7 +892,7 @@ export const generate = async ({
     hfs.ensureDir(colorsSetPath);
     hfs.ensureDir(imageSetPath);
 
-    writeXml(
+    await writeXmlLike(
       storyboardPath,
       getStoryboard({
         logoHeight,
@@ -793,7 +900,10 @@ export const generate = async ({
         background: background.rgb,
         fileNameSuffix,
       }),
-      { whiteSpaceAtEndOfSelfclosingTag: false },
+      {
+        formatter: "xmlFormatter",
+        whiteSpaceAtEndOfSelfclosingTag: false,
+      },
     );
 
     writeJson(path.resolve(colorsSetPath, "Contents.json"), {
@@ -919,7 +1029,7 @@ export const generate = async ({
   if (htmlTemplatePath != null) {
     log.title("🌐", "Web");
 
-    const { root, formatOptions } = readHtml(htmlTemplatePath);
+    const { root, formatOptions } = readXmlLike(htmlTemplatePath);
     const { format } = await logo.metadata();
     const prevStyle = root.querySelector("#bootsplash-style");
 
@@ -977,7 +1087,11 @@ export const generate = async ({
       root.querySelector("body")?.appendChild(nextDiv);
     }
 
-    await writeHtml(htmlTemplatePath, root.toString(), formatOptions);
+    await writeXmlLike(htmlTemplatePath, root.toString(), {
+      ...formatOptions,
+      formatter: "prettier",
+      useCssPlugin: true,
+    });
   }
 
   log.title("📄", "Assets");
@@ -1061,15 +1175,13 @@ ${pc.blue("┗━━━━━━━━━━━━━━━━━━━━━━
   );
 };
 
-export type ExpoProps = {
+type ExpoPlugin = Expo.ConfigPlugin<{
   assetsDir?: string;
   android?: {
     parentTheme?: "TransparentStatus" | "EdgeToEdge";
     darkContentBarsStyle?: boolean;
   };
-};
-
-export type ExpoPlugin = Expo.ConfigPlugin<ExpoProps>;
+}>;
 
 const withAndroidAssets: ExpoPlugin = (config, props) =>
   Expo.withDangerousMod(config, [
@@ -1323,12 +1435,12 @@ const withAppDelegate: ExpoPlugin = (config) =>
       offset: 0,
       anchor: /@end/,
       newSrc: 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;
-          }
-        `,
+        - (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 {

package/src/index.ts

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
-  ImageProps,
   ImageRequireSource,
+  ImageResizeMode,
+  ImageSourcePropType,
+  ImageStyle,
   Platform,
   StyleSheet,
-  ViewProps,
   ViewStyle,
 } from "react-native";
 import NativeModule from "./NativeRNBootSplash";
@@ -42,10 +43,31 @@ export type UseHideAnimationConfig = {
   navigationBarTranslucent?: boolean;
 };
 
+export type ContainerProps = {
+  style: ViewStyle;
+  onLayout: () => void;
+};
+
+export type LogoProps = {
+  source: ImageSourcePropType;
+  fadeDuration?: number;
+  resizeMode?: ImageResizeMode;
+  style?: ImageStyle;
+  onLoadEnd?: () => void;
+};
+
+export type BrandProps = {
+  source: ImageSourcePropType;
+  fadeDuration?: number;
+  resizeMode?: ImageResizeMode;
+  style?: ImageStyle;
+  onLoadEnd?: () => void;
+};
+
 export type UseHideAnimation = {
-  container: ViewProps;
-  logo: ImageProps;
-  brand: ImageProps;
+  container: ContainerProps;
+  logo: LogoProps;
+  brand: BrandProps;
 };
 
 export function hide(config: Config = {}): Promise<void> {
@@ -149,7 +171,7 @@ export function useHideAnimation(config: UseHideAnimationConfig) {
       justifyContent: "center",
     };
 
-    const container: ViewProps = {
+    const container: ContainerProps = {
       style: containerStyle,
       onLayout: () => {
         ref.current.layoutReady = true;
@@ -157,13 +179,13 @@ export function useHideAnimation(config: UseHideAnimationConfig) {
       },
     };
 
-    const logo: ImageProps =
+    const logo: LogoProps =
       logoFinalSrc == null
         ? { source: -1 }
         : {
+            source: logoFinalSrc,
             fadeDuration: 0,
             resizeMode: "contain",
-            source: logoFinalSrc,
             style: {
               width: logoWidth,
               height: logoHeight,
@@ -174,13 +196,13 @@ export function useHideAnimation(config: UseHideAnimationConfig) {
             },
           };
 
-    const brand: ImageProps =
+    const brand: BrandProps =
       brandFinalSrc == null
         ? { source: -1 }
         : {
+            source: brandFinalSrc,
             fadeDuration: 0,
             resizeMode: "contain",
-            source: brandFinalSrc,
             style: {
               position: "absolute",
               bottom: Platform.OS === "web" ? 60 : brandBottom,