@umituz/react-native-design-system 2.6.12 → 2.6.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.12",
+  "version": "2.6.14",
   "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/device/detection/deviceDetection.ts

@@ -1,19 +1,23 @@
 /**
  * Device Detection Utilities
  *
- * Utilities for detecting device types and screen dimensions.
- * Follows universal design principles for cross-platform compatibility.
+ * Uses expo-device for primary device type detection (PHONE vs TABLET)
+ * and screen dimensions for secondary distinctions (small vs large phone).
+ *
+ * Benefits:
+ * - expo-device uses system-level detection on iOS (100% reliable)
+ * - Uses screen diagonal on Android (more accurate than pixels)
+ * - Future-proof: new devices automatically detected correctly
  */
 
 import { Dimensions } from 'react-native';
+import * as Device from 'expo-device';
+import { DeviceType as ExpoDeviceType } from 'expo-device';
 import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from '../../responsive/config';
 import { validateScreenDimensions } from '../../responsive/validation';
 
 /**
  * Helper function for device detection with fallback
- * @param operation - Operation to perform
- * @param fallback - Fallback value if operation fails
- * @returns Operation result or fallback
  */
 const withDeviceDetectionFallback = <T>(
   operation: () => T,
@@ -28,6 +32,7 @@ const withDeviceDetectionFallback = <T>(
 
 /**
  * Device type enum for conditional rendering
+ * Used for fine-grained phone size distinctions
  */
 export enum DeviceType {
   SMALL_PHONE = 'SMALL_PHONE',
@@ -38,8 +43,6 @@ export enum DeviceType {
 
 /**
  * Get current screen dimensions
- * @returns Screen width and height
- * @throws ResponsiveValidationError if dimensions are invalid
  */
 export const getScreenDimensions = () => {
   const { width, height } = Dimensions.get('window');
@@ -48,18 +51,40 @@ export const getScreenDimensions = () => {
     validateScreenDimensions(width, height);
     return { width, height };
   } catch {
-    // Fallback to safe default dimensions
     return { width: 414, height: 896 };
   }
 };
 
 /**
- * Check if current device is a small phone (iPhone 13 mini, SE)
- * @returns true if device is a small phone
+ * Check if current device is a tablet
+ * Uses expo-device for accurate system-level detection
+ */
+export const isTablet = (): boolean => {
+  return withDeviceDetectionFallback(
+    () => Device.deviceType === ExpoDeviceType.TABLET,
+    false
+  );
+};
+
+/**
+ * Check if current device is a phone
+ * Uses expo-device for accurate system-level detection
+ */
+export const isPhone = (): boolean => {
+  return withDeviceDetectionFallback(
+    () => Device.deviceType === ExpoDeviceType.PHONE,
+    true
+  );
+};
+
+/**
+ * Check if current device is a small phone (iPhone SE, 13 mini)
+ * Uses width breakpoint within phone category
  */
 export const isSmallPhone = (): boolean => {
   return withDeviceDetectionFallback(
     () => {
+      if (!isPhone()) return false;
       const { width } = getScreenDimensions();
       return width <= DEVICE_BREAKPOINTS.SMALL_PHONE;
     },
@@ -68,14 +93,15 @@ export const isSmallPhone = (): boolean => {
 };
 
 /**
- * Check if current device is a tablet (iPad)
- * @returns true if device is a tablet
+ * Check if current device is a large phone (Pro Max, Plus models)
+ * Uses width breakpoint within phone category
  */
-export const isTablet = (): boolean => {
+export const isLargePhone = (): boolean => {
   return withDeviceDetectionFallback(
     () => {
+      if (!isPhone()) return false;
       const { width } = getScreenDimensions();
-      return width >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+      return width >= DEVICE_BREAKPOINTS.MEDIUM_PHONE;
     },
     false
   );
@@ -83,7 +109,6 @@ export const isTablet = (): boolean => {
 
 /**
  * Check if device is in landscape mode
- * @returns true if device is in landscape orientation
  */
 export const isLandscape = (): boolean => {
   return withDeviceDetectionFallback(
@@ -96,47 +121,48 @@ export const isLandscape = (): boolean => {
 };
 
 /**
- * Get current device type
- * @returns Device type enum value
+ * Get current device type with fine-grained phone distinctions
+ * Uses expo-device for PHONE vs TABLET, width for phone size variants
  */
 export const getDeviceType = (): DeviceType => {
   return withDeviceDetectionFallback(
     () => {
+      // Use expo-device for primary detection
+      if (isTablet()) {
+        return DeviceType.TABLET;
+      }
+
+      // For phones, use width for size variants
       const { width } = getScreenDimensions();
 
       if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
         return DeviceType.SMALL_PHONE;
       } else if (width <= DEVICE_BREAKPOINTS.MEDIUM_PHONE) {
         return DeviceType.MEDIUM_PHONE;
-      } else if (width <= DEVICE_BREAKPOINTS.LARGE_PHONE) {
-        return DeviceType.LARGE_PHONE;
       }
 
-      return DeviceType.TABLET;
+      return DeviceType.LARGE_PHONE;
     },
     DeviceType.MEDIUM_PHONE
   );
 };
 
 /**
- * Responsive spacing multiplier
- * Returns a multiplier for spacing based on device size
- *
- * @returns Spacing multiplier (0.9-1.2)
+ * Responsive spacing multiplier based on device type
  */
 export const getSpacingMultiplier = (): number => {
   return withDeviceDetectionFallback(
     () => {
-      const { width } = getScreenDimensions();
+      if (isTablet()) {
+        return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
+      }
 
-      if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      if (isSmallPhone()) {
         return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_SMALL;
-      } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
-        return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
       }
 
       return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD;
     },
     LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD
   );
-};
+};

package/src/device/detection/iPadDetection.ts

@@ -1,20 +1,20 @@
 /**
  * iPad Device Detection Utilities
+ *
+ * Uses expo-device for system-level tablet detection,
+ * then uses screen dimensions for iPad-specific sub-categories.
  */
 
-import { Dimensions, Platform } from 'react-native';
-import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import { Dimensions } from 'react-native';
 import { IPAD_BREAKPOINTS } from './iPadBreakpoints';
+import { isTablet, isLandscape } from './deviceDetection';
 
 /**
- * Detect if the current device is an iPad
+ * Detect if the current device is an iPad (or Android tablet)
+ * Uses expo-device for accurate system-level detection
  */
 export function isIPad(): boolean {
-    if (Platform.OS !== 'ios') return false;
-
-    const { width, height } = Dimensions.get('window');
-    const minDimension = Math.min(width, height);
-    return minDimension >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+    return isTablet();
 }
 
 /**
@@ -40,9 +40,9 @@ export function isIPadPro(): boolean {
 }
 
 /**
- * Check if device is in landscape orientation
+ * Check if tablet device is in landscape orientation
+ * Uses shared isLandscape detection for consistency
  */
 export function isIPadLandscape(): boolean {
-    const { width, height } = Dimensions.get('window');
-    return width > height;
+    return isLandscape();
 }

package/src/device/detection/index.ts

@@ -19,7 +19,9 @@ export {
 export {
     DeviceType,
     getScreenDimensions,
+    isPhone,
     isSmallPhone,
+    isLargePhone,
     isTablet,
     isLandscape,
     getDeviceType,

package/src/index.ts

@@ -125,7 +125,9 @@ export {
   // Device detection
   DeviceType,
   getScreenDimensions,
+  isPhone,
   isSmallPhone,
+  isLargePhone,
   isTablet,
   isLandscape,
   getDeviceType,

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -29,8 +29,7 @@ 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 { getScreenDimensions } from '../../device/detection';
-import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import { isTablet as checkIsTablet } from '../../device/detection';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -162,11 +161,10 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const { width: screenWidth } = getScreenDimensions();
-  const isTablet = screenWidth >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+  const isTabletDevice = checkIsTablet();
 
   // Only apply maxWidth for tablets - phones should fill full width
-  const finalMaxWidth = maxWidth || (responsiveEnabled && isTablet ? 600 : undefined);
+  const finalMaxWidth = maxWidth || (responsiveEnabled && isTabletDevice ? 600 : undefined);
   const horizontalPadding = responsiveEnabled ? getResponsiveHorizontalPadding(tokens.spacing.md, insets) : tokens.spacing.md;
 
   const styles = useMemo(() => StyleSheet.create({

package/src/responsive/config.ts

@@ -10,9 +10,9 @@
  * These values determine when responsive behaviors change
  */
 export const DEVICE_BREAKPOINTS = {
-  SMALL_PHONE: 375,    // iPhone 13 mini and smaller
-  MEDIUM_PHONE: 414,   // iPhone 13/14/15
-  LARGE_PHONE: 428,    // iPhone 14 Pro Max
+  SMALL_PHONE: 375,    // iPhone SE, iPhone 13 mini
+  MEDIUM_PHONE: 414,   // iPhone 13/14/15 (390-393px actual)
+  LARGE_PHONE: 500,    // iPhone 14/15 Pro Max (430px) - buffer for future devices
   SMALL_TABLET: 768,   // iPad mini
   TABLET: 1024,        // iPad Air and larger tablets
 } as const;

package/src/responsive/gridUtils.ts

@@ -3,8 +3,8 @@
  * Responsive grid sizing and column calculations
  */
 
-import { getScreenDimensions } from '../device/detection';
-import { DEVICE_BREAKPOINTS, GRID_CONFIG } from './config';
+import { getScreenDimensions, isTablet } from '../device/detection';
+import { GRID_CONFIG } from './config';
 import { validateNumber } from './validation';
 
 /**
@@ -23,8 +23,8 @@ export const getResponsiveGridColumns = (
     const validatedMobile = validateNumber(mobileColumns, 'mobileColumns', 1, 20);
     const validatedTablet = validateNumber(tabletColumns, 'tabletColumns', 1, 20);
 
-    const { width } = getScreenDimensions();
-    return width >= DEVICE_BREAKPOINTS.TABLET ? validatedTablet : validatedMobile;
+    const isTabletDevice = isTablet();
+    return isTabletDevice ? validatedTablet : validatedMobile;
   } catch {
     return 2;
   }

package/src/responsive/responsiveLayout.ts

@@ -3,10 +3,16 @@
  * Layout utilities for positioning and spacing.
  */
 
-import { getScreenDimensions } from '../device/detection';
-import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from './config';
+import { getScreenDimensions, isTablet } from '../device/detection';
+import { LAYOUT_CONSTANTS } from './config';
 import { validateNumber, validateSafeAreaInsets } from './validation';
 
+/**
+ * Check if device is tablet-sized (for responsive layouts)
+ * Uses expo-device based detection for accuracy
+ */
+const checkIsTabletSize = (): boolean => isTablet();
+
 /**
  * Responsive horizontal padding
  */
@@ -18,10 +24,10 @@ export const getResponsiveHorizontalPadding = (
     const validatedBasePadding = validateNumber(basePadding, 'basePadding', 0, 100);
     validateSafeAreaInsets(insets);
 
-    const { width } = getScreenDimensions();
     const { left = 0, right = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
 
-    if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    if (isTabletDevice) {
       const tabletPadding = validatedBasePadding * 1.5;
       return Math.max(
         tabletPadding,
@@ -66,10 +72,10 @@ export const getResponsiveFABPosition = (
 ): { bottom: number; right: number } => {
   try {
     validateSafeAreaInsets(insets);
-    const { width } = getScreenDimensions();
     const { bottom = 0, right = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
 
-    if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    if (isTabletDevice) {
       return {
         bottom: Math.max(
           LAYOUT_CONSTANTS.FAB_BOTTOM_TABLET,
@@ -133,10 +139,10 @@ export const getResponsiveTabBarHeight = (
 ): number => {
   try {
     validateSafeAreaInsets(insets);
-    const { width } = getScreenDimensions();
     const { bottom = 0 } = insets;
+    const isTabletDevice = checkIsTabletSize();
 
-    const baseHeight = width >= DEVICE_BREAKPOINTS.SMALL_TABLET
+    const baseHeight = isTabletDevice
       ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
       : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
 
@@ -156,9 +162,8 @@ export const getResponsiveTabBarConfig = (
 ): ResponsiveTabBarConfig => {
   try {
     validateSafeAreaInsets(insets);
-    const { width } = getScreenDimensions();
     const { bottom = 0 } = insets;
-    const isTabletSize = width >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+    const isTabletSize = checkIsTabletSize();
 
     const baseHeight = isTabletSize
       ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET

package/src/responsive/responsiveModal.ts

@@ -3,9 +3,8 @@
  * Modal, bottom sheet, and dialog layout utilities.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions, isTablet } from '../device/detection';
 import {
-  DEVICE_BREAKPOINTS,
   LAYOUT_CONSTANTS,
   HEIGHT_THRESHOLDS,
   SIZE_CONSTRAINTS,
@@ -74,7 +73,7 @@ export const getResponsiveMinModalHeight = (): number => {
 export const getResponsiveModalWidth = (): number => {
   try {
     const { width } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const isTabletDevice = isTablet();
 
     const widthPercent = isTabletDevice
       ? MODAL_CONFIG.WIDTH_PERCENT_TABLET
@@ -92,8 +91,8 @@ export const getResponsiveModalWidth = (): number => {
 
 export const getResponsiveModalHeight = (): number => {
   try {
-    const { width, height } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const { height } = getScreenDimensions();
+    const isTabletDevice = isTablet();
 
     if (isTabletDevice) {
       return height * MODAL_CONFIG.HEIGHT_PERCENT_TABLET;
@@ -111,8 +110,7 @@ export const getResponsiveModalHeight = (): number => {
 
 export const getResponsiveModalBorderRadius = (): number => {
   try {
-    const { width } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const isTabletDevice = isTablet();
 
     return isTabletDevice
       ? MODAL_CONFIG.BORDER_RADIUS_TABLET
@@ -124,8 +122,7 @@ export const getResponsiveModalBorderRadius = (): number => {
 
 export const getResponsiveModalMaxWidth = (): number => {
   try {
-    const { width } = getScreenDimensions();
-    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+    const isTabletDevice = isTablet();
 
     return isTabletDevice
       ? MODAL_CONFIG.MAX_WIDTH_TABLET
@@ -140,8 +137,7 @@ export const getResponsiveBackdropOpacity = (): number => {
 };
 
 export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
-  const { width } = getScreenDimensions();
-  const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+  const isTabletDevice = isTablet();
 
   return {
     width: getResponsiveModalWidth(),

package/src/responsive/responsiveSizing.ts

@@ -3,9 +3,8 @@
  * Responsive sizing utilities for UI components.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions, isSmallPhone, isTablet } from '../device/detection';
 import {
-  DEVICE_BREAKPOINTS,
   RESPONSIVE_PERCENTAGES,
   SIZE_CONSTRAINTS,
   HEIGHT_THRESHOLDS,
@@ -27,11 +26,13 @@ export const getResponsiveLogoSize = (baseSize: number = 140): number => {
   try {
     const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 500);
     const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_SMALL_PHONE_MAX);
       return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_SMALL, SIZE_CONSTRAINTS.LOGO_MAX_SMALL);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_TABLET_MAX);
       return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_TABLET, SIZE_CONSTRAINTS.LOGO_MAX_TABLET);
     }
@@ -73,11 +74,13 @@ export const getResponsiveIconContainerSize = (baseSize: number = 140): number =
   try {
     const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 300);
     const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_SMALL_PHONE);
       return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_SMALL);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_TABLET);
       return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_TABLET);
     }
@@ -96,10 +99,12 @@ export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
   try {
     const validatedBaseWidth = validateNumber(baseWidth, 'baseWidth', 100, 1000);
     const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       return safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_SMALL_PHONE);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       const calculatedWidth = safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_TABLET);
       return Math.min(calculatedWidth, SIZE_CONSTRAINTS.CONTENT_MAX_TABLET);
     }
@@ -118,12 +123,13 @@ export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
 export const getResponsiveFontSize = (baseFontSize: number): number => {
   try {
     const validatedBaseSize = validateFontSize(baseFontSize);
-    const { width } = getScreenDimensions();
+    const isSmallPhoneDevice = isSmallPhone();
+    const isTabletDevice = isTablet();
 
-    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+    if (isSmallPhoneDevice) {
       const scaledSize = validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_SMALL_PHONE;
       return Math.max(scaledSize, SIZE_CONSTRAINTS.FONT_MIN_SIZE);
-    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+    } else if (isTabletDevice) {
       return validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_TABLET;
     }