@umituz/react-native-design-system 2.5.42 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.42",
+  "version": "2.6.0",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -425,6 +425,10 @@ export {
   StepHeader,
   type StepHeaderProps,
   type StepHeaderConfig,
+  // Splash
+  SplashScreen,
+  type SplashScreenProps,
+  type SplashColors,
   // Animation
   Animated,
   useSharedValue,

package/src/molecules/index.ts

@@ -56,3 +56,6 @@ export * from './emoji';
 
 // Countdown
 export * from './countdown';
+
+// Splash
+export * from './splash';

package/src/molecules/splash/components/SplashScreen.tsx

@@ -0,0 +1,169 @@
+/**
+ * Splash Screen Component
+ * Pure prop-driven component, no context needed
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+import { View, Image, StyleSheet } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AtomicText } from "../../../atoms";
+import type { SplashScreenProps } from "../types";
+import { SPLASH_CONSTANTS } from "../constants";
+
+declare const __DEV__: boolean;
+
+export const SplashScreen: React.FC<SplashScreenProps> = ({
+  icon,
+  appName,
+  tagline,
+  colors,
+  gradientColors,
+  visible = true,
+  maxDuration,
+  onTimeout,
+  onReady,
+  style,
+}: SplashScreenProps) => {
+  const insets = useSafeAreaInsets();
+  const [timedOut, setTimedOut] = useState(false);
+
+  const handleTimeout = useCallback(() => {
+    if (__DEV__) {
+      console.log(`[SplashScreen] Timeout reached: ${maxDuration}ms`);
+    }
+    setTimedOut(true);
+    onTimeout?.();
+  }, [maxDuration, onTimeout]);
+
+  useEffect(() => {
+    if (__DEV__) {
+      console.log("[SplashScreen] Mounted", { appName, visible });
+    }
+    onReady?.();
+  }, [appName, visible, onReady]);
+
+  useEffect(() => {
+    if (!maxDuration || !visible) return;
+
+    const timer = setTimeout(handleTimeout, maxDuration);
+    return () => clearTimeout(timer);
+  }, [maxDuration, visible, handleTimeout]);
+
+  if (!visible) {
+    if (__DEV__) {
+      console.log("[SplashScreen] Not visible, returning null");
+    }
+    return null;
+  }
+
+  const iconPlaceholderColor = colors.iconPlaceholder ?? `${colors.text}30`;
+
+  const contentStyle = {
+    paddingTop: insets.top + SPLASH_CONSTANTS.CONTENT_PADDING,
+    paddingBottom: insets.bottom + SPLASH_CONSTANTS.CONTENT_PADDING,
+  };
+
+  const content = (
+    <View style={[styles.content, contentStyle]}>
+      <View style={styles.center}>
+        {icon ? (
+          <Image source={icon} style={styles.icon} resizeMode="contain" />
+        ) : (
+          <View
+            style={[
+              styles.iconPlaceholder,
+              { backgroundColor: iconPlaceholderColor },
+            ]}
+          />
+        )}
+
+        {appName ? (
+          <AtomicText
+            type="displaySmall"
+            style={[styles.title, { color: colors.text }]}
+          >
+            {appName}
+          </AtomicText>
+        ) : null}
+
+        {tagline ? (
+          <AtomicText
+            type="bodyLarge"
+            style={[styles.tagline, { color: colors.text }]}
+          >
+            {tagline}
+          </AtomicText>
+        ) : null}
+
+        {timedOut && __DEV__ ? (
+          <AtomicText
+            type="labelSmall"
+            style={[styles.timeoutText, { color: colors.text }]}
+          >
+            Initialization timeout
+          </AtomicText>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  if (gradientColors && gradientColors.length >= 2) {
+    return (
+      <LinearGradient
+        colors={gradientColors as [string, string, ...string[]]}
+        style={[styles.container, style]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      >
+        {content}
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }, style]}>
+      {content}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    justifyContent: "space-between",
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: SPLASH_CONSTANTS.CONTENT_PADDING,
+  },
+  icon: {
+    width: SPLASH_CONSTANTS.ICON_SIZE,
+    height: SPLASH_CONSTANTS.ICON_SIZE,
+    marginBottom: SPLASH_CONSTANTS.CONTENT_PADDING,
+  },
+  iconPlaceholder: {
+    width: SPLASH_CONSTANTS.ICON_PLACEHOLDER_SIZE,
+    height: SPLASH_CONSTANTS.ICON_PLACEHOLDER_SIZE,
+    borderRadius: SPLASH_CONSTANTS.ICON_PLACEHOLDER_SIZE / 2,
+    marginBottom: SPLASH_CONSTANTS.CONTENT_PADDING,
+  },
+  title: {
+    textAlign: "center",
+    fontWeight: "800",
+    marginBottom: 8,
+  },
+  tagline: {
+    textAlign: "center",
+    opacity: 0.9,
+  },
+  timeoutText: {
+    textAlign: "center",
+    marginTop: 16,
+  },
+});

package/src/molecules/splash/components/index.ts

@@ -0,0 +1 @@
+export { SplashScreen } from './SplashScreen';

package/src/molecules/splash/constants/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Splash Screen Constants
+ */
+
+export const SPLASH_CONSTANTS = {
+  ICON_SIZE: 120,
+  ICON_PLACEHOLDER_SIZE: 100,
+  CONTENT_PADDING: 24,
+} as const;

package/src/molecules/splash/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Splash Module
+ * Provides splash screen component for app initialization
+ */
+
+export { SplashScreen } from './components';
+export type {
+  SplashScreenProps,
+  SplashColors,
+} from './types';

package/src/molecules/splash/types/index.ts

@@ -0,0 +1,90 @@
+/**
+ * Splash Screen Types
+ * All type definitions for the splash screen package
+ */
+
+import type { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import type { ReactNode } from "react";
+
+/**
+ * Splash screen color configuration
+ * All colors should be provided by the main app via design tokens
+ */
+export interface SplashColors {
+  /** Background color when not using gradient */
+  background: string;
+  /** Text color for app name and tagline */
+  text: string;
+  /** Background color for icon placeholder circle */
+  iconPlaceholder?: string;
+}
+
+/**
+ * Custom colors for SplashThemeProvider
+ */
+export interface SplashCustomColors {
+  /** Text color for app name and tagline */
+  textColor: string;
+  /** Background color when not using gradient */
+  backgroundColor?: string;
+  /** Background color for icon placeholder circle */
+  iconPlaceholderColor?: string;
+}
+
+/**
+ * SplashThemeProvider props
+ */
+export interface SplashThemeProviderProps {
+  /** Children components */
+  children: ReactNode;
+  /** Gradient colors for background */
+  gradientColors?: readonly [string, string, ...string[]];
+  /** Custom color configuration */
+  customColors?: SplashCustomColors;
+}
+
+/**
+ * Splash theme context value
+ */
+export interface SplashThemeContextValue {
+  /** Resolved colors for splash screen */
+  colors: SplashColors;
+  /** Gradient colors if provided */
+  gradientColors?: readonly [string, string, ...string[]];
+}
+
+/**
+ * Splash screen component props
+ * Can be used standalone with colors prop or with SplashThemeProvider
+ */
+export interface SplashScreenProps {
+  /** App name to display */
+  appName?: string;
+
+  /** Tagline or subtitle */
+  tagline?: string;
+
+  /** App icon/logo image source */
+  icon?: ImageSourcePropType;
+
+  /** Color configuration (required - must be provided by app) */
+  colors: SplashColors;
+
+  /** Optional gradient colors (overrides background color) */
+  gradientColors?: readonly [string, string, ...string[]];
+
+  /** Control visibility */
+  visible?: boolean;
+
+  /** Maximum duration before timeout callback */
+  maxDuration?: number;
+
+  /** Callback when max duration is reached */
+  onTimeout?: () => void;
+
+  /** Callback when splash is ready/mounted */
+  onReady?: () => void;
+
+  /** Additional container style */
+  style?: StyleProp<ViewStyle>;
+}

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -3,6 +3,8 @@ import { ActivityIndicator, View, StyleSheet } from 'react-native';
 import { useThemeStore } from '../stores/themeStore';
 import { useDesignSystemTheme } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
+import { SplashScreen } from '../../../molecules/splash';
+import type { SplashScreenProps } from '../../../molecules/splash/types';
 
 declare const __DEV__: boolean;
 
@@ -11,9 +13,11 @@ interface DesignSystemProviderProps {
   children: ReactNode;
   /** Custom theme colors to override defaults */
   customColors?: CustomThemeColors;
-  /** Show loading indicator while initializing (default: false) */
+  /** Show loading indicator while initializing (default: true) */
   showLoadingIndicator?: boolean;
-  /** Custom loading component */
+  /** Splash screen configuration (used when showLoadingIndicator is true) */
+  splashConfig?: Pick<SplashScreenProps, 'appName' | 'tagline' | 'icon' | 'colors' | 'gradientColors'>;
+  /** Custom loading component (overrides splash screen) */
   loadingComponent?: ReactNode;
   /** Callback when initialization completes */
   onInitialized?: () => void;
@@ -52,7 +56,8 @@ interface DesignSystemProviderProps {
 export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   children,
   customColors,
-  showLoadingIndicator = false,
+  showLoadingIndicator = true,
+  splashConfig,
   loadingComponent,
   onInitialized,
   onError,
@@ -90,6 +95,11 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
       return <>{loadingComponent}</>;
     }
     
+    // Use SplashScreen if config provided, otherwise fallback to ActivityIndicator
+    if (splashConfig?.colors) {
+      return <SplashScreen {...splashConfig} />;
+    }
+
     return (
       <View style={styles.loadingContainer}>
         <ActivityIndicator size="large" />