@umituz/react-native-design-system 2.8.0 → 2.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "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 } from "./utils/createScreenOptions";
+export type { ScreenOptionsParams } from "./utils/createScreenOptions";

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

@@ -0,0 +1,46 @@
+/**
+ * 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,
+      },
+    }),
+  };
+};