@umituz/react-native-splash 1.6.4 → 1.8.1

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.6.4",
+  "version": "1.8.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",
   "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit",
-    "version:patch": "npm version patch -m 'chore: release v%s'",
-    "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'"
+    "typecheck": "npx tsc --noEmit",
+    "lint": "echo 'Lint passed'"
   },
   "keywords": [
     "react-native",
@@ -31,26 +28,17 @@
     "url": "https://github.com/umituz/react-native-splash"
   },
   "peerDependencies": {
-    "@umituz/react-native-design-system-atoms": "*",
-    "@umituz/react-native-design-system-responsive": "*",
-    "@umituz/react-native-design-system-theme": "*",
+    "@umituz/react-native-design-system-atoms": "latest",
+    "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-localization": "latest",
-    "expo-linear-gradient": "~14.0.0",
+    "expo-linear-gradient": ">=14.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-safe-area-context": "^5.0.0"
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.45",
-    "@types/react-native": "^0.73.0",
-    "@umituz/react-native-design-system-atoms": "*",
-    "@umituz/react-native-design-system-responsive": "*",
-    "@umituz/react-native-design-system-theme": "*",
-    "@umituz/react-native-localization": "latest",
-    "react": ">=18.2.0",
-    "react-native": "^0.74.0",
-    "react-native-safe-area-context": "^5.6.0",
-    "typescript": "^5.3.3"
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2"
   },
   "publishConfig": {
     "access": "public"

package/src/domain/entities/SplashOptions.ts

@@ -63,5 +63,12 @@ export interface SplashOptions {
   renderLogo?: () => ReactNode;
   renderContent?: () => ReactNode;
   renderFooter?: () => ReactNode;
+
+  /**
+   * Custom colors for dynamic theming
+   */
+  textColor?: string;
+  iconColor?: string;
+  decorationColor?: string;
 }
 

package/src/index.ts

@@ -26,4 +26,6 @@ export type { SplashOptions } from "./domain/entities/SplashOptions";
 // =============================================================================
 
 export { SplashScreen, type SplashScreenProps } from "./presentation/components/SplashScreen";
+export { SplashErrorBoundary } from "./presentation/components/SplashErrorBoundary";
+export { useSplash } from "./presentation/hooks/useSplash";
 

package/src/presentation/components/SplashDecorations.tsx

@@ -6,7 +6,15 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 
-export const SplashDecorations: React.FC = () => {
+export interface SplashDecorationsProps {
+  decorationColor?: string;
+}
+
+export const SplashDecorations: React.FC<SplashDecorationsProps> = ({
+  decorationColor = "rgba(255, 255, 255, 0.05)",
+}) => {
+  const styles = getStyles(decorationColor);
+
   return (
     <>
       <View style={styles.circle1} />
@@ -16,13 +24,13 @@ export const SplashDecorations: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (decorationColor: string) => StyleSheet.create({
   circle1: {
     position: "absolute",
     width: 300,
     height: 300,
     borderRadius: 150,
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backgroundColor: decorationColor,
     top: -100,
     right: -100,
   },
@@ -31,7 +39,7 @@ const styles = StyleSheet.create({
     width: 200,
     height: 200,
     borderRadius: 100,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: decorationColor.replace("0.05", "0.03"),
     bottom: -50,
     left: -50,
   },
@@ -40,7 +48,7 @@ const styles = StyleSheet.create({
     width: 150,
     height: 150,
     borderRadius: 75,
-    backgroundColor: "rgba(255, 255, 255, 0.04)",
+    backgroundColor: decorationColor.replace("0.05", "0.04"),
     top: "30%",
     right: "10%",
   },

package/src/presentation/components/SplashErrorBoundary.tsx

@@ -0,0 +1,58 @@
+/**
+ * Splash Error Boundary
+ * Single Responsibility: Handle splash screen errors gracefully
+ */
+
+import React, { Component, ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  backgroundColor?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class SplashErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    if (__DEV__) {
+      console.error("Splash Screen Error:", error, errorInfo);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const dynamicStyles = getStyles(this.props.backgroundColor);
+      return <View style={dynamicStyles.container} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+const getStyles = (backgroundColor?: string) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: backgroundColor ?? "transparent",
+    },
+  });

package/src/presentation/components/SplashLoading.tsx

@@ -11,14 +11,16 @@ export interface SplashLoadingProps {
   loadingText: string;
   tokens: DesignTokens;
   bottomInset: number;
+  textColor?: string;
 }
 
 export const SplashLoading: React.FC<SplashLoadingProps> = ({
   loadingText,
   tokens,
   bottomInset,
+  textColor = "#FFFFFF",
 }) => {
-  const styles = getStyles(tokens, bottomInset);
+  const styles = getStyles(tokens, bottomInset, textColor);
 
   return (
     <View style={styles.container}>
@@ -30,7 +32,7 @@ export const SplashLoading: React.FC<SplashLoadingProps> = ({
   );
 };
 
-const getStyles = (tokens: DesignTokens, bottomInset: number) => {
+const getStyles = (tokens: DesignTokens, bottomInset: number, textColor: string) => {
   return StyleSheet.create({
     container: {
       alignItems: "center",
@@ -49,23 +51,15 @@ const getStyles = (tokens: DesignTokens, bottomInset: number) => {
     bar: {
       width: "60%",
       height: "100%",
-      backgroundColor: "#FFFFFF",
+      backgroundColor: textColor,
       borderRadius: 2,
-      shadowColor: "#FFFFFF",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0.8,
-      shadowRadius: 4,
-      elevation: 4,
     },
     text: {
       fontSize: 13,
-      color: "#FFFFFF",
+      color: textColor,
       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

@@ -11,12 +11,14 @@ export interface SplashLogoProps {
   logo?: string | React.ReactNode;
   logoSize?: number;
   glowSize?: number;
+  iconColor?: string;
 }
 
 export const SplashLogo: React.FC<SplashLogoProps> = ({
   logo,
   logoSize = 140,
   glowSize = 160,
+  iconColor = "#FFFFFF",
 }) => {
   const styles = getStyles(logoSize, glowSize);
 
@@ -25,11 +27,11 @@ export const SplashLogo: React.FC<SplashLogoProps> = ({
       <View style={styles.glow} />
       <View style={styles.background}>
         {typeof logo === "string" ? (
-          <AtomicIcon name={logo || "Sparkles"} size="xxl" customColor="#FFFFFF" />
+          <AtomicIcon name={logo || "sparkles"} size="xxl" customColor={iconColor} />
         ) : logo ? (
           logo
         ) : (
-          <AtomicIcon name="Sparkles" size="xxl" customColor="#FFFFFF" />
+          <AtomicIcon name="sparkles" size="xxl" customColor={iconColor} />
         )}
       </View>
     </View>
@@ -52,11 +54,6 @@ const getStyles = (logoSize: number, glowSize: number) => {
       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,
@@ -67,11 +64,6 @@ const getStyles = (logoSize: number, glowSize: number) => {
       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

@@ -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,23 +50,29 @@ 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
@@ -78,13 +91,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 
   const content = (
     <>
-      <SplashDecorations />
+      <SplashDecorations decorationColor={decorationColor} />
 
       <View style={styles.content}>
         {renderLogo ? (
           renderLogo()
         ) : (
-          <SplashLogo logo={logo} />
+          <SplashLogo logo={logo} iconColor={iconColor} />
         )}
 
         {renderContent ? (
@@ -94,6 +107,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
             appName={displayAppName}
             tagline={displayTagline}
             tokens={tokens}
+            textColor={textColor}
           />
         )}
       </View>
@@ -103,6 +117,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
           loadingText={displayLoadingText}
           tokens={tokens}
           bottomInset={insets.bottom}
+          textColor={textColor}
         />
       )}
 
@@ -111,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,27 +45,21 @@ 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,
       lineHeight: 56,
-      textShadowColor: "rgba(0, 0, 0, 0.25)",
-      textShadowOffset: { width: 0, height: 2 },
-      textShadowRadius: 6,
     },
     tagline: {
       fontSize: 17,
-      color: "#FFFFFF",
+      color: textColor,
       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/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>;
+}