@umituz/react-native-splash 1.0.5 → 1.4.0

package/README.md

@@ -1,17 +1,13 @@
 # @umituz/react-native-splash
 
-Generic splash screen for React Native apps with animations, gradients, and customizable branding. Follows SOLID, DRY, KISS principles - fully reusable across hundreds of apps.
+Simple splash screen for React Native apps with logo, app name, and loading indicator. Minimal dependencies, no over-engineering.
 
 ## Features
 
-- ✅ **Generic & Reusable**: Works with any app, fully customizable via props
-- ✅ **Animations**: Smooth fade, scale, and slide animations
-- ✅ **Gradient Backgrounds**: Support for gradient or solid colors
-- ✅ **Customizable Branding**: Logo, app name, tagline, footer
-- ✅ **Loading Indicators**: Progress bar and loading text
-- ✅ **SOLID Principles**: Clean architecture, easy to extend
-- ✅ **DRY**: No code duplication, generic components
-- ✅ **KISS**: Simple API, easy to understand and use
+- ✅ **Simple & Lightweight**: No animations, no gradients, just the essentials
+- ✅ **Minimal Dependencies**: Only requires AtomicIcon and localization
+- ✅ **Customizable**: Logo, app name, tagline, background color
+- ✅ **Loading Indicator**: Built-in ActivityIndicator
 - ✅ **Type-Safe**: Full TypeScript support
 
 ## Installation
@@ -37,7 +33,7 @@ import { SplashScreen } from '@umituz/react-native-splash';
 />
 ```
 
-### Advanced Example
+### With Custom Background
 
 ```typescript
 <SplashScreen
@@ -45,13 +41,8 @@ import { SplashScreen } from '@umituz/react-native-splash';
   tagline="Your tagline here"
   logo="Sparkles"
   backgroundColor="#3B82F6"
-  gradientColors={['#3B82F6', '#8B5CF6']}
   loadingText="Loading..."
   showLoading={true}
-  showProgressBar={true}
-  footerText="Powered by"
-  versionText="v1.0.0"
-  animationDuration={2000}
   minimumDisplayTime={1500}
   onReady={handleReady}
 />
