@umituz/react-native-splash 1.6.4 → 1.7.1

package/src/__tests__/visual/VisualRegression.test.tsx

@@ -0,0 +1,338 @@
+/**
+ * Visual Regression Tests - UI Consistency
+ */
+
+import React from 'react';
+import { render } from '../utils/testUtils';
+import { SplashScreen } from '../../presentation/components/SplashScreen';
+
+describe('Visual Regression Tests', () => {
+  const baseProps = {
+    appName: 'Visual Test App',
+    tagline: 'Testing visual consistency',
+    visible: true,
+  };
+
+  describe('Basic Layout Consistency', () => {
+    it('maintains consistent layout structure', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const splashContainer = getByTestId('splash-screen');
+      expect(splashContainer).toBeTruthy();
+      
+      // Check for consistent structure
+      expect(splashContainer.children).toBeDefined();
+    });
+
+    it('renders logo consistently', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const logoElement = getByTestId('splash-logo');
+      expect(logoElement).toBeTruthy();
+    });
+
+    it('renders typography consistently', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const typographyElement = getByTestId('splash-typography');
+      expect(typographyElement).toBeTruthy();
+    });
+
+    it('renders loading indicator consistently', () => {
+      const props = { ...baseProps, showLoading: true };
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      const loadingElement = getByTestId('splash-loading');
+      expect(loadingElement).toBeTruthy();
+    });
+  });
+
+  describe('Color Consistency', () => {
+    it('applies text color consistently', () => {
+      const props = {
+        ...baseProps,
+        textColor: '#FF0000',
+      };
+      
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      const appNameElement = getByText('Visual Test App');
+      expect(appNameElement.props.style).toContainEqual({
+        color: '#FF0000',
+      });
+    });
+
+    it('applies icon color consistently', () => {
+      const props = {
+        ...baseProps,
+        iconColor: '#00FF00',
+      };
+      
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      const iconElement = getByTestId('splash-icon');
+      expect(iconElement.props.customColor).toBe('#00FF00');
+    });
+
+    it('applies decoration color consistently', () => {
+      const props = {
+        ...baseProps,
+        decorationColor: 'rgba(255, 0, 0, 0.1)',
+      };
+      
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      const decorationElement = getByTestId('splash-decorations');
+      expect(decorationElement).toBeTruthy();
+    });
+
+    it('handles gradient colors consistently', () => {
+      const props = {
+        ...baseProps,
+        gradientColors: ['#FF0000', '#00FF00', '#0000FF'],
+      };
+      
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      const gradientElement = getByTestId('linear-gradient');
+      expect(gradientElement.props.colors).toEqual([
+        '#FF0000',
+        '#00FF00',
+        '#0000FF',
+      ]);
+    });
+  });
+
+  describe('Typography Consistency', () => {
+    it('maintains consistent font sizes', () => {
+      const { getByText } = render(<SplashScreen {...baseProps} />);
+      
+      const appNameElement = getByText('Visual Test App');
+      expect(appNameElement.props.style).toContainEqual({
+        fontSize: 48,
+      });
+    });
+
+    it('maintains consistent font weights', () => {
+      const { getByText } = render(<SplashScreen {...baseProps} />);
+      
+      const appNameElement = getByText('Visual Test App');
+      expect(appNameElement.props.style).toContainEqual({
+        fontWeight: '800',
+      });
+    });
+
+    it('maintains consistent text alignment', () => {
+      const { getByText } = render(<SplashScreen {...baseProps} />);
+      
+      const appNameElement = getByText('Visual Test App');
+      expect(appNameElement.props.style).toContainEqual({
+        textAlign: 'center',
+      });
+    });
+
+    it('handles long text consistently', () => {
+      const longAppName = 'Very Long Application Name That Might Wrap';
+      const props = {
+        ...baseProps,
+        appName: longAppName,
+      };
+      
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      const appNameElement = getByText(longAppName);
+      expect(appNameElement.props.numberOfLines).toBe(1);
+    });
+  });
+
+  describe('Spacing Consistency', () => {
+    it('maintains consistent padding', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const contentElement = getByTestId('splash-content');
+      expect(contentElement.props.style).toContainEqual({
+        paddingHorizontal: 24, // xl spacing
+      });
+    });
+
+    it('maintains consistent margins', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const typographyElement = getByTestId('splash-typography');
+      expect(typographyElement.props.style).toContainEqual({
+        marginTop: 24, // xl spacing
+      });
+    });
+  });
+
+  describe('Responsive Consistency', () => {
+    it('maintains consistency across different safe areas', () => {
+      // Mock different safe area insets
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const splashContainer = getByTestId('splash-screen');
+      expect(splashContainer).toBeTruthy();
+    });
+
+    it('handles different screen sizes consistently', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const splashContainer = getByTestId('splash-screen');
+      expect(splashContainer.props.style).toContainEqual({
+        flex: 1,
+      });
+    });
+  });
+
+  describe('State Consistency', () => {
+    it('maintains visual consistency when hidden', () => {
+      const props = { ...baseProps, visible: false };
+      const { queryByText } = render(<SplashScreen {...props} />);
+      
+      expect(queryByText('Visual Test App')).toBeFalsy();
+    });
+
+    it('maintains visual consistency when shown', () => {
+      const props = { ...baseProps, visible: true };
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      expect(getByText('Visual Test App')).toBeTruthy();
+    });
+
+    it('maintains consistency during loading state', () => {
+      const props = {
+        ...baseProps,
+        showLoading: true,
+        loadingText: 'Custom loading text',
+      };
+      
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      expect(getByText('Custom loading text')).toBeTruthy();
+    });
+  });
+
+  describe('Custom Render Consistency', () => {
+    it('maintains consistency with custom logo', () => {
+      const CustomLogo = () => <div testID="custom-logo">Custom Logo</div>;
+      const props = {
+        ...baseProps,
+        renderLogo: () => <CustomLogo />,
+      };
+      
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      expect(getByTestId('custom-logo')).toBeTruthy();
+    });
+
+    it('maintains consistency with custom content', () => {
+      const CustomContent = () => <div testID="custom-content">Custom Content</div>;
+      const props = {
+        ...baseProps,
+        renderContent: () => <CustomContent />,
+      };
+      
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      expect(getByTestId('custom-content')).toBeTruthy();
+    });
+
+    it('maintains consistency with custom footer', () => {
+      const CustomFooter = () => <div testID="custom-footer">Custom Footer</div>;
+      const props = {
+        ...baseProps,
+        renderFooter: () => <CustomFooter />,
+      };
+      
+      const { getByTestId } = render(<SplashScreen {...props} />);
+      
+      expect(getByTestId('custom-footer')).toBeTruthy();
+    });
+  });
+
+  describe('Animation Consistency', () => {
+    it('maintains consistent animation states', () => {
+      const { getByTestId } = render(<SplashScreen {...baseProps} />);
+      
+      const splashContainer = getByTestId('splash-screen');
+      expect(splashContainer).toBeTruthy();
+    });
+  });
+
+  describe('Theme Consistency', () => {
+    it('maintains consistency with light theme', () => {
+      const props = {
+        ...baseProps,
+        textColor: '#000000',
+        backgroundColor: '#FFFFFF',
+      };
+      
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      const appNameElement = getByText('Visual Test App');
+      expect(appNameElement.props.style).toContainEqual({
+        color: '#000000',
+      });
+    });
+
+    it('maintains consistency with dark theme', () => {
+      const props = {
+        ...baseProps,
+        textColor: '#FFFFFF',
+        backgroundColor: '#000000',
+      };
+      
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      const appNameElement = getByText('Visual Test App');
+      expect(appNameElement.props.style).toContainEqual({
+        color: '#FFFFFF',
+      });
+    });
+  });
+
+  describe('Error State Consistency', () => {
+    it('maintains consistent error display', () => {
+      const ErrorComponent = () => {
+        throw new Error('Test error');
+      };
+      
+      const props = {
+        ...baseProps,
+        renderLogo: () => <ErrorComponent />,
+      };
+      
+      const { getByText } = render(<SplashScreen {...props} />);
+      
+      expect(getByText('Something went wrong')).toBeTruthy();
+    });
+  });
+
+  describe('Performance Consistency', () => {
+    it('maintains consistent render performance', async () => {
+      const { measureRenderTime } = require('../utils/testUtils');
+      
+      const renderTime = await measureRenderTime(<SplashScreen {...baseProps} />);
+      
+      // Should maintain consistent performance
+      expect(renderTime).toBeLessThan(100); // 100ms
+    });
+
+    it('maintains consistency with complex props', async () => {
+      const { measureRenderTime } = require('../utils/testUtils');
+      
+      const complexProps = {
+        ...baseProps,
+        gradientColors: ['#FF0000', '#00FF00', '#0000FF'],
+        textColor: '#FFFFFF',
+        iconColor: '#FFFF00',
+        decorationColor: 'rgba(255, 255, 255, 0.1)',
+      };
+      
+      const renderTime = await measureRenderTime(<SplashScreen {...complexProps} />);
+      
+      // Should maintain performance even with complex props
+      expect(renderTime).toBeLessThan(150); // 150ms
+    });
+  });
+});

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,63 @@
+/**
+ * Splash Error Boundary
+ * Single Responsibility: Handle splash screen errors gracefully
+ */
+
+import React, { Component, ReactNode } from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+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;
+      }
+
+      return (
+        <View style={styles.container}>
+          <Text style={styles.text}>Something went wrong</Text>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#000000",
+  },
+  text: {
+    color: "#FFFFFF",
+    fontSize: 16,
+  },
+});

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,9 +51,9 @@ const getStyles = (tokens: DesignTokens, bottomInset: number) => {
     bar: {
       width: "60%",
       height: "100%",
-      backgroundColor: "#FFFFFF",
+      backgroundColor: textColor,
       borderRadius: 2,
-      shadowColor: "#FFFFFF",
+      shadowColor: textColor,
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0.8,
       shadowRadius: 4,
@@ -59,7 +61,7 @@ const getStyles = (tokens: DesignTokens, bottomInset: number) => {
     },
     text: {
       fontSize: 13,
-      color: "#FFFFFF",
+      color: textColor,
       opacity: 0.9,
       fontWeight: "500" as const,
       letterSpacing: 0.8,

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>

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>
   );
 };