@umituz/react-native-design-system 2.6.15 → 2.6.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.15",
+  "version": "2.6.17",
   "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/layouts/ScreenLayout/ScreenLayout.tsx

@@ -24,12 +24,11 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, type ViewStyle, RefreshControlProps } from 'react-native';
+import { View, ScrollView, StyleSheet, KeyboardAvoidingView, type ViewStyle, type RefreshControlProps } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
-import { getResponsiveHorizontalPadding } from '../../responsive/responsiveLayout';
-import { isTablet as checkIsTablet } from '../../device/detection';
+import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -161,16 +160,25 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const isTabletDevice = checkIsTablet();
 
-  // Only apply maxWidth for tablets - phones should fill full width
-  const finalMaxWidth = maxWidth || (responsiveEnabled && isTabletDevice ? 600 : undefined);
-  const horizontalPadding = responsiveEnabled ? getResponsiveHorizontalPadding(tokens.spacing.md, insets) : tokens.spacing.md;
+  // Get all responsive layout values from centralized config
+  const layoutConfig = useMemo(
+    () => getScreenLayoutConfig(insets),
+    [insets]
+  );
+
+  // Use provided maxWidth or responsive default
+  const finalMaxWidth = maxWidth || (responsiveEnabled ? layoutConfig.maxContentWidth : undefined);
+  const horizontalPadding = responsiveEnabled ? layoutConfig.horizontalPadding : tokens.spacing.md;
+  const verticalPadding = responsiveEnabled ? layoutConfig.verticalPadding : tokens.spacing.lg;
 
   const styles = useMemo(() => StyleSheet.create({
     container: {
       flex: 1,
     },
+    keyboardAvoidingView: {
+      flex: 1,
+    },
     responsiveWrapper: {
       flex: 1,
       width: '100%',
@@ -178,6 +186,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
     },
     content: {
       flex: 1,
+      paddingTop: verticalPadding,
       paddingHorizontal: horizontalPadding,
     },
     scrollView: {
@@ -185,13 +194,30 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
     },
     scrollContent: {
       flexGrow: 1,
+      paddingTop: verticalPadding,
       paddingHorizontal: horizontalPadding,
-      paddingBottom: tokens.spacing.lg,
+      paddingBottom: verticalPadding,
     },
-  }), [tokens, finalMaxWidth, horizontalPadding]);
+  }), [tokens, finalMaxWidth, horizontalPadding, verticalPadding]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
 
+  // Content wrapper - optionally with KeyboardAvoidingView
+  // Uses 'padding' behavior which works consistently cross-platform
+  const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children: wrapperChildren }) => {
+    if (keyboardAvoiding) {
+      return (
+        <KeyboardAvoidingView
+          style={styles.keyboardAvoidingView}
+          behavior="padding"
+        >
+          {wrapperChildren}
+        </KeyboardAvoidingView>
+      );
+    }
+    return <>{wrapperChildren}</>;
+  };
+
   // Non-scrollable layout
   if (!scrollable) {
     return (
@@ -200,13 +226,15 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
         edges={edges}
         testID={testID}
       >
-        <View style={styles.responsiveWrapper}>
-          {header}
-          <View style={[styles.content, contentContainerStyle]}>
-            {children}
+        <ContentWrapper>
+          <View style={styles.responsiveWrapper}>
+            {header}
+            <View style={[styles.content, contentContainerStyle]}>
+              {children}
+            </View>
+            {footer}
           </View>
-          {footer}
-        </View>
+        </ContentWrapper>
       </SafeAreaView>
     );
   }
@@ -218,19 +246,21 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
       edges={edges}
       testID={testID}
     >