@@ -79,13 +70,8 @@ interface SplashOptions {
   tagline?: string;
   logo?: ReactNode | string;
   backgroundColor?: string;
-  gradientColors?: string[];
   loadingText?: string;
   showLoading?: boolean;
-  showProgressBar?: boolean;
-  footerText?: string;
-  versionText?: string;
-  animationDuration?: number;
   minimumDisplayTime?: number;
   onReady?: () => void | Promise<void>;
   renderLogo?: () => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "1.0.5",
+  "version": "1.4.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",
@@ -31,9 +31,11 @@
     "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-localization": "latest",
-    "@umituz/react-native-design-system": "latest",
+    "expo-linear-gradient": "~14.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": "^5.0.0"
@@ -41,10 +43,11 @@
   "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",
-    "@umituz/react-native-design-system": "latest",
-    "react": "^18.2.0",
+    "react": ">=18.2.0",
     "react-native": "^0.74.0",
     "react-native-safe-area-context": "^5.6.0",
     "typescript": "^5.3.3"

package/src/domain/entities/SplashOptions.ts

@@ -27,10 +27,9 @@ export interface SplashOptions {
   logo?: ReactNode | string;
 
   /**
-   * Background color or gradient colors
+   * Background color
    */
   backgroundColor?: string;
-  gradientColors?: string[];
 
   /**
    * Loading text
@@ -42,26 +41,6 @@ export interface SplashOptions {
    */
   showLoading?: boolean;
 
-  /**
-   * Show progress bar (default: true)
-   */
-  showProgressBar?: boolean;
-
-  /**
-   * Footer text (e.g., "Powered by...")
-   */
-  footerText?: string;
-
-  /**
-   * Version text
-   */
-  versionText?: string;
-
-  /**
-   * Animation duration in milliseconds (default: 2000)
-   */
-  animationDuration?: number;
-
   /**
    * Minimum display time in milliseconds (default: 1500)
    */

package/src/presentation/components/SplashScreen.tsx

@@ -1,15 +1,19 @@
 /**
  * Splash Screen Component
  *
- * Generic splash screen with animations, gradients, and customizable branding
+ * Simple splash screen with logo, app name, and loading indicator
  */
 
-import React, { useEffect, useRef, useMemo } from "react";
-import { View, StyleSheet, Animated } from "react-native";
+import React, { useEffect } from "react";
+import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useResponsive, AtomicIcon, AtomicText, STATIC_TOKENS, withAlpha } from "@umituz/react-native-design-system";
+import {
+  useDesignSystemTheme,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system-theme";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
 export interface SplashScreenProps extends SplashOptions {
@@ -27,13 +31,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   tagline,
   logo,
   backgroundColor,
-  gradientColors,
   loadingText,
   showLoading = true,
-  showProgressBar = true,
-  footerText,
-  versionText,
-  animationDuration = 2000,
   minimumDisplayTime = 1500,
   onReady,
   renderLogo,
@@ -41,309 +40,211 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   renderFooter,
   visible = true,
 }) => {
-  const tokens = useAppDesignTokens();
-  const responsive = useResponsive();
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
+  const { themeMode } = useDesignSystemTheme();
+  const tokens = useAppDesignTokens();
   
-  // Safety check: Don't render if tokens or responsive are not ready
-  if (!tokens || !responsive || !tokens.spacing || !responsive.horizontalPadding) {
-    return null;
-  }
+  const isDark = themeMode === "dark";
+  const colors = tokens.colors;
+  const spacing = tokens.spacing;
   
-  const styles = useMemo(
-    () => getStyles(tokens, responsive, insets, backgroundColor, gradientColors),
-    [tokens, responsive, insets, backgroundColor, gradientColors],
-  );
-
-  // Animation values
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const scaleAnim = useRef(new Animated.Value(0.8)).current;
-  const slideAnim = useRef(new Animated.Value(50)).current;
+  // Use provided backgroundColor or theme-based color
+  const finalBackgroundColor = backgroundColor || colors.primary;
+  
+  // Generate gradient colors based on theme
+  const gradientColors = 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);
 
   /**
-   * Initialize animations
+   * Call onReady after minimum display time
    */
   useEffect(() => {
     if (!visible) return;
 
-    // Start entrance animations
-    Animated.parallel([
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 1000,
-        useNativeDriver: true,
-      }),
-      Animated.spring(scaleAnim, {
-        toValue: 1,
-        tension: 100,
-        friction: 8,
-        useNativeDriver: true,
-      }),
-      Animated.timing(slideAnim, {
-        toValue: 0,
-        duration: 800,
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    // Call onReady after minimum display time
     const timer = setTimeout(() => {
       if (onReady) {
         onReady();
       }
-    }, Math.max(minimumDisplayTime, animationDuration));
+    }, minimumDisplayTime);
 
     return () => clearTimeout(timer);
-  }, [visible, fadeAnim, scaleAnim, slideAnim, minimumDisplayTime, animationDuration, onReady]);
+  }, [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 displayFooterText = footerText || t("branding.poweredBy", "Powered by");
-  const displayVersionText = versionText;
 
   return (
     <View style={styles.container}>
-      {/* Background Gradient Effect */}
-      {gradientColors && gradientColors.length > 0 ? (
-        <View style={[styles.backgroundGradient, { backgroundColor: gradientColors[0] }]} />
-      ) : (
-        <View style={[styles.backgroundGradient, { backgroundColor: backgroundColor || tokens.colors.primary }]} />
-      )}
-
-      {/* Main Content */}
-      <Animated.View
-        style={[
-          styles.content,
-          {
-            opacity: fadeAnim,
-            transform: [{ scale: scaleAnim }],
-          },
-        ]}
+      <LinearGradient
+        colors={gradientColors}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.gradient}
       >
-        {renderLogo ? (
-          renderLogo()
-        ) : (
-          <View style={styles.logoContainer}>
-            <Animated.View
-              style={[
-                styles.logoBackground,
-                {
-                  transform: [{ scale: scaleAnim }],
-                },
-              ]}
-            >
-              {typeof logo === "string" ? (
-                <AtomicIcon name={logo || "Sparkles"} size="xl" color="primary" />
-              ) : logo ? (
-                logo
-              ) : (
-                <AtomicIcon name="Sparkles" size="xl" color="primary" />
-              )}
-            </Animated.View>
-          </View>
-        )}
-
-        {renderContent ? (
-          renderContent()
-        ) : (
-          <Animated.View
-            style={[
-              styles.textContainer,
-              {
-                opacity: fadeAnim,
-                transform: [{ translateY: slideAnim }],
-              },
-            ]}
-          >
-            <AtomicText style={styles.appName}>{displayAppName}</AtomicText>
-            <AtomicText style={styles.tagline}>{displayTagline}</AtomicText>
-          </Animated.View>
-        )}
-      </Animated.View>
-
-      {/* Loading Indicator */}
-      {showLoading && (
-        <Animated.View
-          style={[
-            styles.loadingContainer,
-            {
-              opacity: fadeAnim,
-            },
-          ]}
-        >
-          {showProgressBar && (
-            <View style={styles.loadingBar}>
-              <Animated.View
-                style={[
-                  styles.loadingProgress,
-                  {
-                    transform: [{ scaleX: scaleAnim }],
-                  },
-                ]}
-              />
+        {/* Main Content */}
+        <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" : "white"}
+                  />
+                ) : logo ? (
+                  logo
+                ) : (
+                  <AtomicIcon
+                    name="Sparkles"
+                    size="xl"
+                    color={isDark ? "primary" : "white"}
+                  />
+                )}
+              </View>
             </View>
           )}
-          <AtomicText style={styles.loadingText}>{displayLoadingText}</AtomicText>
-        </Animated.View>
-      )}
 
