@umituz/react-native-design-system 2.9.2 → 2.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.2",
+  "version": "2.9.4",
   "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/hooks/useAppNavigation.ts

@@ -1,32 +1,97 @@
 import { useNavigation } from "@react-navigation/native";
 import type { NavigationProp, ParamListBase } from "@react-navigation/native";
-import { AppNavigation } from "../utils/AppNavigation";
+import { useCallback, useMemo } from "react";
+
+/**
+ * Navigation result type - clean and simple
+ */
+export interface AppNavigationResult {
+  navigate: (screen: string, params?: Record<string, unknown>) => void;
+  push: (screen: string, params?: Record<string, unknown>) => void;
+  goBack: () => void;
+  reset: (screen: string, params?: Record<string, unknown>) => void;
+  replace: (screen: string, params?: Record<string, unknown>) => void;
+  pop: (count?: number) => void;
+  popToTop: () => void;
+  canGoBack: () => boolean;
+  getState: () => ReturnType<NavigationProp<ParamListBase>["getState"]>;
+  getParent: () => NavigationProp<ParamListBase> | undefined;
+}
 
 /**
  * useAppNavigation Hook
  *
- * A unified wrapper around React Navigation's useNavigation hook.
- * Standardizes navigation usage across all packages and apps by 
- * providing a consistent interface that bridges static and hook-based navigation.
+ * Clean navigation API without complex type casting.
+ * Use: const navigation = useAppNavigation();
+ *      navigation.navigate("ScreenName", { param: value });
  */
-export function useAppNavigation<T extends ParamListBase>() {
-  const navigation = useNavigation<NavigationProp<T>>();
-
-  return {
-    ...navigation,
-    // Standardized actions using the global AppNavigation utility for consistency
-    goBack: () => AppNavigation.goBack(),
-    navigate: (name: any, params?: any) => AppNavigation.navigate(name, params),
-    push: (name: any, params?: any) => AppNavigation.push(name, params),
-    replace: (name: any, params?: any) => AppNavigation.replace(name, params),
-    reset: (name: any, params?: any) => AppNavigation.reset(name, params),
-    pop: (count?: number) => AppNavigation.pop(count),
-    popToTop: () => AppNavigation.popToTop(),
-  } as NavigationProp<T> & {
-    push: (name: string, params?: object) => void;
-    replace: (name: string, params?: object) => void;
-    reset: (name: string, params?: object) => void;
-    pop: (count?: number) => void;
-    popToTop: () => void;
-  };
+export function useAppNavigation(): AppNavigationResult {
+  const navigation = useNavigation<NavigationProp<ParamListBase>>();
+
+  const navigate = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      (navigation.navigate as (name: string, params?: object) => void)(screen, params);
+    },
+    [navigation]
+  );
+
+  const push = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      navigation.dispatch({ type: "PUSH", payload: { name: screen, params } });
+    },
+    [navigation]
+  );
+
+  const goBack = useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  }, [navigation]);
+
+  const reset = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      navigation.reset({ index: 0, routes: [{ name: screen, params }] });
+    },
+    [navigation]
+  );
+
+  const replace = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      navigation.dispatch({ type: "REPLACE", payload: { name: screen, params } });
+    },
+    [navigation]
+  );
+
+  const pop = useCallback(
+    (count = 1) => {
+      navigation.dispatch({ type: "POP", payload: { count } });
+    },
+    [navigation]
+  );
+
+  const popToTop = useCallback(() => {
+    navigation.dispatch({ type: "POP_TO_TOP" });
+  }, [navigation]);
+
+  const canGoBack = useCallback(() => navigation.canGoBack(), [navigation]);
+
+  const getState = useCallback(() => navigation.getState(), [navigation]);
+
+  const getParent = useCallback(() => navigation.getParent(), [navigation]);
+
+  return useMemo(
+    () => ({
+      navigate,
+      push,
+      goBack,
+      reset,
+      replace,
+      pop,
+      popToTop,
+      canGoBack,
+      getState,
+      getParent,
+    }),
+    [navigate, push, goBack, reset, replace, pop, popToTop, canGoBack, getState, getParent]
+  );
 }

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

@@ -1,155 +1,148 @@
 import { NavigationContainerRef, CommonActions, StackActions } from '@react-navigation/native';
 
 /**
- * AppNavigation - Global Navigation Utility
- * 
- * Provides static access to navigation methods from anywhere in the app.
- * Must be initialized with setRef in the root NavigationContainer.
+ * Global Navigation Implementation
+ * Single source of truth for all navigation actions.
  */
-export class AppNavigation {
-    private static navigationRef: NavigationContainerRef<any> | null = null;
 
-    static setRef(ref: NavigationContainerRef<any> | null): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Setting navigation ref', !!ref);
-        }
-        this.navigationRef = ref;
-    }
+let navigationRef: NavigationContainerRef<any> | null = null;
 
-    static getRef(): NavigationContainerRef<any> | null {
-        return this.navigationRef;
+/**
+ * Set the global navigation reference.
+ * Should be called in the root NavigationContainer.
+ */
+export const setRef = (ref: NavigationContainerRef<any> | null): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Setting navigation ref', !!ref);
     }
+    navigationRef = ref;
+};
 
