@umituz/react-native-splash 1.6.4 → 1.7.1

package/lib/__tests__/mocks/expoLinearGradient.js

@@ -0,0 +1,7 @@
+/**
+ * Expo Linear Gradient Mock
+ */
+
+module.exports = {
+  LinearGradient: ({ children, testID }) => ({ type: 'LinearGradient', props: { testID }, children }),
+};

package/lib/__tests__/mocks/reactNative.js

@@ -0,0 +1,16 @@
+/**
+ * React Native Mocks
+ */
+
+const React = require('react');
+
+module.exports = {
+  View: ({ children, testID, style }) => React.createElement('View', { testID, style }, children),
+  Text: ({ children, testID, style }) => React.createElement('Text', { testID, style }, children),
+  StyleSheet: { 
+    create: jest.fn((styles) => styles),
+    flatten: jest.fn((style) => style)
+  },
+  Dimensions: { get: jest.fn(() => ({ width: 375, height: 667 })) },
+  LinearGradient: ({ children, testID, style }) => React.createElement('LinearGradient', { testID, style }, children),
+};

package/lib/__tests__/setup.ts

@@ -0,0 +1,57 @@
+/**
+ * Simple Test Setup
+ */
+
+// Mock React Native before anything else
+jest.mock('react-native', () => {
+  const React = require('react');
+  return {
+    View: ({ children, testID, style }) => React.createElement('View', { testID, style }, children),
+    Text: ({ children, testID, style }) => React.createElement('Text', { testID, style }, children),
+    StyleSheet: { 
+      create: jest.fn((styles) => styles),
+      flatten: jest.fn((style) => style)
+    },
+    Dimensions: { get: jest.fn(() => ({ width: 375, height: 667 })) },
+    LinearGradient: ({ children, testID, style }) => React.createElement('LinearGradient', { testID, style }, children),
+  };
+});
+
+// Mock expo-linear-gradient
+jest.mock('expo-linear-gradient', () => {
+  const React = require('react');
+  return {
+    LinearGradient: ({ children, testID, style }) => React.createElement('LinearGradient', { testID, style }, children),
+  };
+});
+
+// Mock design system atoms
+jest.mock('@umituz/react-native-design-system-atoms', () => {
+  const React = require('react');
+  return {
+    AtomicIcon: ({ name, testID }) => React.createElement('AtomicIcon', { testID: testID || `icon-${name}`, name }),
+  };
+});
+
+// Mock design system theme
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: { primary: '#007AFF' },
+    spacing: { xl: 24, md: 16, xxxl: 48 },
+  }),
+}));
+
+// Mock localization
+jest.mock('@umituz/react-native-localization', () => ({
+  useLocalization: () => ({
+    t: (key: string, fallback: string) => fallback || key,
+  }),
+}));
+
+// Mock safe area context
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 44, bottom: 34, left: 0, right: 0 }),
+}));
+
+// Global test utilities
+global.__DEV__ = true;

package/lib/__tests__/utils/testUtils.tsx

@@ -0,0 +1,86 @@
+/**
+ * Test Utilities and Mocks
+ */
+
+import React from 'react';
+import { render, RenderOptions } from '@testing-library/react-native';
+import { View } from 'react-native';
+
+// Custom render function with providers
+const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  return <View>{children}</View>;
+};
+
+const customRender = (
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+// Mock timers utilities
+export const advanceTimersByTime = (ms: number) => {
+  jest.advanceTimersByTime(ms);
+};
+
+export const runAllTimers = () => {
+  jest.runAllTimers();
+};
+
+// Mock data generators
+export const createMockSplashProps = (overrides = {}) => ({
+  appName: 'Test App',
+  tagline: 'Test Tagline',
+  visible: true,
+  showLoading: true,
+  minimumDisplayTime: 1500,
+  ...overrides,
+});
+
+export const createMockDesignTokens = (overrides = {}) => ({
+  colors: { primary: '#007AFF' },
+  spacing: { xl: 24, md: 16, xxxl: 48 },
+  ...overrides,
+});
+
+// Performance testing utilities
+export const measureRenderTime = async (component: React.ReactElement) => {
+  const start = performance.now();
+  customRender(component);
+  const end = performance.now();
+  return end - start;
+};
+
+// Memory leak testing utilities
+export const trackMemoryUsage = () => {
+  const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
+  return {
+    getMemoryIncrease: () => {
+      const currentMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      return currentMemory - initialMemory;
+    },
+  };
+};
+
+// Accessibility testing utilities
+export const checkAccessibility = (container: any) => {
+  const accessibilityElements = container.findAllByProps({
+    accessible: true,
+  });
+  
+  return {
+    hasAccessibleElements: accessibilityElements.length > 0,
+    accessibleElementCount: accessibilityElements.length,
+    elements: accessibilityElements,
+  };
+};
+
+// Error boundary testing utilities
+export const createErrorComponent = (errorMessage: string) => {
+  const ThrowError = () => {
+    throw new Error(errorMessage);
+  };
+  return ThrowError;
+};
+
+// Re-export testing library
+export * from '@testing-library/react-native';
+export { customRender as render };

package/lib/domain/entities/SplashOptions.ts

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

package/lib/index.ts

@@ -0,0 +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.
+ *
+ * Usage:
+ *   import { SplashScreen } from '@umituz/react-native-splash';
+ *
+ *   <SplashScreen
+ *     appName="My App"
+ *     tagline="Your tagline here"
+ *     logo="Sparkles"
+ *     onReady={() => console.log('Ready')}
+ *   />
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
+
+export type { SplashOptions } from "./domain/entities/SplashOptions";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { SplashScreen, type SplashScreenProps } from "./presentation/components/SplashScreen";
+export { SplashErrorBoundary } from "./presentation/components/SplashErrorBoundary";
+export { useSplash } from "./presentation/hooks/useSplash";
+

package/lib/presentation/components/SplashDecorations.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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/lib/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/lib/presentation/components/SplashLoading.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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,
+      shadowColor: textColor,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.8,
+      shadowRadius: 4,
+      elevation: 4,
+    },
+    text: {
+      fontSize: 13,
+      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/lib/presentation/components/SplashLogo.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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)",
+      shadowColor: "#FFFFFF",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.5,
+      shadowRadius: 30,
+      elevation: 10,
+    },
+    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)",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 8,
+    },
+  });
+};
+