@umituz/react-native-design-system 2.7.0 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/molecules/navigation/index.ts

@@ -37,3 +37,7 @@ export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
 
 // Navigation Theme
 export { createNavigationTheme } from "./utils/NavigationTheme";
+
+// Screen Options
+export { createScreenOptions, createCenteredHeaderOptions } from "./utils/createScreenOptions";
+export type { ScreenOptionsParams } from "./utils/createScreenOptions";

package/src/molecules/navigation/utils/AppNavigation.ts

@@ -3,58 +3,47 @@ import { NavigationContainerRef, CommonActions, StackActions } from '@react-navi
 export class AppNavigation {
     private static navigationRef: NavigationContainerRef<any> | null = null;
 
-    /**
-     * Set the global navigation reference
-     */
     static setRef(ref: NavigationContainerRef<any> | null): void {
         this.navigationRef = ref;
     }
 
     /**
-     * Set the global navigation reference (alias for setRef)
      * @deprecated Use setRef instead
      */
     static setNavigationRef(ref: NavigationContainerRef<any> | null): void {
         this.setRef(ref);
     }
 
-    /**
-     * Get the global navigation reference
-     */
     static getRef(): NavigationContainerRef<any> | null {
         return this.navigationRef;
     }
 
-    /**
-     * Navigate to a route
-     */
+    static isReady(): boolean {
+        return this.navigationRef?.isReady() ?? false;
+    }
+
+    static canGoBack(): boolean {
+        return this.navigationRef?.canGoBack() ?? false;
+    }
+
     static navigate(name: string, params?: object): void {
         if (this.navigationRef?.isReady()) {
             this.navigationRef.navigate(name, params);
         }
     }
 
-    /**
-     * Push a route onto the stack
-     */
     static push(name: string, params?: object): void {
         if (this.navigationRef?.isReady()) {
             this.navigationRef.dispatch(StackActions.push(name, params));
         }
     }
 
-    /**
-     * Go back to the previous screen
-     */
     static goBack(): void {
         if (this.navigationRef?.isReady() && this.navigationRef.canGoBack()) {
             this.navigationRef.goBack();
         }
     }
 
-    /**
-     * Reset the navigation state
-     */
     static reset(name: string, params?: object): void {
         if (this.navigationRef?.isReady()) {
             this.navigationRef.dispatch(
@@ -66,27 +55,18 @@ export class AppNavigation {
         }
     }
 
-    /**
-     * Replace the current route
-     */
     static replace(name: string, params?: object): void {
         if (this.navigationRef?.isReady()) {
             this.navigationRef.dispatch(StackActions.replace(name, params));
         }
     }
 
-    /**
-    * Navigate to a screen in a nested navigator (e.g. Tab > Stack > Screen)
-    */
     static navigateToNested(parentParams: { screen: string; params?: any }): void {
         if (this.navigationRef?.isReady()) {
             this.navigationRef.navigate(parentParams.screen, parentParams.params);
         }
     }
 
-    /**
-     * Navigate to a screen in the parent navigator
-     */
     static navigateToParent(name: string, params?: object): void {
         if (this.navigationRef?.isReady()) {
             const parent = this.navigationRef.getParent();
@@ -95,4 +75,49 @@ export class AppNavigation {
             }
         }
     }
+
+    static popToTop(): void {
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.dispatch(StackActions.popToTop());
+        }
+    }
+
+    static pop(count: number = 1): void {
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.dispatch(StackActions.pop(count));
+        }
+    }
+
+    static getCurrentRoute(): string | undefined {
+        return this.navigationRef?.getCurrentRoute()?.name;
+    }
+
+    static getCurrentParams<T extends object>(): T | undefined {
+        return this.navigationRef?.getCurrentRoute()?.params as T | undefined;
+    }
+
+    static goToSettings(): void {
+        this.navigate('Settings');
+    }
+
+    static goToProfile(): void {
+        this.navigate('Profile');
+    }
+
+    static goToHome(): void {
+        this.navigate('Home');
+    }
+
+    static openModal(name: string, params?: object): void {
+        this.navigateToParent(name, params);
+    }
+
+    static closeModal(): void {
+        if (this.navigationRef?.isReady()) {
+            const parent = this.navigationRef.getParent();
+            if (parent?.canGoBack()) {
+                parent.goBack();
+            }
+        }
+    }
 }

