@umituz/react-native-design-system 2.6.7 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "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/molecules/splash/components/SplashScreen.tsx

@@ -26,29 +26,11 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   onReady,
   style,
 }: SplashScreenProps) => {
+  // ALL HOOKS MUST BE AT THE TOP (Rules of Hooks)
   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`);
@@ -71,6 +53,27 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
     return () => clearTimeout(timer);
   }, [maxDuration, visible, handleTimeout]);
 
+  // ALL HOOKS ABOVE - NOW SAFE TO USE OTHER LOGIC
+
+  // 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,
+    });
+  }
+
   if (!visible) {
     if (__DEV__) {
       console.log("[SplashScreen] Not visible (visible=false), returning null");

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

@@ -63,24 +63,12 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   onInitialized,
   onError,
 }: DesignSystemProviderProps) => {
+  // ALL HOOKS MUST BE AT THE TOP (Rules of Hooks)
   const [isInitialized, setIsInitialized] = useState(false);
   const [minDisplayTimeMet, setMinDisplayTimeMet] = useState(false);
   const initialize = useThemeStore((state) => state.initialize);
   const setCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
 
-  // Minimum splash display time (1.5 seconds)
-  const MIN_SPLASH_DISPLAY_TIME = 1500;
-
-  if (__DEV__) {
-    console.log('[DesignSystemProvider] Component render:', {
-      isInitialized,
-      minDisplayTimeMet,
-      showLoadingIndicator,
-      hasSplashConfig: !!splashConfig,
-      splashConfigKeys: splashConfig ? Object.keys(splashConfig) : [],
-    });
-  }
-
   useEffect(() => {
     if (__DEV__) console.log('[DesignSystemProvider] Initializing...');
 
@@ -90,7 +78,8 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
       setCustomColors(customColors);
     }
 
-    // Start minimum display timer
+    // Start minimum display timer (1.5 seconds)
+    const MIN_SPLASH_DISPLAY_TIME = 1500;
     const displayTimer = setTimeout(() => {
       if (__DEV__) console.log('[DesignSystemProvider] Minimum display time met (1.5s)');
       setMinDisplayTimeMet(true);
@@ -114,6 +103,18 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     return () => clearTimeout(displayTimer);
   }, [initialize, customColors, setCustomColors, onInitialized, onError]);
 
+  // ALL HOOKS ABOVE - NOW SAFE TO USE OTHER LOGIC
+
+  if (__DEV__) {
+    console.log('[DesignSystemProvider] Component render:', {
+      isInitialized,
+      minDisplayTimeMet,
+      showLoadingIndicator,
+      hasSplashConfig: !!splashConfig,
+      splashConfigKeys: splashConfig ? Object.keys(splashConfig) : [],
+    });
+  }
+
   const renderContent = () => {
     const shouldShowSplash = showLoadingIndicator && (!isInitialized || !minDisplayTimeMet);