-    static isReady(): boolean {
-        return this.navigationRef?.isReady() ?? false;
-    }
+/**
+ * Get the current navigation reference.
+ */
+export const getRef = (): NavigationContainerRef<any> | null => navigationRef;
 
-    static canGoBack(): boolean {
-        return this.navigationRef?.canGoBack() ?? false;
-    }
+/**
+ * Check if the navigator is ready.
+ */
+export const isReady = (): boolean => navigationRef?.isReady() ?? false;
 
-    static navigate(name: string, params?: object): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Navigating to:', name, params);
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.navigate(name, params);
-        }
-    }
+/**
+ * Check if the navigator can go back.
+ */
+export const canGoBack = (): boolean => navigationRef?.canGoBack() ?? false;
 
-    static push(name: string, params?: object): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Pushing:', name, params);
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.dispatch(StackActions.push(name, params));
-        }
+/**
+ * Navigate to a specific route.
+ */
+export const navigate = (name: string, params?: object): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Navigating to:', name, params);
     }
-
-    static goBack(): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Going back');
-        }
-        if (this.navigationRef?.isReady() && this.navigationRef.canGoBack()) {
-            this.navigationRef.goBack();
-        }
+    if (navigationRef?.isReady()) {
+        navigationRef.navigate(name, params);
     }
+};
 
-    static reset(name: string, params?: object): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Resetting to:', name, params);
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.dispatch(
-                CommonActions.reset({
-                    index: 0,
-                    routes: [{ name, params }],
-                })
-            );
-        }
+/**
+ * Push a new route onto the stack.
+ */
+export const push = (name: string, params?: object): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Pushing:', name, params);
     }
-
-    static replace(name: string, params?: object): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Replacing with:', name, params);
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.dispatch(StackActions.replace(name, params));
-        }
+    if (navigationRef?.isReady()) {
+        navigationRef.dispatch(StackActions.push(name, params));
     }
+};
 
-    static navigateToNested(parentParams: { screen: string; params?: any }): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Navigating to nested:', parentParams);
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.navigate(parentParams.screen, parentParams.params);
-        }
+/**
+ * Go back to the previous screen.
+ */
+export const goBack = (): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Going back');
     }
-
-    static navigateToParent(name: string, params?: object): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Navigating to parent:', name, params);
-        }
-        if (this.navigationRef?.isReady()) {
-            const parent = this.navigationRef.getParent();
-            if (parent) {
-                parent.navigate(name, params);
-            }
-        }
+    if (navigationRef?.isReady() && navigationRef.canGoBack()) {
+        navigationRef.goBack();
     }
+};
 
-    static popToTop(): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Popping to top');
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.dispatch(StackActions.popToTop());
-        }
+/**
+ * Reset the navigation state.
+ */
+export const reset = (name: string, params?: object): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Resetting to:', name, params);
     }
-
-    static pop(count: number = 1): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Popping:', count);
-        }
-        if (this.navigationRef?.isReady()) {
-            this.navigationRef.dispatch(StackActions.pop(count));
-        }
+    if (navigationRef?.isReady()) {
+        navigationRef.dispatch(
+            CommonActions.reset({
+                index: 0,
+                routes: [{ name, params }],
+            })
+        );
     }
+};
 
-    static getCurrentRoute(): string | undefined {
-        return this.navigationRef?.getCurrentRoute()?.name;
+/**
+ * Replace the current route.
+ */
+export const replace = (name: string, params?: object): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Replacing with:', name, params);
     }
-
-    static getCurrentParams<T extends object>(): T | undefined {
-        return this.navigationRef?.getCurrentRoute()?.params as T | undefined;
+    if (navigationRef?.isReady()) {
+        navigationRef.dispatch(StackActions.replace(name, params));
     }
+};
 
-    static goToSettings(): void {
-        this.navigate('Settings');
+/**
+ * Pop to the top of the stack.
+ */
+export const popToTop = (): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Popping to top');
     }
-
-    static goToProfile(): void {
-        this.navigate('Profile');
+    if (navigationRef?.isReady()) {
+        navigationRef.dispatch(StackActions.popToTop());
     }
+};
 
-    static goToHome(): void {
-        this.navigate('Home');
+/**
+ * Pop specific number of screens.
+ */
+export const pop = (count: number = 1): void => {
+    if (__DEV__) {
+        console.log('[AppNavigation] Popping:', count);
     }
-
-    static openModal(name: string, params?: object): void {
-        this.navigateToParent(name, params);
+    if (navigationRef?.isReady()) {
+        navigationRef.dispatch(StackActions.pop(count));
     }
+};
 
-    static closeModal(): void {
-        if (__DEV__) {
-            console.log('[AppNavigation] Closing modal');
-        }
-        if (this.navigationRef?.isReady()) {
-            const parent = this.navigationRef.getParent();
-            if (parent?.canGoBack()) {
-                parent.goBack();
-            }
-        }
-    }
-}
+/**
+ * Get the current route name.
+ */
+export const getCurrentRoute = (): string | undefined => {
+    return navigationRef?.getCurrentRoute()?.name;
+};
+
+/**
+ * Unified AppNavigation Object for both static and hook-based usage.
+ */
+export const AppNavigation = {
+    setRef,
+    getRef,
+    isReady,
+    canGoBack,
+    navigate,
+    push,
+    goBack,
+    reset,
+    replace,
+    popToTop,
+    pop,
+    getCurrentRoute,
+};