@umituz/react-native-splash 1.12.0 → 2.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.12.0",
-  "description": "Generic splash screen for React Native apps with animations, gradients, and customizable branding. SOLID, DRY, KISS principles applied.",
+  "version": "2.1.0",
+  "description": "Ultra minimal splash screen for React Native apps. Just icon, name, and tagline.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
@@ -13,13 +13,7 @@
     "splash",
     "splash-screen",
     "loading",
-    "animation",
-    "gradient",
-    "ddd",
-    "domain-driven-design",
-    "solid",
-    "dry",
-    "kiss"
+    "minimal"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -37,7 +31,6 @@
     "@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",

package/src/domain/entities/SplashOptions.ts

@@ -1,36 +1,28 @@
 /**
- * Splash Options - Minimal Configuration
+ * Splash Options - Ultra Minimal Configuration
  */
 
-import { ReactNode } from "react";
+import type { ImageSourcePropType } from "react-native";
 
 export interface SplashOptions {
+  /** App icon/logo image source */
+  icon?: ImageSourcePropType;
+
   /** App name to display */
   appName?: string;
 
   /** Tagline or subtitle */
   tagline?: string;
 
-  /** Background color */
+  /** Background color (default: #6366F1) */
   backgroundColor?: string;
 
-  /** Custom gradient colors (overrides backgroundColor) */
-  gradientColors?: readonly string[];
+  /** Gradient colors - if provided, overrides backgroundColor */
+  gradientColors?: readonly [string, string, ...string[]];
 
-  /** Loading text */
-  loadingText?: string;
+  /** Text color (default: #FFFFFF) */
+  textColor?: string;
 
   /** Show loading indicator (default: true) */
   showLoading?: boolean;
-
-  /** Minimum display time in ms (default: 1500) */
-  minimumDisplayTime?: number;
-
-  /** Callback when splash is ready */
-  onReady?: () => void | Promise<void>;
-
-  /** Custom render functions */
-  renderLogo?: () => ReactNode;
-  renderContent?: () => ReactNode;
-  renderFooter?: () => ReactNode;
 }

package/src/index.ts

@@ -1,30 +1,31 @@
 /**
  * React Native Splash - Public API
  *
- * Generic splash screen for React Native apps with animations, gradients,
- * and customizable branding. Follows SOLID, DRY, KISS principles.
+ * Ultra minimal splash screen for React Native apps.
+ * Just displays icon, app name, and tagline.
+ * Parent component controls visibility and timing.
  *
  * Usage:
  *   import { SplashScreen } from '@umituz/react-native-splash';
  *
- *   <SplashScreen
- *     appName="My App"
- *     tagline="Your tagline here"
- *     logo="Sparkles"
- *     onReady={() => console.log('Ready')}
- *   />
+ *   // In your app:
+ *   const [showSplash, setShowSplash] = useState(true);
+ *
+ *   useEffect(() => {
+ *     // Your initialization logic
+ *     initializeApp().then(() => setShowSplash(false));
+ *   }, []);
+ *
+ *   if (showSplash) {
+ *     return (
+ *       <SplashScreen
+ *         icon={require('./assets/icon.png')}
+ *         appName="My App"
+ *         tagline="Your tagline here"
+ *       />
+ *     );
+ *   }
  */
 
-// =============================================================================
-// DOMAIN LAYER - Entities
-// =============================================================================
-
 export type { SplashOptions } from "./domain/entities/SplashOptions";
-
-// =============================================================================
-// PRESENTATION LAYER - Components
-// =============================================================================
-
 export { SplashScreen, type SplashScreenProps } from "./presentation/components/SplashScreen";
-export { useSplash } from "./presentation/hooks/useSplash";
-

package/src/presentation/components/SplashScreen.tsx

@@ -1,123 +1,124 @@
 /**
  * Splash Screen Component
  *
- * ULTRA MINIMAL - No external dependencies
- * Only basic React Native + expo-linear-gradient + safe-area
+ * Ultra minimal splash screen - just displays icon, name, and tagline.
+ * Parent component controls visibility and timing.
  */
 
