@umituz/react-native-splash 1.4.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.4.1",
+  "version": "1.5.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/presentation/components/SplashDecorations.tsx

@@ -0,0 +1,48 @@
+/**
+ * Splash Decorations Component
+ * Single Responsibility: Render decorative background elements
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+export const SplashDecorations: React.FC = () => {
+  return (
+    <>
+      <View style={styles.circle1} />
+      <View style={styles.circle2} />
+      <View style={styles.circle3} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  circle1: {
+    position: "absolute",
+    width: 300,
+    height: 300,
+    borderRadius: 150,
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    top: -100,
+    right: -100,
+  },
+  circle2: {
+    position: "absolute",
+    width: 200,
+    height: 200,
+    borderRadius: 100,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    bottom: -50,
+    left: -50,
+  },
+  circle3: {
+    position: "absolute",
+    width: 150,
+    height: 150,
+    borderRadius: 75,
+    backgroundColor: "rgba(255, 255, 255, 0.04)",
+    top: "30%",
+    right: "10%",
+  },
+});
+

package/src/presentation/components/SplashLoading.tsx

@@ -0,0 +1,72 @@
+/**
+ * Splash Loading Component
+ * Single Responsibility: Render splash screen loading indicator
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import type { AppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface SplashLoadingProps {
+  loadingText: string;
+  tokens: AppDesignTokens;
+  bottomInset: number;
+}
+
+export const SplashLoading: React.FC<SplashLoadingProps> = ({
+  loadingText,
+  tokens,
+  bottomInset,
+}) => {
+  const styles = getStyles(tokens, bottomInset);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.barContainer}>
+        <View style={styles.bar} />
+      </View>
+      <Text style={styles.text}>{loadingText}</Text>
+    </View>
+  );
+};
+
+const getStyles = (tokens: AppDesignTokens, bottomInset: number) => {
+  return StyleSheet.create({
+    container: {
+      alignItems: "center",
+      justifyContent: "center",
+      paddingBottom: tokens.spacing.xxxl + bottomInset,
+      zIndex: 1,
+    },
+    barContainer: {
+      width: 120,
+      height: 4,
+      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      borderRadius: 2,
+      overflow: "hidden",
+      marginBottom: tokens.spacing.md,
+    },
+    bar: {
+      width: "60%",
+      height: "100%",
+      backgroundColor: "#FFFFFF",
+      borderRadius: 2,
+      shadowColor: "#FFFFFF",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.8,
+      shadowRadius: 4,
+      elevation: 4,
+    },
+    text: {
+      fontSize: 13,
+      color: "#FFFFFF",
+      opacity: 0.9,
+      fontWeight: "500" as const,
+      letterSpacing: 0.8,
+      textShadowColor: "rgba(0, 0, 0, 0.15)",
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 2,
+    },
+  });
+};
+

package/src/presentation/components/SplashLogo.tsx

@@ -0,0 +1,78 @@
+/**
+ * Splash Logo Component
+ * Single Responsibility: Render splash screen logo
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+
+export interface SplashLogoProps {
+  logo?: string | React.ReactNode;
+  logoSize?: number;
+  glowSize?: number;
+}
+
+export const SplashLogo: React.FC<SplashLogoProps> = ({
+  logo,
+  logoSize = 140,
+  glowSize = 160,
+}) => {
+  const styles = getStyles(logoSize, glowSize);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.glow} />
+      <View style={styles.background}>
+        {typeof logo === "string" ? (
+          <AtomicIcon name={logo || "Sparkles"} size="xxl" color="white" />
+        ) : logo ? (
+          logo
+        ) : (
+          <AtomicIcon name="Sparkles" size="xxl" color="white" />
+        )}
+      </View>
+    </View>
+  );
+};
+
+const getStyles = (logoSize: number, glowSize: number) => {
+  const radius = logoSize / 2;
+  const glowRadius = glowSize / 2;
+
+  return StyleSheet.create({
+    container: {
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+    },
+    glow: {
+      position: "absolute",
+      width: glowSize,
+      height: glowSize,
+      borderRadius: glowRadius,
+      backgroundColor: "rgba(255, 255, 255, 0.15)",
+      shadowColor: "#FFFFFF",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.5,
+      shadowRadius: 30,
+      elevation: 10,
+    },
+    background: {
+      width: logoSize,
+      height: logoSize,
+      borderRadius: radius,
+      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 2,
+      borderColor: "rgba(255, 255, 255, 0.3)",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 8,
+    },
+  });
+};
+

package/src/presentation/components/SplashScreen.tsx

@@ -1,11 +1,10 @@
 /**
  * Splash Screen Component
- *
- * Simple splash screen with logo, app name, and loading indicator
+ * Single Responsibility: Orchestrate splash screen UI
  */
 
 import React, { useEffect } from "react";
