@umituz/react-native-design-system 2.5.32 → 2.5.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.32",
+  "version": "2.5.33",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -3,21 +3,38 @@ import { View } from "react-native";
 import type { ParamListBase } from "@react-navigation/native";
 import { AtomicIcon } from "../../../atoms/AtomicIcon";
 import { useAppDesignTokens } from "../../../theme";
-import { useSafeAreaInsets } from "../../../safe-area";
+import { useResponsive } from "../../../responsive";
 import type { TabNavigatorConfig, TabScreen } from "../types";
 
 export interface UseTabConfigProps<T extends ParamListBase> {
   config: TabNavigatorConfig<T>;
 }
 
+/**
+ * Get the appropriate icon name based on focus state
+ * Ionicons convention: filled for active, outline for inactive
+ */
+const getIconNameForState = (baseName: string, focused: boolean): string => {
+  if (!baseName) return "help-circle-outline";
+
+  const hasOutlineSuffix = baseName.endsWith("-outline");
+  const hasSharpSuffix = baseName.endsWith("-sharp");
+
+  if (hasOutlineSuffix || hasSharpSuffix) {
+    return baseName;
+  }
+
+  return focused ? baseName : `${baseName}-outline`;
+};
+
 export function useTabConfig<T extends ParamListBase>(props: UseTabConfigProps<T>): TabNavigatorConfig<T> {
   const { config } = props;
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
+  const { tabBarConfig, insets } = useResponsive();
 
   const finalConfig: TabNavigatorConfig<T> = useMemo(() => {
     const screens = config.screens as TabScreen<T>[];
-    
+
     return {
       ...config,
       renderIcon: (
@@ -34,7 +51,7 @@ export function useTabConfig<T extends ParamListBase>(props: UseTabConfigProps<T
         const fab = config.fabConfig;
 
         if (isFab) {
-          const fabSize = fab?.size ?? 84;
+          const fabSize = fab?.size ?? tabBarConfig.fabSize;
           return React.createElement(View, {
             style: {
               width: fabSize,
@@ -43,7 +60,7 @@ export function useTabConfig<T extends ParamListBase>(props: UseTabConfigProps<T
               backgroundColor: tokens.colors.primary,
               justifyContent: "center",
               alignItems: "center",
-              marginTop: fab?.offsetY ?? -32,
+              marginTop: fab?.offsetY ?? tabBarConfig.fabOffsetY,
             }
           }, React.createElement(AtomicIcon, {
             name: iconName,
@@ -53,25 +70,28 @@ export function useTabConfig<T extends ParamListBase>(props: UseTabConfigProps<T
           }));
         }
 
+        const resolvedIconName = getIconNameForState(iconName, focused);
+
         return React.createElement(AtomicIcon, {
-          name: iconName,
+          name: resolvedIconName,
           customColor: focused ? tokens.colors.primary : tokens.colors.textSecondary,
-          size: "lg"
+          customSize: tabBarConfig.iconSize,
         });
       },
       screenOptions: {
         tabBarActiveTintColor: tokens.colors.primary,
         tabBarInactiveTintColor: tokens.colors.textSecondary,
         tabBarShowLabel: false,
-        tabBarIconStyle: {
-          marginBottom: 0,
+        tabBarItemStyle: {
+          paddingVertical: tabBarConfig.paddingTop,
         },
         tabBarStyle: {
           backgroundColor: tokens.colors.surface,
-          borderTopColor: tokens.colors.borderLight,
           borderTopWidth: 0,
-          paddingBottom: insets.bottom || 0,
-          height: tokens.spacing.tabBarHeight + (insets.bottom || 16),
+          paddingBottom: tabBarConfig.paddingBottom,
+          paddingTop: tabBarConfig.paddingTop,
+          height: tabBarConfig.height,
+          elevation: 0,
         },
         headerStyle: {
           backgroundColor: tokens.colors.surface,
@@ -89,7 +109,7 @@ export function useTabConfig<T extends ParamListBase>(props: UseTabConfigProps<T
           : {}),
       },
     };
-  }, [tokens, config, insets]);
+  }, [tokens, config, tabBarConfig, insets]);
 
   return finalConfig;
 }

package/src/responsive/index.ts

@@ -16,6 +16,9 @@ export {
   getResponsiveHorizontalPadding,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
+  getResponsiveTabBarHeight,
+  getResponsiveTabBarConfig,
+  type ResponsiveTabBarConfig,
   getResponsiveModalMaxHeight,
   getResponsiveMinModalHeight,
   getResponsiveModalWidth,

package/src/responsive/responsive.ts

@@ -21,6 +21,9 @@ export {
   getResponsiveHorizontalPadding,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
+  getResponsiveTabBarHeight,
+  getResponsiveTabBarConfig,
+  type ResponsiveTabBarConfig,
 } from './responsiveLayout';
 
 // Responsive modal utilities

package/src/responsive/responsiveLayout.ts

@@ -96,3 +96,98 @@ export const getResponsiveFABPosition = (
     return { bottom: 90, right: 20 };
   }
 };
+
+/**
+ * Tab bar height constants
+ */
+const TAB_BAR_CONSTANTS = {
+  BASE_HEIGHT_PHONE: 60,
+  BASE_HEIGHT_TABLET: 70,
+  MIN_PADDING_BOTTOM: 8,
+  MIN_PADDING_TOP: 8,
+  ICON_SIZE_PHONE: 24,
+  ICON_SIZE_TABLET: 28,
+  FAB_SIZE_PHONE: 64,
+  FAB_SIZE_TABLET: 72,
+  FAB_OFFSET_Y_PHONE: -24,
+  FAB_OFFSET_Y_TABLET: -28,
+} as const;
+
+/**
+ * Responsive tab bar configuration
+ */
+export interface ResponsiveTabBarConfig {
+  height: number;
+  paddingBottom: number;
+  paddingTop: number;
+  iconSize: number;
+  fabSize: number;
+  fabOffsetY: number;
+}
+
+/**
+ * Get responsive tab bar height based on device and safe area
+ */
+export const getResponsiveTabBarHeight = (
+  insets: { bottom?: number } = { bottom: 0 }
+): number => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { width } = getScreenDimensions();
+    const { bottom = 0 } = insets;
+
+    const baseHeight = width >= DEVICE_BREAKPOINTS.SMALL_TABLET
+      ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
+      : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
+
+    const bottomPadding = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+
+    return baseHeight + bottomPadding;
+  } catch {
+    return TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE + TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM;
+  }
+};
+
+/**
+ * Get complete responsive tab bar configuration
+ */
+export const getResponsiveTabBarConfig = (
+  insets: { bottom?: number } = { bottom: 0 }
+): ResponsiveTabBarConfig => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { width } = getScreenDimensions();
+    const { bottom = 0 } = insets;
+    const isTabletSize = width >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+
+    const baseHeight = isTabletSize
+      ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
+      : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
+
+    const paddingBottom = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+
+    return {
+      height: baseHeight + paddingBottom,
+      paddingBottom,
+      paddingTop: TAB_BAR_CONSTANTS.MIN_PADDING_TOP,
+      iconSize: isTabletSize
+        ? TAB_BAR_CONSTANTS.ICON_SIZE_TABLET
+        : TAB_BAR_CONSTANTS.ICON_SIZE_PHONE,
+      fabSize: isTabletSize
+        ? TAB_BAR_CONSTANTS.FAB_SIZE_TABLET
+        : TAB_BAR_CONSTANTS.FAB_SIZE_PHONE,
+      fabOffsetY: isTabletSize
+        ? TAB_BAR_CONSTANTS.FAB_OFFSET_Y_TABLET
+        : TAB_BAR_CONSTANTS.FAB_OFFSET_Y_PHONE,
+    };
+  } catch {
+    return {
+      height: TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE + TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM,
+      paddingBottom: TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM,
+      paddingTop: TAB_BAR_CONSTANTS.MIN_PADDING_TOP,
+      iconSize: TAB_BAR_CONSTANTS.ICON_SIZE_PHONE,
+      fabSize: TAB_BAR_CONSTANTS.FAB_SIZE_PHONE,
+      fabOffsetY: TAB_BAR_CONSTANTS.FAB_OFFSET_Y_PHONE,
+    };
+  }
+};