-import React, { useEffect, useRef, useCallback } from "react";
-import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
+import React from "react";
+import { View, Text, Image, StyleSheet, ActivityIndicator } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
 export interface SplashScreenProps extends SplashOptions {
+  /** Control visibility from parent */
   visible?: boolean;
-  textColor?: string;
 }
 
 const DEFAULT_BG = "#6366F1";
 const DEFAULT_TEXT = "#FFFFFF";
 
 export const SplashScreen: React.FC<SplashScreenProps> = ({
+  icon,
   appName = "",
   tagline = "",
   backgroundColor = DEFAULT_BG,
   gradientColors,
-  loadingText = "",
+  textColor = DEFAULT_TEXT,
   showLoading = true,
-  minimumDisplayTime = 1500,
-  onReady,
-  renderLogo,
-  renderContent,
-  renderFooter,
   visible = true,
-  textColor = DEFAULT_TEXT,
 }) => {
   const insets = useSafeAreaInsets();
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const onReadyRef = useRef(onReady);
-  const hasCalledOnReady = useRef(false);
-
-  // Keep onReady ref updated but don't trigger re-render
-  useEffect(() => {
-    onReadyRef.current = onReady;
-  }, [onReady]);
-
-  // Stable callback that uses ref
-  const handleReady = useCallback(() => {
-    if (hasCalledOnReady.current) return;
-    hasCalledOnReady.current = true;
-    onReadyRef.current?.();
-  }, []);
-
-  useEffect(() => {
-    if (!visible) return;
-
-    // Reset when becoming visible again
-    hasCalledOnReady.current = false;
-
-    timerRef.current = setTimeout(handleReady, minimumDisplayTime);
-
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [visible, minimumDisplayTime, handleReady]);
 
   if (!visible) return null;
 
-  const hasGradient = gradientColors && gradientColors.length > 1;
-  const colors: [string, string, ...string[]] = hasGradient
-    ? (gradientColors as [string, string, ...string[]])
-    : [backgroundColor, backgroundColor];
-
   const content = (
-    <View style={[styles.inner, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+    <View style={[styles.content, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
       <View style={styles.center}>
-        {renderLogo ? renderLogo() : <View style={styles.logo} />}
-
-        {renderContent ? (
-          renderContent()
+        {icon ? (
+          <Image source={icon} style={styles.icon} resizeMode="contain" />
         ) : (
-          <>
-            {appName ? <Text style={[styles.title, { color: textColor }]}>{appName}</Text> : null}
-            {tagline ? <Text style={[styles.subtitle, { color: textColor }]}>{tagline}</Text> : null}
-          </>
+          <View style={styles.iconPlaceholder} />
         )}
+
+        {appName ? (
+          <Text style={[styles.title, { color: textColor }]}>{appName}</Text>
+        ) : null}
+
+        {tagline ? (
+          <Text style={[styles.subtitle, { color: textColor }]}>{tagline}</Text>
+        ) : null}
       </View>
 
-      {showLoading && (
+      {showLoading ? (
         <View style={styles.loading}>
-          <ActivityIndicator color={textColor} />
-          {loadingText ? <Text style={[styles.loadingText, { color: textColor }]}>{loadingText}</Text> : null}
+          <ActivityIndicator color={textColor} size="small" />
         </View>
-      )}
-
-      {renderFooter?.()}
+      ) : null}
     </View>
   );
 
+  // Use gradient if colors provided, otherwise solid background
+  if (gradientColors && gradientColors.length >= 2) {
+    return (
+      <LinearGradient
+        colors={gradientColors as [string, string, ...string[]]}
+        style={styles.container}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      >
+        {content}
+      </LinearGradient>
+    );
+  }
+
   return (
-    <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 style={[styles.container, { backgroundColor }]}>
+      {content}
     </View>
   );
 };
 
 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 },
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    justifyContent: "space-between",
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  icon: {
+    width: 120,
+    height: 120,
+    marginBottom: 24,
+  },
+  iconPlaceholder: {
+    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,
+  },
 });

package/src/presentation/hooks/useSplash.ts

@@ -1,70 +0,0 @@
-/**
- * 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 | null>(null);
-  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/presentation/utils/splashGradient.utils.ts

@@ -1,47 +0,0 @@
-/**
- * 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)
-  );
-};
-
-/**
- * Generate gradient colors from backgroundColor
- */
-export const generateGradientFromColor = (
-  backgroundColor: string,
-  isDark: boolean,
-): readonly string[] => {
-  return isDark
-    ? ([
-        backgroundColor,
-        adjustColorBrightness(backgroundColor, -20),
-        adjustColorBrightness(backgroundColor, -30),
-      ] as const)
-    : ([
-        backgroundColor,
-        adjustColorBrightness(backgroundColor, 10),
-        adjustColorBrightness(backgroundColor, 20),
-      ] as const);
-};
-

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

@@ -1,12 +0,0 @@
-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>;
-}