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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.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/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,
+});