@umituz/react-native-splash 1.5.3 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Generic splash screen for React Native apps with animations, gradients, and customizable branding. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domain/entities/SplashOptions.ts

@@ -27,10 +27,16 @@ export interface SplashOptions {
   logo?: ReactNode | string;
 
   /**
-   * Background color
+   * Background color (will generate gradient automatically)
    */
   backgroundColor?: string;
 
+  /**
+   * Custom gradient colors (overrides backgroundColor)
+   * If provided, backgroundColor is ignored
+   */
+  gradientColors?: readonly string[];
+
   /**
    * Loading text
    */

package/src/presentation/components/SplashScreen.tsx

@@ -16,10 +16,7 @@ import { SplashLogo } from "./SplashLogo";
 import { SplashTypography } from "./SplashTypography";
 import { SplashLoading } from "./SplashLoading";
 import { SplashDecorations } from "./SplashDecorations";
-import {
-  getDefaultGradient,
-  generateGradientFromColor,
-} from "../utils/splashGradient.utils";
+import { generateGradientFromColor } from "../utils/splashGradient.utils";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
 export interface SplashScreenProps extends SplashOptions {
@@ -34,6 +31,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   tagline,
   logo,
   backgroundColor,
+  gradientColors,
   loadingText,
   showLoading = true,
   minimumDisplayTime = 1500,
@@ -50,9 +48,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 
   const isDark = themeMode === "dark";
 
-  const gradientColors = backgroundColor
-    ? generateGradientFromColor(backgroundColor, isDark)
-    : getDefaultGradient(isDark);
+  // Use provided gradientColors, or generate from backgroundColor, or fallback to backgroundColor as single color
+  const finalGradientColors: readonly string[] =
+    gradientColors ||
+    (backgroundColor
+      ? generateGradientFromColor(backgroundColor, isDark)
+      : backgroundColor
+        ? [backgroundColor]
+        : [tokens.colors.primary]);
 
   const styles = getStyles(insets, tokens.spacing);
 
@@ -77,7 +80,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   return (
     <View style={styles.container}>
       <LinearGradient
-        colors={gradientColors as readonly string[]}
+        colors={finalGradientColors}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
         style={styles.gradient}

package/src/presentation/utils/splashGradient.utils.ts

@@ -25,32 +25,23 @@ export const adjustColorBrightness = (hex: string, percent: number): string => {
   );
 };
 
-/**
- * Get default gradient colors based on theme
- */
-export const getDefaultGradient = (isDark: boolean): string[] => {
-  return isDark
-    ? ["#1E1B4B", "#312E81", "#4C1D95", "#6B21A8"] // Dark indigo to purple
-    : ["#6366F1", "#8B5CF6", "#A855F7", "#EC4899"]; // Indigo to pink
-};
-
 /**
  * Generate gradient colors from backgroundColor
  */
 export const generateGradientFromColor = (
   backgroundColor: string,
   isDark: boolean,
-): string[] => {
+): readonly string[] => {
   return isDark
-    ? [
+    ? ([
         backgroundColor,
         adjustColorBrightness(backgroundColor, -20),
         adjustColorBrightness(backgroundColor, -30),
-      ]
-    : [
+      ] as const)
+    : ([
         backgroundColor,
         adjustColorBrightness(backgroundColor, 10),
         adjustColorBrightness(backgroundColor, 20),
-      ];
+      ] as const);
 };