package/src/molecules/navigation/utils/createScreenOptions.ts

@@ -0,0 +1,69 @@
+/**
+ * Screen Options Creator
+ * Creates React Navigation screen options with design tokens
+ * Used by all packages for consistent navigation headers
+ */
+
+import type { StackNavigationOptions } from '@react-navigation/stack';
+
+export interface ScreenOptionsParams {
+  colors: {
+    surface: string;
+    textPrimary: string;
+    borderLight: string;
+  };
+  backTitle?: string;
+}
+
+/**
+ * Creates standard screen options for React Navigation
+ * @param params - Design tokens and back title
+ * @returns React Navigation screen options
+ */
+export const createScreenOptions = (params: ScreenOptionsParams): StackNavigationOptions => {
+  const { colors, backTitle } = params;
+
+  return {
+    headerStyle: {
+      backgroundColor: colors.surface,
+      borderBottomColor: colors.borderLight,
+      borderBottomWidth: 1,
+    },
+    headerTitleStyle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.textPrimary,
+    },
+    headerTintColor: colors.textPrimary,
+    ...(backTitle && {
+      headerBackTitle: backTitle,
+      headerBackTitleStyle: {
+        fontSize: 16,
+        color: colors.textPrimary,
+      },
+    }),
+  };
+};
+
+/**
+ * Creates screen options for centered header title
+ */
+export const createCenteredHeaderOptions = (
+  title: string,
+  colors: ScreenOptionsParams['colors']
+): StackNavigationOptions => ({
+  headerShown: true,
+  headerTitle: title,
+  headerTitleAlign: 'center',
+  headerStyle: {
+    backgroundColor: colors.surface,
+    borderBottomColor: colors.borderLight,
+    borderBottomWidth: 1,
+  },
+  headerTitleStyle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: colors.textPrimary,
+  },
+  headerTintColor: colors.textPrimary,
+});

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

@@ -1,12 +1,24 @@
 /**
  * Splash Flow Hook
  * Manages splash screen initialization state
+ *
+ * IMPORTANT: Use isAppReady prop instead of duration for real initialization tracking.
+ * Artificial delays cause poor UX - the splash should transition as soon as app is ready.
  */
 
 import { useState, useEffect } from 'react';
 import { DeviceEventEmitter } from 'react-native';
 
 export interface UseSplashFlowOptions {
+  /**
+   * External readiness signal from app initialization
+   * When true, splash will transition to main content
+   */
+  isAppReady?: boolean;
+  /**
+   * @deprecated Use isAppReady instead. Artificial delays cause poor UX.
+   * Only use for fallback/timeout scenarios.
+   */
   duration?: number;
 }
 
@@ -15,17 +27,31 @@ export interface UseSplashFlowResult {
 }
 
 export const useSplashFlow = (options: UseSplashFlowOptions = {}): UseSplashFlowResult => {
-  const { duration = 1500 } = options;
+  const { isAppReady, duration } = options;
   const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsInitialized(true);
-      DeviceEventEmitter.emit('splash-ready');
-    }, duration);
+    // Primary: Use external app ready signal (preferred)
+    if (isAppReady !== undefined) {
+      if (isAppReady && !isInitialized) {
+        setIsInitialized(true);
+        DeviceEventEmitter.emit('splash-ready');
+      }
+      return undefined;
+    }
 
-    return () => clearTimeout(timer);
-  }, [duration]);
+    // Fallback: Use duration timer if isAppReady not provided (legacy support)
+    if (duration !== undefined) {
+      const timer = setTimeout(() => {
+        setIsInitialized(true);
+        DeviceEventEmitter.emit('splash-ready');
+      }, duration);
+
+      return () => clearTimeout(timer);
+    }
+
+    return undefined;
+  }, [isAppReady, duration, isInitialized]);
 
   return { isInitialized };
 };