-import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
+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";
@@ -13,13 +12,17 @@ import {
   useDesignSystemTheme,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system-theme";
-import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+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 {
-  /**
-   * Whether splash is visible
-   */
   visible?: boolean;
 }
 
@@ -44,26 +47,15 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   const { t } = useLocalization();
   const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
-  
+
   const isDark = themeMode === "dark";
-  const colors = tokens.colors;
-  const spacing = tokens.spacing;
-  
-  // Use provided backgroundColor or theme-based color
-  const finalBackgroundColor = backgroundColor || colors.primary;
-  
-  // Generate gradient colors based on theme
-  const gradientColors: [string, string] = backgroundColor
-    ? [backgroundColor, adjustColorBrightness(backgroundColor, isDark ? -15 : 10)]
-    : isDark
-    ? [colors.primary, adjustColorBrightness(colors.primary, -20)]
-    : [colors.primary, adjustColorBrightness(colors.primary, 15)];
-  
-  const styles = getStyles(insets, finalBackgroundColor, colors, spacing, isDark);
-
-  /**
-   * Call onReady after minimum display time
-   */
+
+  const gradientColors = backgroundColor
+    ? generateGradientFromColor(backgroundColor, isDark)
+    : getDefaultGradient(isDark);
+
+  const styles = getStyles(insets, tokens.spacing);
+
   useEffect(() => {
     if (!visible) return;
 
@@ -90,162 +82,61 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
         end={{ x: 1, y: 1 }}
         style={styles.gradient}
       >
-        {/* Main Content */}
+        <SplashDecorations />
+
         <View style={styles.content}>
           {renderLogo ? (
             renderLogo()
           ) : (
-            <View style={styles.logoContainer}>
-              <View style={styles.logoBackground}>
-                {typeof logo === "string" ? (
-                  <AtomicIcon
-                    name={logo || "Sparkles"}
-                    size="xl"
-                    color={isDark ? "primary" : "textInverse"}
-                  />
-                ) : logo ? (
-                  logo
-                ) : (
-                  <AtomicIcon
-                    name="Sparkles"
-                    size="xl"
-                    color={isDark ? "primary" : "textInverse"}
-                  />
-                )}
-              </View>
-            </View>
+            <SplashLogo logo={logo} />
           )}
 
           {renderContent ? (
             renderContent()
           ) : (
-            <View style={styles.textContainer}>
-              <Text style={styles.appName}>{displayAppName}</Text>
-              {displayTagline && (
-                <Text style={styles.tagline}>{displayTagline}</Text>
-              )}
-            </View>
+            <SplashTypography
+              appName={displayAppName}
+              tagline={displayTagline}
+              tokens={tokens}
+            />
           )}
         </View>
 
-        {/* Loading Indicator */}
         {showLoading && (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator
-              size="large"
-              color={isDark ? colors.primary : "#FFFFFF"}
-            />
-            <Text style={styles.loadingText}>{displayLoadingText}</Text>
-          </View>
+          <SplashLoading
+            loadingText={displayLoadingText}
+            tokens={tokens}
+            bottomInset={insets.bottom}
+          />
         )}
 
-        {/* Footer */}
         {renderFooter && renderFooter()}
       </LinearGradient>
     </View>
   );
 };
 
-/**
- * Adjust color brightness
- */
-const adjustColorBrightness = (hex: string, percent: number): string => {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const amt = Math.round(2.55 * percent);
-  const R = (num >> 16) + amt;
-  const G = ((num >> 8) & 0x00ff) + amt;
-  const B = (num & 0x0000ff) + amt;
-  return (
-    "#" +
-    (
-      0x1000000 +
-      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
-      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
-      (B < 255 ? (B < 1 ? 0 : B) : 255)
-    )
-      .toString(16)
-      .slice(1)
-  );
-};
-
 const getStyles = (
   insets: { top: number; bottom: number },
-  backgroundColor: string,
-  colors: any,
   spacing: any,
-  isDark: boolean,
 ) => {
-  const textColor = isDark ? colors.textPrimary : "#FFFFFF";
-  const logoBgOpacity = isDark ? 0.15 : 0.2;
-  const textOpacity = isDark ? 1 : 0.95;
-
   return StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: backgroundColor,
     },
     gradient: {
       flex: 1,
       paddingTop: insets.top,
       paddingBottom: insets.bottom,
+      position: "relative",
+      overflow: "hidden",
     },
     content: {
       flex: 1,
       alignItems: "center",
       justifyContent: "center",
-      paddingHorizontal: spacing.lg,
-    },
-    logoContainer: {
-      marginBottom: spacing.xl,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    logoBackground: {
-      width: 120,
-      height: 120,
-      borderRadius: 60,
-      backgroundColor: isDark
-        ? `${colors.primary}${Math.round(logoBgOpacity * 255).toString(16).padStart(2, "0")}`
-        : `rgba(255, 255, 255, ${logoBgOpacity})`,
-      alignItems: "center",
-      justifyContent: "center",
-      padding: spacing.md,
-      borderWidth: isDark ? 2 : 0,
-      borderColor: isDark ? `${colors.primary}40` : "transparent",
-    },
-    textContainer: {
-      alignItems: "center",
-      marginBottom: spacing.xxxl,
-    },
-    appName: {
-      fontSize: 32,
-      fontWeight: "700",
-      color: textColor,
-      textAlign: "center",
-      marginBottom: spacing.sm,
-      letterSpacing: -0.5,
-    },
-    tagline: {
-      fontSize: 16,
-      color: textColor,
-      textAlign: "center",
-      opacity: textOpacity * 0.85,
-      maxWidth: 300,
-      lineHeight: 22,
-      fontWeight: "400",
-    },
-    loadingContainer: {
-      alignItems: "center",
-      justifyContent: "center",
-      paddingBottom: spacing.xxxl,
-    },
-    loadingText: {
-      fontSize: 14,
-      color: textColor,
-      opacity: textOpacity * 0.7,
-      marginTop: spacing.md,
-      fontWeight: "500",
+      paddingHorizontal: spacing.xl,
+      zIndex: 1,
     },
   });
 };
