@umituz/react-native-design-system 4.25.41 → 4.25.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.41",
+  "version": "4.25.43",
   "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",
@@ -225,39 +225,6 @@
     "expo-application": {
       "optional": true
     },
-    "expo-clipboard": {
-      "optional": true
-    },
-    "expo-crypto": {
-      "optional": true
-    },
-    "expo-device": {
-      "optional": true
-    },
-    "expo-haptics": {
-      "optional": true
-    },
-    "expo-image": {
-      "optional": true
-    },
-    "expo-image-manipulator": {
-      "optional": true
-    },
-    "expo-image-picker": {
-      "optional": true
-    },
-    "expo-network": {
-      "optional": true
-    },
-    "expo-secure-store": {
-      "optional": true
-    },
-    "expo-sharing": {
-      "optional": true
-    },
-    "expo-video": {
-      "optional": true
-    },
     "@react-native-community/datetimepicker": {
       "optional": true
     }
@@ -275,7 +242,7 @@
     "@testing-library/react": "^16.3.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
-    "@types/react": "~19.2.4",
+    "@types/react": "~19.0.0",
     "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -12,21 +12,22 @@ import { AtomicKeyboardAvoidingView } from '../../atoms';
 import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
 import type { ScreenLayoutProps } from './types';
 
-export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
-  children,
-  scrollable = true,
-  edges = ['top'],
-  header,
-  footer,
-  backgroundColor,
-  containerStyle,
-  contentContainerStyle,
-  testID,
-  hideScrollIndicator = false,
-  keyboardAvoiding = false,
-  maxWidth,
-  refreshControl,
-}) => {
+export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutProps) => {
+  const {
+    children,
+    scrollable = true,
+    edges = ['top', 'bottom', 'left', 'right'],
+    header,
+    footer,
+    backgroundColor,
+    containerStyle,
+    contentContainerStyle,
+    testID,
+    hideScrollIndicator = false,
+    keyboardAvoiding = false,
+    maxWidth,
+    refreshControl,
+  } = props;
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
@@ -49,13 +50,30 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
   
+  // Robust safe area handling
+  const paddingTop = edges.includes('top') ? insets.top : 0;
+  const paddingBottom = edges.includes('bottom') ? insets.bottom : 0;
+  const paddingLeft = edges.includes('left') ? insets.left : 0;
+  const paddingRight = edges.includes('right') ? insets.right : 0;
+
   const content = (
-    <View style={styles.responsiveWrapper}>
+    <View style={[
+      styles.responsiveWrapper,
+      {
+        paddingTop,
+        paddingBottom: footer ? 0 : paddingBottom,
+        paddingLeft,
+        paddingRight,
+      }
+    ]}>
       {header}
       {scrollable ? (
         <ScrollView
           style={styles.scrollView}
-          contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+          contentContainerStyle={[
+            styles.scrollContent, 
+            contentContainerStyle,
+          ]}
           showsVerticalScrollIndicator={!hideScrollIndicator}
           keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
           refreshControl={refreshControl}
@@ -67,14 +85,17 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
           {children}
         </View>
       )}
-      {footer}
+      {footer && (
+        <View style={{ paddingBottom }}>
+          {footer}
+        </View>
+      )}
     </View>
   );
 
   return (
-    <SafeAreaView
+    <View
       style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
-      edges={edges}
       testID={testID}
     >
       {keyboardAvoiding ? (
@@ -86,7 +107,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
            {content}
          </View>
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/layouts/ScreenLayout/styles/screenLayoutStyles.ts

@@ -25,7 +25,7 @@ export const getScreenLayoutStyles = (
     responsiveWrapper: {
       flex: 1,
       width: '100%',
-      ...(maxWidth ? { maxWidth, alignSelf: 'flex-start' as const } : {}),
+      ...(maxWidth ? { maxWidth, alignSelf: 'center' as const } : {}),
     },
     content: {
       flex: 1,

package/src/responsive/padding/paddingUtils.ts

@@ -27,8 +27,8 @@ export const getResponsiveVerticalPadding = (
     // Apply spacing multiplier for consistency
     const adjustedPadding = basePadding * spacingMultiplier;
 
-    // Ensure minimum padding respects safe area
-    return Math.max(adjustedPadding, top > 0 ? 8 : adjustedPadding);
+    // We now return the base padding; safe areas are handled by ScreenLayout
+    return adjustedPadding;
   } catch {
     return LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
   }