@umituz/react-native-splash 1.5.4 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.5.4",
+  "version": "1.6.1",
   "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

@@ -8,18 +8,11 @@ import { View, StyleSheet } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useLocalization } from "@umituz/react-native-localization";
-import {
-  useDesignSystemTheme,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { SplashLogo } from "./SplashLogo";
 import { SplashTypography } from "./SplashTypography";
 import { SplashLoading } from "./SplashLoading";
 import { SplashDecorations } from "./SplashDecorations";
-import {
-  getDefaultGradient,
-  generateGradientFromColor,
-} from "../utils/splashGradient.utils";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
 export interface SplashScreenProps extends SplashOptions {
@@ -34,6 +27,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   tagline,
   logo,
   backgroundColor,
+  gradientColors,
   loadingText,
   showLoading = true,
   minimumDisplayTime = 1500,
@@ -45,15 +39,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 }) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
-  const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
 
-  const isDark = themeMode === "dark";
-
-  const gradientColors = backgroundColor
-    ? generateGradientFromColor(backgroundColor, isDark)
-    : getDefaultGradient(isDark);
-
   const styles = getStyles(insets, tokens.spacing);
 
   useEffect(() => {
@@ -74,44 +61,70 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   const displayTagline = tagline || t("branding.tagline", "Your tagline here");
   const displayLoadingText = loadingText || t("general.loading", "Loading...");
 
-  return (
-    <View style={styles.container}>
-      <LinearGradient
-        colors={gradientColors as readonly string[]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={styles.gradient}
-      >
-        <SplashDecorations />
-
-        <View style={styles.content}>
-          {renderLogo ? (
-            renderLogo()
-          ) : (
-            <SplashLogo logo={logo} />
-          )}
-
-          {renderContent ? (
-            renderContent()
-          ) : (
-            <SplashTypography
-              appName={displayAppName}
-              tagline={displayTagline}
-              tokens={tokens}
-            />
-          )}
-        </View>
+  // Use gradientColors if provided, otherwise use backgroundColor as solid color
+  const finalBackgroundColor = gradientColors
+    ? undefined
+    : backgroundColor || tokens.colors.primary;
+
+  const finalGradientColors: readonly string[] = gradientColors || [
+    finalBackgroundColor!,
+  ];
+
+  // Use LinearGradient only if gradientColors provided (length > 1)
+  const hasGradient = gradientColors && gradientColors.length > 1;
 
-        {showLoading && (
-          <SplashLoading
-            loadingText={displayLoadingText}
+  const content = (
+    <>
+      <SplashDecorations />
+
+      <View style={styles.content}>
+        {renderLogo ? (
+          renderLogo()
+        ) : (
+          <SplashLogo logo={logo} />
+        )}
+
+        {renderContent ? (
+          renderContent()
+        ) : (
+          <SplashTypography
+            appName={displayAppName}
+            tagline={displayTagline}
             tokens={tokens}
-            bottomInset={insets.bottom}
           />
         )}
+      </View>
+
+      {showLoading && (
+        <SplashLoading
+          loadingText={displayLoadingText}
+          tokens={tokens}
+          bottomInset={insets.bottom}
+        />
+      )}
+
+      {renderFooter && renderFooter()}
+    </>
+  );
 
-        {renderFooter && renderFooter()}
-      </LinearGradient>
+  return (
+    <View style={styles.container}>
+      {hasGradient ? (
+        <LinearGradient
+          colors={finalGradientColors}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.gradient}
+        >
+          {content}
+        </LinearGradient>
+      ) : (
+        <View
+          style={[styles.gradient, { backgroundColor: finalBackgroundColor }]}
+        >
+          {content}
+        </View>
+      )}
     </View>
   );
 };

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

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