@umituz/react-native-splash 1.10.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.10.1",
+  "version": "1.12.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",
@@ -28,17 +28,19 @@
     "url": "https://github.com/umituz/react-native-splash"
   },
   "peerDependencies": {
-    "@umituz/react-native-icons": "latest",
-    "@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",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
+    "@types/node": "^20.0.0",
     "@types/react": "~19.1.0",
+    "@types/react-native": "^0.73.0",
+    "expo-linear-gradient": "^14.0.0",
+    "react": "^19.0.0",
+    "react-native": "^0.76.0",
+    "react-native-safe-area-context": "^5.0.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/domain/entities/SplashOptions.ts

@@ -1,74 +1,36 @@
 /**
- * Splash Options
- *
- * Configuration options for splash screen
+ * Splash Options - Minimal Configuration
  */
 
 import { ReactNode } from "react";
 
-/**
- * Splash Options
- * Customize the splash screen experience
- */
 export interface SplashOptions {
-  /**
-   * App name to display
-   */
+  /** App name to display */
   appName?: string;
 
-  /**
-   * Tagline or subtitle
-   */
+  /** Tagline or subtitle */
   tagline?: string;
 
-  /**
-   * Logo/icon component or name
-   */
-  logo?: ReactNode | string;
-
-  /**
-   * Background color (will generate gradient automatically)
-   */
+  /** Background color */
   backgroundColor?: string;
 
-  /**
-   * Custom gradient colors (overrides backgroundColor)
-   * If provided, backgroundColor is ignored
-   */
+  /** Custom gradient colors (overrides backgroundColor) */
   gradientColors?: readonly string[];
 
-  /**
-   * Loading text
-   */
+  /** Loading text */
   loadingText?: string;
 
-  /**
-   * Show loading indicator (default: true)
-   */
+  /** Show loading indicator (default: true) */
   showLoading?: boolean;
 
-  /**
-   * Minimum display time in milliseconds (default: 1500)
-   */
+  /** Minimum display time in ms (default: 1500) */
   minimumDisplayTime?: number;
 
-  /**
-   * Callback when splash is ready to hide
-   */
+  /** Callback when splash is ready */
   onReady?: () => void | Promise<void>;
 
-  /**
-   * Custom render functions
-   */
+  /** Custom render functions */
   renderLogo?: () => ReactNode;
   renderContent?: () => ReactNode;
   renderFooter?: () => ReactNode;
-
-  /**
-   * Custom colors for dynamic theming
-   */
-  textColor?: string;
-  iconColor?: string;
-  decorationColor?: string;
 }
-

package/src/index.ts

@@ -26,6 +26,5 @@ 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/SplashScreen.tsx

@@ -1,38 +1,30 @@
 /**
  * Splash Screen Component
- * Single Responsibility: Orchestrate splash screen UI
+ *
+ * ULTRA MINIMAL - No external dependencies
+ * Only basic React Native + expo-linear-gradient + safe-area
  */
 
-import React, { useEffect, useRef } from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useEffect, useRef, useCallback } from "react";
+import { View, Text, StyleSheet, ActivityIndicator } 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 { 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 { SplashErrorBoundary } from "./SplashErrorBoundary";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
 export interface SplashScreenProps extends SplashOptions {
   visible?: boolean;
   textColor?: string;
-  iconColor?: string;
-  decorationColor?: string;
 }
 
-/**
- * Splash Screen Component
- */
+const DEFAULT_BG = "#6366F1";
+const DEFAULT_TEXT = "#FFFFFF";
+
 export const SplashScreen: React.FC<SplashScreenProps> = ({
-  appName,
-  tagline,
-  logo,
-  backgroundColor,
+  appName = "",
+  tagline = "",
+  backgroundColor = DEFAULT_BG,
   gradientColors,
-  loadingText,
+  loadingText = "",
   showLoading = true,
   minimumDisplayTime = 1500,
   onReady,
@@ -40,136 +32,92 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   renderContent,
   renderFooter,
   visible = true,
-  textColor,
-  iconColor,
-  decorationColor,
+  textColor = DEFAULT_TEXT,
 }) => {
   const insets = useSafeAreaInsets();
-  const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const onReadyRef = useRef(onReady);
+  const hasCalledOnReady = useRef(false);
 
-  const styles = getStyles(insets, tokens.spacing);
+  // Keep onReady ref updated but don't trigger re-render
+  useEffect(() => {
+    onReadyRef.current = onReady;
+  }, [onReady]);
 
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  // Stable callback that uses ref
+  const handleReady = useCallback(() => {
+    if (hasCalledOnReady.current) return;
+    hasCalledOnReady.current = true;
+    onReadyRef.current?.();
+  }, []);
 
   useEffect(() => {
     if (!visible) return;
 
-    timerRef.current = setTimeout(() => {
-      if (onReady) {
-        onReady();
-      }
-    }, minimumDisplayTime);
+    // Reset when becoming visible again
+    hasCalledOnReady.current = false;
+
+    timerRef.current = setTimeout(handleReady, minimumDisplayTime);
 
     return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
-  }, [visible, minimumDisplayTime, onReady]);
+  }, [visible, minimumDisplayTime, handleReady]);
 
   if (!visible) return null;
 
