@umituz/react-native-design-system 2.6.3 → 2.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.3",
+  "version": "2.6.6",
   "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/atoms/status-bar/AtomicStatusBar.tsx

@@ -5,8 +5,8 @@
 
 import React from 'react';
 import { StatusBar, StatusBarProps } from 'react-native';
-import { useTheme } from '../../theme/hooks/useTheme';
-import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
+import { useTheme } from '../../theme';
+import { useAppDesignTokens } from '../../theme';
 
 export interface AtomicStatusBarProps extends Omit<StatusBarProps, 'barStyle' | 'backgroundColor'> {
   barStyle?: 'auto' | 'light-content' | 'dark-content';

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

@@ -18,7 +18,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   icon,
   appName,
   tagline,
-  colors,
+  colors: customColors,
   gradientColors,
   visible = true,
   maxDuration,
@@ -27,8 +27,28 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   style,
 }: SplashScreenProps) => {
   const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
   const [timedOut, setTimedOut] = useState(false);
 
+  // Derive colors from tokens if not provided (theme-aware defaults)
+  const colors: SplashColors = customColors ?? {
+    background: tokens.colors.backgroundPrimary,
+    text: tokens.colors.textPrimary,
+    iconPlaceholder: `${tokens.colors.textPrimary}30`, // 30% opacity
+  };
+
+  if (__DEV__) {
+    console.log('[SplashScreen] Component render:', {
+      visible,
+      appName,
+      tagline,
+      hasIcon: !!icon,
+      hasCustomColors: !!customColors,
+      resolvedColors: colors,
+      hasGradient: !!gradientColors,
+    });
+  }
+
   const handleTimeout = useCallback(() => {
     if (__DEV__) {
       console.log(`[SplashScreen] Timeout reached: ${maxDuration}ms`);
@@ -53,11 +73,15 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 
   if (!visible) {
     if (__DEV__) {
-      console.log("[SplashScreen] Not visible, returning null");
+      console.log("[SplashScreen] Not visible (visible=false), returning null");
     }
     return null;
   }
 
+  if (__DEV__) {
+    console.log("[SplashScreen] Rendering splash screen UI");
+  }
+
   const iconPlaceholderColor = colors.iconPlaceholder ?? `${colors.text}30`;
 
   const contentStyle = {
@@ -97,6 +121,15 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
           </AtomicText>
         ) : null}
 
+        {/* Always show loading indicator during initialization */}
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator
+            size="large"
+            color={colors.text}
+            style={styles.loadingIndicator}
+          />
+        </View>
+
         {timedOut && __DEV__ ? (
           <AtomicText
             type="labelSmall"
@@ -163,6 +196,15 @@ const styles = StyleSheet.create({
     textAlign: "center",
     opacity: 0.9,
   },
+  loadingContainer: {
+    marginTop: SPLASH_CONSTANTS.CONTENT_PADDING,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 40,
+  },
+  loadingIndicator: {
+    opacity: 0.8,
+  },
   timeoutText: {
     textAlign: "center",
     marginTop: 16,

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

@@ -0,0 +1,6 @@
+/**
+ * Splash Hooks
+ */
+
+export { useSplashFlow } from './useSplashFlow';
+export type { UseSplashFlowOptions, UseSplashFlowResult } from './useSplashFlow';

package/src/molecules/splash/hooks/useSplashFlow.ts

@@ -0,0 +1,31 @@
+/**
+ * Splash Flow Hook
+ * Manages splash screen initialization state
+ */
+
+import { useState, useEffect } from 'react';
+import { DeviceEventEmitter } from 'react-native';
+
+export interface UseSplashFlowOptions {
+  duration?: number;
+}
+
+export interface UseSplashFlowResult {
+  isInitialized: boolean;
+}
+
+export const useSplashFlow = (options: UseSplashFlowOptions = {}): UseSplashFlowResult => {
+  const { duration = 1500 } = options;
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsInitialized(true);
+      DeviceEventEmitter.emit('splash-ready');
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration]);
+
+  return { isInitialized };
+};

package/src/molecules/splash/index.ts

@@ -8,3 +8,6 @@ export type {
   SplashScreenProps,
   SplashColors,
 } from './types';
+
+export { useSplashFlow } from './hooks';
+export type { UseSplashFlowOptions, UseSplashFlowResult } from './hooks';

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

@@ -67,6 +67,15 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const initialize = useThemeStore((state) => state.initialize);
   const setCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
 
+  if (__DEV__) {
+    console.log('[DesignSystemProvider] Component render:', {
+      isInitialized,
+      showLoadingIndicator,
+      hasSplashConfig: !!splashConfig,
+      splashConfigKeys: splashConfig ? Object.keys(splashConfig) : [],
+    });
+  }
+
   useEffect(() => {
     if (__DEV__) console.log('[DesignSystemProvider] Initializing...');
     
@@ -79,29 +88,45 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     // Initialize theme store
     initialize()
       .then(() => {
-        if (__DEV__) console.log('[DesignSystemProvider] Initialized successfully');
+        if (__DEV__) console.log('[DesignSystemProvider] Initialized successfully - setting isInitialized to true');
         setIsInitialized(true);
+        if (__DEV__) console.log('[DesignSystemProvider] State updated - calling onInitialized callback');
         onInitialized?.();
       })
       .catch((error) => {
         if (__DEV__) console.error('[DesignSystemProvider] Initialization failed:', error);
+        if (__DEV__) console.log('[DesignSystemProvider] Error occurred - setting isInitialized to true anyway');
         setIsInitialized(true); // Still render app even on error
         onError?.(error);
       });
   }, [initialize, customColors, setCustomColors, onInitialized, onError]);
 
   const renderContent = () => {
+    if (__DEV__) {
+      console.log('[DesignSystemProvider] renderContent:', {
+        showLoadingIndicator,
+        isInitialized,
+        hasSplashConfig: !!splashConfig,
+        hasLoadingComponent: !!loadingComponent,
+      });
+    }
+
     // Show loading indicator if requested and not yet initialized
     if (showLoadingIndicator && !isInitialized) {
+      if (__DEV__) console.log('[DesignSystemProvider] Showing loading state');
+
       if (loadingComponent) {
+        if (__DEV__) console.log('[DesignSystemProvider] Rendering custom loading component');
         return <>{loadingComponent}</>;
       }
-      
+
       // Use SplashScreen if config provided, otherwise fallback to ActivityIndicator
-      if (splashConfig?.colors) {
+      if (splashConfig) {
+        if (__DEV__) console.log('[DesignSystemProvider] Rendering SplashScreen with config:', splashConfig);
         return <SplashScreen {...splashConfig} />;
       }
 
+      if (__DEV__) console.log('[DesignSystemProvider] Rendering fallback ActivityIndicator');
       return (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" />
@@ -109,6 +134,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
       );
     }
 
+    if (__DEV__) console.log('[DesignSystemProvider] Rendering children (app initialized)');
     return <>{children}</>;
   };