@umituz/react-native-splash 1.6.3 → 1.7.1

package/src/presentation/components/SplashScreen.tsx

@@ -3,7 +3,7 @@
  * Single Responsibility: Orchestrate splash screen UI
  */
 
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { View, StyleSheet } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -13,10 +13,14 @@ import { SplashLogo } from "./SplashLogo";
 import { SplashTypography } from "./SplashTypography";
 import { SplashLoading } from "./SplashLoading";
 import { SplashDecorations } from "./SplashDecorations";
+import { SplashErrorBoundary } from "./SplashErrorBoundary";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
 export interface SplashScreenProps extends SplashOptions {
   visible?: boolean;
+  textColor?: string;
+  iconColor?: string;
+  decorationColor?: string;
 }
 
 /**
@@ -36,6 +40,9 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   renderContent,
   renderFooter,
   visible = true,
+  textColor,
+  iconColor,
+  decorationColor,
 }) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
@@ -43,45 +50,54 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 
   const styles = getStyles(insets, tokens.spacing);
 
+  const timerRef = useRef<NodeJS.Timeout>();
+
   useEffect(() => {
     if (!visible) return;
 
-    const timer = setTimeout(() => {
+    timerRef.current = setTimeout(() => {
       if (onReady) {
         onReady();
       }
     }, minimumDisplayTime);
 
-    return () => clearTimeout(timer);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
   }, [visible, minimumDisplayTime, onReady]);
 
   if (!visible) return null;
 
-  const displayAppName = appName || t("branding.appName", "App Name");
-  const displayTagline = tagline || t("branding.tagline", "Your tagline here");
-  const displayLoadingText = loadingText || t("general.loading", "Loading...");
+  const displayAppName = appName || t("branding.appName", "");
+  const displayTagline = tagline || t("branding.tagline", "");
+  const displayLoadingText = loadingText || t("general.loading", "");
 
   // Use gradientColors if provided, otherwise use backgroundColor as solid color
   const finalBackgroundColor = gradientColors
     ? undefined
     : backgroundColor || tokens.colors.primary;
 
-  const finalGradientColors: string[] = gradientColors
-    ? [...gradientColors]
-    : [finalBackgroundColor!];
-
   // Use LinearGradient only if gradientColors provided (length > 1)
   const hasGradient = gradientColors && gradientColors.length > 1;
 
+  // For LinearGradient, ensure at least 2 colors (tuple type requirement)
+  const finalGradientColors: [string, string, ...string[]] = hasGradient
+    ? (gradientColors.length >= 2
+        ? (gradientColors as [string, string, ...string[]])
+        : [gradientColors[0], gradientColors[0] || finalBackgroundColor!])
+    : [finalBackgroundColor!, finalBackgroundColor!];
+
   const content = (
     <>
-      <SplashDecorations />
+      <SplashDecorations decorationColor={decorationColor} />
 
       <View style={styles.content}>
         {renderLogo ? (
           renderLogo()
         ) : (
-          <SplashLogo logo={logo} />
+          <SplashLogo logo={logo} iconColor={iconColor} />
         )}
 
         {renderContent ? (
@@ -91,6 +107,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
             appName={displayAppName}
             tagline={displayTagline}
             tokens={tokens}
+            textColor={textColor}
           />
         )}
       </View>
@@ -100,6 +117,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
           loadingText={displayLoadingText}
           tokens={tokens}
           bottomInset={insets.bottom}
+          textColor={textColor}
         />
       )}
 
@@ -108,24 +126,26 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   );
 
   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>
+    <SplashErrorBoundary>
+      <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>
+    </SplashErrorBoundary>
   );
 };
 

package/src/presentation/components/SplashTypography.tsx

@@ -11,14 +11,16 @@ export interface SplashTypographyProps {
   appName: string;
   tagline?: string;
   tokens: DesignTokens;
+  textColor?: string;
 }
 
 export const SplashTypography: React.FC<SplashTypographyProps> = ({
   appName,
   tagline,
   tokens,
+  textColor = "#FFFFFF",
 }) => {
-  const styles = getStyles(tokens);
+  const styles = getStyles(tokens, textColor);
 
   return (
     <View style={styles.container}>
@@ -34,7 +36,7 @@ export const SplashTypography: React.FC<SplashTypographyProps> = ({
   );
 };
 
-const getStyles = (tokens: DesignTokens) => {
+const getStyles = (tokens: DesignTokens, textColor: string) => {
   return StyleSheet.create({
     container: {
       alignItems: "center",
@@ -43,7 +45,7 @@ const getStyles = (tokens: DesignTokens) => {
     appName: {
       fontSize: 48,
       fontWeight: "800" as const,
-      color: "#FFFFFF",
+      color: textColor,
       textAlign: "center" as const,
       marginBottom: tokens.spacing.md,
       letterSpacing: -1.2,
@@ -54,7 +56,7 @@ const getStyles = (tokens: DesignTokens) => {
     },
     tagline: {
       fontSize: 17,
-      color: "#FFFFFF",
+      color: textColor,
       textAlign: "center" as const,
       opacity: 0.95,
       maxWidth: 320,

package/src/presentation/hooks/useSplash.ts

@@ -0,0 +1,70 @@
+/**
+ * Use Splash Hook
+ * Single Responsibility: Manage splash screen state and timing
+ */
+
+import { useEffect, useState, useRef } from "react";
+
+interface UseSplashOptions {
+  minimumDisplayTime?: number;
+  onReady?: () => void | Promise<void>;
+  autoHide?: boolean;
+}
+
+export const useSplash = ({
+  minimumDisplayTime = 1500,
+  onReady,
+  autoHide = true,
+}: UseSplashOptions = {}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isReady, setIsReady] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout>();
+  const isReadyRef = useRef(false);
+
+  const hide = () => {
+    setIsVisible(false);
+  };
+
+  const show = () => {
+    setIsVisible(true);
+  };
+
+  const markReady = async () => {
+    if (isReadyRef.current) return;
+
+    isReadyRef.current = true;
+    setIsReady(true);
+
+    if (onReady) {
+      try {
+        await onReady();
+      } catch (error) {
+        if (__DEV__) {
+          console.error("Splash onReady error:", error);
+        }
+      }
+    }
+
+    if (autoHide) {
+      timerRef.current = setTimeout(() => {
+        hide();
+      }, minimumDisplayTime);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    isVisible,
+    isReady,
+    hide,
+    show,
+    markReady,
+  };
+};

package/src/types/expo-linear-gradient.d.ts

@@ -0,0 +1,12 @@
+declare module 'expo-linear-gradient' {
+  import { View, ViewProps } from 'react-native';
+  
+  export interface LinearGradientProps extends ViewProps {
+    colors: readonly string[];
+    start?: { x: number; y: number };
+    end?: { x: number; y: number };
+    locations?: readonly number[];
+  }
+  
+  export const LinearGradient: React.FC<LinearGradientProps>;
+}