-  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;
-
-  // 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 colors: [string, string, ...string[]] = hasGradient
+    ? (gradientColors as [string, string, ...string[]])
+    : [backgroundColor, backgroundColor];
 
   const content = (
-    <>
-      <SplashDecorations decorationColor={decorationColor} />
-
-      <View style={styles.content}>
-        {renderLogo ? (
-          renderLogo()
-        ) : (
-          <SplashLogo logo={logo} iconColor={iconColor} />
-        )}
+    <View style={[styles.inner, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+      <View style={styles.center}>
+        {renderLogo ? renderLogo() : <View style={styles.logo} />}
 
         {renderContent ? (
           renderContent()
         ) : (
-          <SplashTypography
-            appName={displayAppName}
-            tagline={displayTagline}
-            tokens={tokens}
-            textColor={textColor}
-          />
+          <>
+            {appName ? <Text style={[styles.title, { color: textColor }]}>{appName}</Text> : null}
+            {tagline ? <Text style={[styles.subtitle, { color: textColor }]}>{tagline}</Text> : null}
+          </>
         )}
       </View>
 
       {showLoading && (
-        <SplashLoading
-          loadingText={displayLoadingText}
-          tokens={tokens}
-          bottomInset={insets.bottom}
-          textColor={textColor}
-        />
+        <View style={styles.loading}>
+          <ActivityIndicator color={textColor} />
+          {loadingText ? <Text style={[styles.loadingText, { color: textColor }]}>{loadingText}</Text> : null}
+        </View>
       )}
 
-      {renderFooter && renderFooter()}
-    </>
+      {renderFooter?.()}
+    </View>
   );
 
   return (
-    <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>
+    <View style={styles.container}>
+      {hasGradient ? (
+        <LinearGradient colors={colors} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.fill}>
+          {content}
+        </LinearGradient>
+      ) : (
+        <View style={[styles.fill, { backgroundColor }]}>{content}</View>
+      )}
+    </View>
   );
 };
 
-const getStyles = (
-  insets: { top: number; bottom: number },
-  spacing: any,
-) => {
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    gradient: {
-      flex: 1,
-      paddingTop: insets.top,
-      paddingBottom: insets.bottom,
-      position: "relative",
-      overflow: "hidden",
-    },
-    content: {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      paddingHorizontal: spacing.xl,
-      zIndex: 1,
-    },
-  });
-};
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  fill: { flex: 1 },
+  inner: { flex: 1, justifyContent: "space-between" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24 },
+  logo: { width: 100, height: 100, borderRadius: 50, backgroundColor: "rgba(255,255,255,0.2)", marginBottom: 24 },
+  title: { fontSize: 32, fontWeight: "700", textAlign: "center", marginBottom: 8 },
+  subtitle: { fontSize: 16, textAlign: "center", opacity: 0.9 },
+  loading: { alignItems: "center", paddingBottom: 48 },
+  loadingText: { fontSize: 14, marginTop: 12, opacity: 0.8 },
+});