-      {/* Footer */}
-      {renderFooter ? (
-        renderFooter()
-      ) : (
-        <Animated.View
-          style={[
-            styles.footer,
-            {
-              opacity: fadeAnim,
-            },
-          ]}
-        >
-          {displayFooterText && (
-            <AtomicText style={styles.footerText}>{displayFooterText}</AtomicText>
-          )}
-          {displayVersionText && (
-            <AtomicText style={styles.versionText}>{displayVersionText}</AtomicText>
+          {renderContent ? (
+            renderContent()
+          ) : (
+            <View style={styles.textContainer}>
+              <Text style={styles.appName}>{displayAppName}</Text>
+              {displayTagline && (
+                <Text style={styles.tagline}>{displayTagline}</Text>
+              )}
+            </View>
           )}
-        </Animated.View>
-      )}
+        </View>
+
+        {/* Loading Indicator */}
+        {showLoading && (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator
+              size="large"
+              color={isDark ? colors.primary : "#FFFFFF"}
+            />
+            <Text style={styles.loadingText}>{displayLoadingText}</Text>
+          </View>
+        )}
+
+        {/* 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 = (
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  responsive: ReturnType<typeof useResponsive>,
   insets: { top: number; bottom: number },
-  backgroundColor?: string,
-  gradientColors?: string[],
+  backgroundColor: string,
+  colors: any,
+  spacing: any,
+  isDark: boolean,
 ) => {
-  // Safety check: Return empty styles if tokens or responsive are not ready
-  if (!tokens || !responsive || !tokens.spacing || !tokens.colors || !responsive.horizontalPadding) {
-    return StyleSheet.create({
-      container: { flex: 1 },
-      backgroundGradient: {},
-      content: {},
-      logoContainer: {},
-      logoBackground: {},
-      textContainer: {},
-      appName: {},
-      tagline: {},
-      loadingContainer: {},
-      loadingBar: {},
-      loadingProgress: {},
-      loadingText: {},
-      footer: {},
-      footerText: {},
-      versionText: {},
-    });
-  }
-  
+  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 || tokens.colors.primary,
-      paddingHorizontal: responsive.horizontalPadding,
+      backgroundColor: backgroundColor,
+    },
+    gradient: {
+      flex: 1,
       paddingTop: insets.top,
       paddingBottom: insets.bottom,
     },
-    backgroundGradient: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      opacity: 0.9,
-    },
     content: {
-      flex: 3,
+      flex: 1,
       alignItems: "center",
       justifyContent: "center",
-      paddingHorizontal: tokens.spacing.lg,
+      paddingHorizontal: spacing.lg,
     },
     logoContainer: {
-      marginBottom: tokens.spacing.xxl * 2,
+      marginBottom: spacing.xl,
       alignItems: "center",
       justifyContent: "center",
     },
     logoBackground: {
-      width: responsive.logoSize,
-      height: responsive.logoSize,
-      borderRadius: STATIC_TOKENS.borders.radius.full,
-      backgroundColor: tokens.colors.surface,
+      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: STATIC_TOKENS.spacing.md,
+      padding: spacing.md,
+      borderWidth: isDark ? 2 : 0,
+      borderColor: isDark ? `${colors.primary}40` : "transparent",
     },
     textContainer: {
       alignItems: "center",
-      marginBottom: tokens.spacing.xxl * 2,
+      marginBottom: spacing.xxxl,
     },
     appName: {
-      ...STATIC_TOKENS.typography.headingLarge,
-      color: tokens.colors.textInverse,
+      fontSize: 32,
+      fontWeight: "700",
+      color: textColor,
       textAlign: "center",
-      marginBottom: tokens.spacing.md,
-      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.headingLarge.fontSize ?? 32),
-      fontWeight: STATIC_TOKENS.typography.bold,
+      marginBottom: spacing.sm,
+      letterSpacing: -0.5,
     },
     tagline: {
-      ...STATIC_TOKENS.typography.bodyLarge,
-      color: tokens.colors.textInverse,
+      fontSize: 16,
+      color: textColor,
       textAlign: "center",
-      opacity: 0.9,
-      maxWidth: responsive.maxContentWidth,
-      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.bodyLarge.fontSize ?? 18),
+      opacity: textOpacity * 0.85,
+      maxWidth: 300,
+      lineHeight: 22,
+      fontWeight: "400",
     },
     loadingContainer: {
-      flex: 1,
       alignItems: "center",
       justifyContent: "center",
-      width: responsive.maxContentWidth,
-      alignSelf: "center",
-    },
-    loadingBar: {
-      width: "100%",
-      height: 4,
-      backgroundColor: withAlpha(tokens.colors.textInverse, 0.3),
-      borderRadius: STATIC_TOKENS.borders.radius.xs,
-      marginBottom: tokens.spacing.md,
-      overflow: "hidden",
-    },
-    loadingProgress: {
-      width: "100%",
-      height: "100%",
-      backgroundColor: tokens.colors.textInverse,
-      borderRadius: STATIC_TOKENS.borders.radius.xs,
+      paddingBottom: spacing.xxxl,
     },
     loadingText: {
-      ...STATIC_TOKENS.typography.bodyMedium,
-      color: tokens.colors.textInverse,
-      opacity: 0.8,
-      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.bodyMedium.fontSize ?? 16),
-    },
-    footer: {
-      flex: 0.5,
-      alignItems: "center",
-      justifyContent: "flex-start",
-      paddingBottom: tokens.spacing.md,
-    },
-    footerText: {
-      ...STATIC_TOKENS.typography.caption,
-      color: tokens.colors.textInverse,
-      opacity: 0.7,
-      marginBottom: tokens.spacing.xs,
-      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.caption.fontSize ?? 12),
-    },
-    versionText: {
-      ...STATIC_TOKENS.typography.caption,
-      color: tokens.colors.textInverse,
-      opacity: 0.5,
-      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.caption.fontSize ?? 12),
+      fontSize: 14,
+      color: textColor,
+      opacity: textOpacity * 0.7,
+      marginTop: spacing.md,
+      fontWeight: "500",
     },
   });
 };