-      <View style={styles.responsiveWrapper}>
-        {header}
-        <ScrollView
-          style={styles.scrollView}
-          contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-          showsVerticalScrollIndicator={!hideScrollIndicator}
-          keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
-          refreshControl={refreshControl}
-        >
-          {children}
-        </ScrollView>
-        {footer}
-      </View>
+      <ContentWrapper>
+        <View style={styles.responsiveWrapper}>
+          {header}
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+            showsVerticalScrollIndicator={!hideScrollIndicator}
+            keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
+            refreshControl={refreshControl}
+          >
+            {children}
+          </ScrollView>
+          {footer}
+        </View>
+      </ContentWrapper>
     </SafeAreaView>
   );
 };

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

@@ -1,6 +1,7 @@
-import { Platform } from 'react-native';
 import { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../../theme';
+import { getResponsiveTabBarConfig } from '../../../responsive/responsiveLayout';
 
 export interface TabBarConfig {
     backgroundColor?: string;
@@ -19,17 +20,24 @@ export interface TabBarConfig {
 
 export function useTabBarStyles(config: TabBarConfig = {}) {
     const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
+
+    // Get responsive tab bar config based on device type and safe area
+    const responsiveConfig = useMemo(
+        () => getResponsiveTabBarConfig(insets),
+        [insets]
+    );
 
     const tabBarStyle = useMemo(() => ({
         backgroundColor: config.backgroundColor || tokens.colors.surface,
         borderTopColor: config.borderTopColor || tokens.colors.borderLight,
         borderTopWidth: config.borderTopWidth ?? 1,
-        paddingTop: config.paddingTop ?? 12,
-        paddingBottom: config.paddingBottom ?? (Platform.OS === 'ios' ? 24 : 12),
-        minHeight: config.minHeight ?? (Platform.OS === 'ios' ? 80 : 70),
+        paddingTop: config.paddingTop ?? responsiveConfig.paddingTop,
+        paddingBottom: config.paddingBottom ?? responsiveConfig.paddingBottom,
+        minHeight: config.minHeight ?? responsiveConfig.height,
     }), [config.backgroundColor, config.borderTopColor, config.borderTopWidth,
     config.paddingTop, config.paddingBottom, config.minHeight, tokens.colors.surface,
-    tokens.colors.borderLight]);
+    tokens.colors.borderLight, responsiveConfig]);
 
     const screenOptions = useMemo(() => ({
         headerShown: false,

package/src/responsive/config.ts

@@ -91,6 +91,11 @@ export const MODAL_CONFIG = {
   HEIGHT_PERCENT_STANDARD: 0.78,   // 78% of screen height for standard devices
   HEIGHT_PERCENT_TABLET: 0.70,     // 70% of screen height for tablets
 
+  // Min modal height percentages (for calculated min heights)
+  MIN_HEIGHT_PERCENT_SMALL: 0.40,     // 40% of screen height for small devices
+  MIN_HEIGHT_PERCENT_STANDARD: 0.45,  // 45% of screen height for standard devices
+  MIN_HEIGHT_PERCENT_TABLET: 0.35,    // 35% of screen height for tablets
+
   // Max width constraints
   MAX_WIDTH_PHONE: 480,            // Maximum modal width for phones
   MAX_WIDTH_TABLET: 600,           // Maximum modal width for tablets
@@ -121,9 +126,12 @@ export const LAYOUT_CONSTANTS = {
   SPACING_MULTIPLIER_SMALL: 0.90,   // 90% spacing for small devices
   SPACING_MULTIPLIER_TABLET: 1.20,   // 120% spacing for tablets
   SPACING_MULTIPLIER_STANDARD: 1.0,   // 100% spacing for standard devices
-  
+
   // Padding and margins
   HORIZONTAL_PADDING_BASE: 16,         // Base horizontal padding
+  VERTICAL_PADDING_SMALL: 12,          // Vertical padding for small devices
+  VERTICAL_PADDING_STANDARD: 16,       // Vertical padding for standard devices
+  VERTICAL_PADDING_TABLET: 24,         // Vertical padding for tablets
   BOTTOM_POSITION_BASE: 32,           // Base bottom position
   
   // Safe area offsets

package/src/responsive/index.ts

@@ -14,11 +14,14 @@ export {
   getResponsiveLogoSize,
   getResponsiveInputHeight,
   getResponsiveHorizontalPadding,
+  getResponsiveVerticalPadding,
+  getScreenLayoutConfig,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
   getResponsiveTabBarHeight,
   getResponsiveTabBarConfig,
   type ResponsiveTabBarConfig,
+  type ScreenLayoutConfig,
   getResponsiveModalMaxHeight,
   getResponsiveMinModalHeight,
   getResponsiveModalWidth,

package/src/responsive/responsive.ts

@@ -19,11 +19,14 @@ export {
 // Responsive layout
 export {
   getResponsiveHorizontalPadding,
+  getResponsiveVerticalPadding,
+  getScreenLayoutConfig,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
   getResponsiveTabBarHeight,
   getResponsiveTabBarConfig,
   type ResponsiveTabBarConfig,
+  type ScreenLayoutConfig,
 } from './responsiveLayout';
 
 // Responsive modal utilities

package/src/responsive/responsiveLayout.ts

@@ -3,8 +3,8 @@
  * Layout utilities for positioning and spacing.
  */
 
-import { getScreenDimensions, isTablet } from '../device/detection';
-import { LAYOUT_CONSTANTS } from './config';
+import { isTablet, isSmallPhone, getSpacingMultiplier } from '../device/detection';
+import { LAYOUT_CONSTANTS, SIZE_CONSTRAINTS } from './config';
 import { validateNumber, validateSafeAreaInsets } from './validation';
 
 /**
@@ -13,6 +13,75 @@ import { validateNumber, validateSafeAreaInsets } from './validation';
  */
 const checkIsTabletSize = (): boolean => isTablet();
 
+/**
+ * Screen layout configuration for ScreenLayout component
+ */
+export interface ScreenLayoutConfig {
+  maxContentWidth: number | undefined;
+  horizontalPadding: number;
+  verticalPadding: number;
+  spacingMultiplier: number;
+}
+
+/**
+ * Get complete screen layout configuration
+ * Returns all responsive values needed for ScreenLayout
+ */
+export const getScreenLayoutConfig = (
+  insets: { left?: number; right?: number; top?: number; bottom?: number } = {}
+): ScreenLayoutConfig => {
+  try {
+    const isTabletDevice = checkIsTabletSize();
+    const spacingMultiplier = getSpacingMultiplier();
+
+    return {
+      maxContentWidth: isTabletDevice ? SIZE_CONSTRAINTS.CONTENT_MAX_TABLET : undefined,
+      horizontalPadding: getResponsiveHorizontalPadding(LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE, insets),
+      verticalPadding: getResponsiveVerticalPadding(insets),
+      spacingMultiplier,
+    };
+  } catch {
+    return {
+      maxContentWidth: undefined,
+      horizontalPadding: LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
+      verticalPadding: LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD,
+      spacingMultiplier: LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD,
+    };
+  }
+};
+
+/**
+ * Responsive vertical padding
+ * Adjusts based on device type and safe area insets
+ */
+export const getResponsiveVerticalPadding = (
+  insets: { top?: number; bottom?: number } = { top: 0, bottom: 0 }
+): number => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { top = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
+    const isSmall = isSmallPhone();
+    const spacingMultiplier = getSpacingMultiplier();
+
+    // Base padding adjusted by device type
+    let basePadding: number = LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
+    if (isTabletDevice) {
+      basePadding = LAYOUT_CONSTANTS.VERTICAL_PADDING_TABLET;
+    } else if (isSmall) {
+      basePadding = LAYOUT_CONSTANTS.VERTICAL_PADDING_SMALL;
+    }
+
+    // Apply spacing multiplier for consistency
+    const adjustedPadding = basePadding * spacingMultiplier;
+
+    // Ensure minimum padding respects safe area
+    return Math.max(adjustedPadding, top > 0 ? 8 : adjustedPadding);
+  } catch {
+    return LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
+  }
+};
+
 /**
  * Responsive horizontal padding
  */
@@ -28,7 +97,7 @@ export const getResponsiveHorizontalPadding = (
     const isTabletDevice = checkIsTabletSize();
 
     if (isTabletDevice) {
-      const tabletPadding = validatedBasePadding * 1.5;
+      const tabletPadding = validatedBasePadding * LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
       return Math.max(
         tabletPadding,
         left + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
@@ -99,7 +168,10 @@ export const getResponsiveFABPosition = (
       ),
     };
   } catch {
-    return { bottom: 90, right: 20 };
+    return {
+      bottom: LAYOUT_CONSTANTS.TAB_BAR_OFFSET,
+      right: LAYOUT_CONSTANTS.FAB_RIGHT_PHONE,
+    };
   }
 };
 

package/src/responsive/responsiveModal.ts

@@ -53,17 +53,17 @@ export const getResponsiveMinModalHeight = (): number => {
     const { height } = getScreenDimensions();
 
     if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
-      const calculatedHeight = height * 0.4;
+      const calculatedHeight = height * MODAL_CONFIG.MIN_HEIGHT_PERCENT_SMALL;
       return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_SMALL);
     } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
-      const calculatedHeight = height * 0.35;
+      const calculatedHeight = height * MODAL_CONFIG.MIN_HEIGHT_PERCENT_TABLET;
       return Math.min(
         Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_TABLET),
         SIZE_CONSTRAINTS.MODAL_MAX_TABLET
       );
     }
 
-    const calculatedHeight = height * 0.45;
+    const calculatedHeight = height * MODAL_CONFIG.MIN_HEIGHT_PERCENT_STANDARD;
     return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_STANDARD);
   } catch {
     return 300;
@@ -146,7 +146,7 @@ export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
     borderRadius: getResponsiveModalBorderRadius(),
     backdropOpacity: getResponsiveBackdropOpacity(),
     horizontalPadding: isTabletDevice
-      ? LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE * 1.5
+      ? LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE * LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET
       : LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
   };
 };

package/src/responsive/useResponsive.ts

@@ -17,6 +17,8 @@ import {
   getResponsiveLogoSize,
   getResponsiveInputHeight,
   getResponsiveHorizontalPadding,
+  getResponsiveVerticalPadding,
+  getScreenLayoutConfig,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
   getResponsiveTabBarConfig,
@@ -33,6 +35,7 @@ import {
   type ResponsiveBottomSheetLayout,
   type ResponsiveDialogLayout,
   type ResponsiveTabBarConfig,
+  type ScreenLayoutConfig,
 } from "./responsive";
 import {
   isSmallPhone,
@@ -70,9 +73,13 @@ export interface UseResponsiveReturn {
 
   // Responsive positioning
   horizontalPadding: number;
+  verticalPadding: number;
   bottomPosition: number;
   fabPosition: { bottom: number; right: number };
 
+  // Screen layout config (complete configuration for ScreenLayout)
+  screenLayoutConfig: ScreenLayoutConfig;
+
   // Responsive layout
   modalMaxHeight: string;
   modalMinHeight: number;
@@ -160,9 +167,13 @@ export const useResponsive = (): UseResponsiveReturn => {
 
       // Responsive positioning
       horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
+      verticalPadding: getResponsiveVerticalPadding(insets),
       bottomPosition: getResponsiveBottomPosition(undefined, insets),
       fabPosition: getResponsiveFABPosition(insets),
 
+      // Screen layout config (complete configuration for ScreenLayout)
+      screenLayoutConfig: getScreenLayoutConfig(insets),
+
       // Responsive layout
       modalMaxHeight: getResponsiveModalMaxHeight(),
       modalMinHeight: getResponsiveMinModalHeight(),