package/src/presentation/components/SplashDecorations.tsx

@@ -1,56 +0,0 @@
-/**
- * Splash Decorations Component
- * Single Responsibility: Render decorative background elements
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-
-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} />
-      <View style={styles.circle2} />
-      <View style={styles.circle3} />
-    </>
-  );
-};
-
-const getStyles = (decorationColor: string) => StyleSheet.create({
-  circle1: {
-    position: "absolute",
-    width: 300,
-    height: 300,
-    borderRadius: 150,
-    backgroundColor: decorationColor,
-    top: -100,
-    right: -100,
-  },
-  circle2: {
-    position: "absolute",
-    width: 200,
-    height: 200,
-    borderRadius: 100,
-    backgroundColor: decorationColor.replace("0.05", "0.03"),
-    bottom: -50,
-    left: -50,
-  },
-  circle3: {
-    position: "absolute",
-    width: 150,
-    height: 150,
-    borderRadius: 75,
-    backgroundColor: decorationColor.replace("0.05", "0.04"),
-    top: "30%",
-    right: "10%",
-  },
-});
-

package/src/presentation/components/SplashErrorBoundary.tsx

@@ -1,58 +0,0 @@
-/**
- * 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

@@ -1,66 +0,0 @@
-/**
- * Splash Loading Component
- * Single Responsibility: Render splash screen loading indicator
- */
-
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import type { DesignTokens } from "@umituz/react-native-design-system-theme";
-
-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, textColor);
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.barContainer}>
-        <View style={styles.bar} />
-      </View>
-      <Text style={styles.text}>{loadingText}</Text>
-    </View>
-  );
-};
-
-const getStyles = (tokens: DesignTokens, bottomInset: number, textColor: string) => {
-  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: textColor,
-      borderRadius: 2,
-    },
-    text: {
-      fontSize: 13,
-      color: textColor,
-      opacity: 0.9,
-      fontWeight: "500" as const,
-      letterSpacing: 0.8,
-    },
-  });
-};
-

package/src/presentation/components/SplashLogo.tsx

@@ -1,70 +0,0 @@
-/**
- * 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;
-  iconColor?: string;
-}
-
-export const SplashLogo: React.FC<SplashLogoProps> = ({
-  logo,
-  logoSize = 140,
-  glowSize = 160,
-  iconColor = "#FFFFFF",
-}) => {
-  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" customColor={iconColor} />
-        ) : logo ? (
-          logo
-        ) : (
-          <AtomicIcon name="sparkles" size="xxl" customColor={iconColor} />
-        )}
-      </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)",
-    },
-    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)",
-    },
-  });
-};
-

package/src/presentation/components/SplashTypography.tsx

@@ -1,66 +0,0 @@
-/**
- * Splash Typography Component
- * Single Responsibility: Render splash screen typography
- */
-
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import type { DesignTokens } from "@umituz/react-native-design-system-theme";
-
-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, textColor);
-
-  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: DesignTokens, textColor: string) => {
-  return StyleSheet.create({
-    container: {
-      alignItems: "center",
-      marginTop: tokens.spacing.xl,
-    },
-    appName: {
-      fontSize: 48,
-      fontWeight: "800" as const,
-      color: textColor,
-      textAlign: "center" as const,
-      marginBottom: tokens.spacing.md,
-      letterSpacing: -1.2,
-      lineHeight: 56,
-    },
-    tagline: {
-      fontSize: 17,
-      color: textColor,
-      textAlign: "center" as const,
-      opacity: 0.95,
-      maxWidth: 320,
-      lineHeight: 24,
-      fontWeight: "500" as const,
-      letterSpacing: 0.2,
-    },
-  });
-};
-