@umituz/react-native-design-system 2.8.18 → 2.8.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.18",
+  "version": "2.8.19",
   "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/exports/molecules.ts

@@ -100,6 +100,10 @@ export {
   createNavigationTheme,
   useTabBarStyles,
   useTabConfig,
+  useAppNavigation,
+  useAppRoute,
+  useAppFocusEffect,
+  useAppIsFocused,
   type NavigationHeaderProps,
   type ScreenOptionsParams,
   type TabsNavigatorProps,
@@ -118,6 +122,7 @@ export {
   type BottomTabNavigationOptions,
   type BottomTabScreenProps,
   type StackNavigationOptions,
+  type RouteProp,
   type TabLabelProps,
   type TabBarConfig,
   // Long Press Menu

package/src/molecules/navigation/hooks/useAppFocusEffect.ts

@@ -0,0 +1,14 @@
+import { useFocusEffect } from "@react-navigation/native";
+import { useCallback } from "react";
+
+/**
+ * useAppFocusEffect Hook
+ *
+ * A wrapper around React Navigation's useFocusEffect hook.
+ * Standardizes focus effect usage across all packages and apps.
+ */
+export function useAppFocusEffect(effect: () => void | (() => void)) {
+  useFocusEffect(effect);
+}
+
+export { useCallback };

package/src/molecules/navigation/hooks/useAppIsFocused.ts

@@ -0,0 +1,11 @@
+import { useIsFocused } from "@react-navigation/native";
+
+/**
+ * useAppIsFocused Hook
+ *
+ * A wrapper around React Navigation's useIsFocused hook.
+ * Standardizes API usage across all packages and apps.
+ */
+export function useAppIsFocused(): boolean {
+  return useIsFocused();
+}

package/src/molecules/navigation/hooks/useAppNavigation.ts

@@ -0,0 +1,12 @@
+import { useNavigation } from "@react-navigation/native";
+import type { NavigationProp, ParamListBase } from "@react-navigation/native";
+
+/**
+ * useAppNavigation Hook
+ *
+ * A wrapper around React Navigation's useNavigation hook.
+ * Standardizes navigation usage across all packages and apps.
+ */
+export function useAppNavigation<T extends ParamListBase>(): NavigationProp<T> {
+  return useNavigation<NavigationProp<T>>();
+}

package/src/molecules/navigation/hooks/useAppRoute.ts

@@ -0,0 +1,14 @@
+import { useRoute } from "@react-navigation/native";
+import type { RouteProp, ParamListBase } from "@react-navigation/native";
+
+/**
+ * useAppRoute Hook
+ *
+ * A wrapper around React Navigation's useRoute hook.
+ * Standardizes route usage across all packages and apps.
+ */
+export function useAppRoute<T extends ParamListBase, RouteName extends keyof T = string>(): RouteProp<T, RouteName> {
+  return useRoute<RouteProp<T, RouteName>>();
+}
+
+export type { RouteProp };

package/src/molecules/navigation/index.ts

@@ -34,6 +34,10 @@ export { TabLabel, type TabLabelProps } from "./components/TabLabel";
 export * from './components/NavigationHeader';
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
+export { useAppNavigation } from "./hooks/useAppNavigation";
+export { useAppRoute, type RouteProp } from "./hooks/useAppRoute";
+export { useAppFocusEffect } from "./hooks/useAppFocusEffect";
+export { useAppIsFocused } from "./hooks/useAppIsFocused";
 
 // Navigation Theme
 export { createNavigationTheme } from "./utils/NavigationTheme";

package/src/molecules/navigation/types.ts

@@ -28,9 +28,11 @@ export interface FabConfig {
  */
 export interface BaseScreen<T extends ParamListBase = ParamListBase> {
   /** Unique name identifier for the screen */
-  name: string;
+  name: Extract<keyof T, string>;
   /** React component to render for this screen */
-  component: React.ComponentType<T>;
+  component?: React.ComponentType<any>;
+  /** Render function for children (alternative to component) */
+  children?: (props: any) => React.ReactNode;
 }
 
 /**

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

@@ -87,6 +87,7 @@ export function createTabScreen<T extends ParamListBase = ParamListBase>(
     key: screen.name,
     name: screen.name,
     component: screen.component,
+    children: screen.children,
     options: screenOptions,
   });
 }
@@ -129,6 +130,7 @@ export function createStackScreen<T extends ParamListBase = ParamListBase>(
     key: screen.name,
     name: screen.name,
     component: screen.component,
+    children: screen.children,
     options: screenOptions,
   });
 }