-

package/src/presentation/components/SplashTypography.tsx

@@ -0,0 +1,70 @@
+/**
+ * Splash Typography Component
+ * Single Responsibility: Render splash screen typography
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import type { AppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface SplashTypographyProps {
+  appName: string;
+  tagline?: string;
+  tokens: AppDesignTokens;
+}
+
+export const SplashTypography: React.FC<SplashTypographyProps> = ({
+  appName,
+  tagline,
+  tokens,
+}) => {
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.appName} numberOfLines={1}>
+        {appName}
+      </Text>
+      {tagline && (
+        <Text style={styles.tagline} numberOfLines={2}>
+          {tagline}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const getStyles = (tokens: AppDesignTokens) => {
+  return StyleSheet.create({
+    container: {
+      alignItems: "center",
+      marginTop: tokens.spacing.xl,
+    },
+    appName: {
+      fontSize: 48,
+      fontWeight: "800" as const,
+      color: "#FFFFFF",
+      textAlign: "center" as const,
+      marginBottom: tokens.spacing.md,
+      letterSpacing: -1.2,
+      lineHeight: 56,
+      textShadowColor: "rgba(0, 0, 0, 0.25)",
+      textShadowOffset: { width: 0, height: 2 },
+      textShadowRadius: 6,
+    },
+    tagline: {
+      fontSize: 17,
+      color: "#FFFFFF",
+      textAlign: "center" as const,
+      opacity: 0.95,
+      maxWidth: 320,
+      lineHeight: 24,
+      fontWeight: "500" as const,
+      letterSpacing: 0.2,
+      textShadowColor: "rgba(0, 0, 0, 0.2)",
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 3,
+    },
+  });
+};
+

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

@@ -0,0 +1,56 @@
+/**
+ * Splash Gradient Utilities
+ * Single Responsibility: Gradient color generation
+ */
+
+/**
+ * Adjust color brightness
+ */
+export const adjustColorBrightness = (hex: string, percent: number): string => {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) + amt;
+  const G = ((num >> 8) & 0x00ff) + amt;
+  const B = (num & 0x0000ff) + amt;
+  return (
+    "#" +
+    (
+      0x1000000 +
+      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+      (B < 255 ? (B < 1 ? 0 : B) : 255)
+    )
+      .toString(16)
+      .slice(1)
+  );
+};
+
+/**
+ * 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[] => {
+  return isDark
+    ? [
+        backgroundColor,
+        adjustColorBrightness(backgroundColor, -20),
+        adjustColorBrightness(backgroundColor, -30),
+      ]
+    : [
+        backgroundColor,
+        adjustColorBrightness(backgroundColor, 10),
+        adjustColorBrightness(backgroundColor, 20),
+      ];
+};
+