package/src/responsive/useResponsive.ts

@@ -19,6 +19,7 @@ import {
   getResponsiveHorizontalPadding,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
+  getResponsiveTabBarConfig,
   getResponsiveModalMaxHeight,
   getResponsiveMinModalHeight,
   getResponsiveModalLayout,
@@ -31,6 +32,7 @@ import {
   type ResponsiveModalLayout,
   type ResponsiveBottomSheetLayout,
   type ResponsiveDialogLayout,
+  type ResponsiveTabBarConfig,
 } from './responsive';
 import {
   isSmallPhone,
@@ -82,6 +84,9 @@ export interface UseResponsiveReturn {
   bottomSheetLayout: ResponsiveBottomSheetLayout;
   dialogLayout: ResponsiveDialogLayout;
 
+  // Tab bar configuration
+  tabBarConfig: ResponsiveTabBarConfig;
+
   // Utility functions
   getLogoSize: (baseSize?: number) => number;
   getInputHeight: (baseHeight?: number) => number;
@@ -143,6 +148,9 @@ export const useResponsive = (): UseResponsiveReturn => {
     bottomSheetLayout: getResponsiveBottomSheetLayout(),
     dialogLayout: getResponsiveDialogLayout(),
 
+    // Tab bar configuration
+    tabBarConfig: getResponsiveTabBarConfig(insets),
+
     // Utility functions (memoized)
     getLogoSize,
     getInputHeight,