@umituz/react-native-design-system 4.25.81 → 4.25.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.81",
+  "version": "4.25.83",
   "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, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -37,6 +37,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
     keyboardAvoiding = false,
     keyboardVerticalOffset = 0,
     maxWidth,
+    fullWidth = false,
     refreshControl,
   } = props;
 
@@ -45,7 +46,8 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
 
   const layoutConfig = useMemo(() => getScreenLayoutConfig(insets), [insets]);
 
-  const finalMaxWidth = maxWidth || layoutConfig.maxContentWidth;
+  // fullWidth=true disables maxWidth (useful for paginated FlatLists and full-bleed layouts)
+  const finalMaxWidth = fullWidth ? undefined : (maxWidth || layoutConfig.maxContentWidth);
   const horizontalPadding = layoutConfig.horizontalPadding;
   const verticalPadding = layoutConfig.verticalPadding;
 

package/src/layouts/ScreenLayout/types/index.ts

@@ -23,5 +23,7 @@ export interface ScreenLayoutProps {
   readonly accessibilityHint?: string;
   readonly accessible?: boolean;
   readonly maxWidth?: number;
+  /** Disable maxWidth constraint (useful for full-bleed layouts like paginated FlatLists) */
+  readonly fullWidth?: boolean;
   readonly refreshControl?: React.ReactElement<RefreshControlProps>;
 }

package/src/responsive/types/responsiveTypes.ts

@@ -2,7 +2,7 @@
  * Responsive Hook Type Definitions
  */
 
-import type { DeviceType } from '../../device/detection';
+import type { DeviceType, IPadLayoutInfo } from '../../device/detection';
 import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout } from '../responsive';
 import type { ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsiveLayout';
 
@@ -15,7 +15,7 @@ export interface UseResponsiveReturn {
   readonly isLandscapeDevice: boolean;
   readonly deviceType: DeviceType;
 
-  // Safe area insets
+  // Safe area insets (live, reactive — updates on orientation change)
   readonly insets: {
     readonly top: number;
     readonly bottom: number;
@@ -23,6 +23,9 @@ export interface UseResponsiveReturn {
     readonly right: number;
   };
 
+  // iPad-specific layout info (null on phones)
+  readonly iPadLayout: IPadLayoutInfo | null;
+
   // Responsive sizes
   readonly logoSize: number;
   readonly inputHeight: number;

package/src/responsive/useResponsive.ts

@@ -5,7 +5,7 @@
 
 import { useCallback, useMemo } from "react";
 import { useWindowDimensions } from "react-native";
-import { initialWindowMetrics } from "../safe-area";
+import { useSafeAreaInsets } from "../safe-area";
 import {
   getResponsiveLogoSize,
   getResponsiveInputHeight,
@@ -17,24 +17,13 @@ import {
 import { computeDeviceInfo } from "./compute/computeDeviceInfo";
 import { computeResponsiveSizes, computeOnboardingSizes } from "./compute/computeResponsiveSizes";
 import { computeResponsivePositioning } from "./compute/computeResponsivePositioning";
+import { getIPadLayoutInfo } from "../device/detection";
 import type { UseResponsiveReturn } from "./types/responsiveTypes";
 
-/**
- * Get safe area insets from initial window metrics
- * Used before SafeAreaProvider initializes
- */
-const getInitialSafeAreaInsets = () => {
-  if (initialWindowMetrics?.insets) {
-    return initialWindowMetrics.insets;
-  }
-
-  // Fallback to zero insets if no metrics available
-  return { top: 0, bottom: 0, left: 0, right: 0 };
-};
-
 export const useResponsive = (): UseResponsiveReturn => {
   const { width, height } = useWindowDimensions();
-  const insets = getInitialSafeAreaInsets();
+  // Live reactive insets — updates on orientation change, multitasking, notch changes
+  const insets = useSafeAreaInsets();
 
   // Memoize utility functions
   const getLogoSize = useCallback(
@@ -64,6 +53,7 @@ export const useResponsive = (): UseResponsiveReturn => {
   );
 
   // Compute all responsive values
+  // Spread individual inset values in deps so useMemo recomputes on any inset change
   const responsiveValues = useMemo(
     () => {
       const dimensions = { width, height };
@@ -71,6 +61,7 @@ export const useResponsive = (): UseResponsiveReturn => {
       const sizes = computeResponsiveSizes(dimensions);
       const positioning = computeResponsivePositioning(insets);
       const onboarding = computeOnboardingSizes(deviceInfo);
+      const iPadLayout = deviceInfo.isTabletDevice ? getIPadLayoutInfo() : null;
 
       return {
         // Device info
@@ -81,9 +72,12 @@ export const useResponsive = (): UseResponsiveReturn => {
         isLandscapeDevice: deviceInfo.isLandscapeDevice,
         deviceType: deviceInfo.deviceType,
 
-        // Safe area insets
+        // Safe area insets (live, reactive)
         insets,
 
+        // iPad-specific layout info (null on phones)
+        iPadLayout,
+
         // Responsive sizes
         logoSize: sizes.logoSize,
         inputHeight: sizes.inputHeight,
@@ -124,7 +118,8 @@ export const useResponsive = (): UseResponsiveReturn => {
         getGridCols,
       };
     },
-    [width, height, insets, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [width, height, insets.top, insets.bottom, insets.left, insets.right, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols],
   );
 
   return responsiveValues;