@umituz/react-native-design-system 4.25.74 → 4.25.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.74",
+  "version": "4.25.76",
   "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",
@@ -215,9 +215,13 @@
     "react-native-gesture-handler": ">=2.20.0",
     "react-native-safe-area-context": ">=5.6.2",
     "zustand": ">=5.0.0",
-    "@react-native-community/datetimepicker": ">=8.0.0"
+    "@react-native-community/datetimepicker": ">=8.0.0",
+    "react-native-keyboard-controller": ">=1.0.0"
   },
   "peerDependenciesMeta": {
+    "react-native-keyboard-controller": {
+      "optional": true
+    },
     "@react-navigation/native": {
       "optional": true
     },

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -1,21 +1,31 @@
 /**
  * ScreenLayout Component
- * Refactored: Extracted types, styles, and ContentWrapper
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
-import { AtomicKeyboardAvoidingView } from '../../atoms';
 import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
 import type { ScreenLayoutProps } from './types';
 
+// Lazy-load react-native-keyboard-controller (optional peer dep).
+// Falls back to React Native's built-in components when not installed.
+let KCKeyboardAvoidingView: React.ComponentType<any> | null = null;
+let KCKeyboardAwareScrollView: React.ComponentType<any> | null = null;
+try {
+  const kc = require('react-native-keyboard-controller');
+  KCKeyboardAvoidingView = kc.KeyboardAvoidingView ?? null;
+  KCKeyboardAwareScrollView = kc.KeyboardAwareScrollView ?? null;
+} catch {
+  // react-native-keyboard-controller not installed — using RN built-ins
+}
+
 export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutProps) => {
   const {
     children,
-    scrollable = true,
+    scrollable = false,
     edges = ['top', 'bottom', 'left', 'right'],
     header,
     footer,
@@ -25,89 +35,94 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
     testID,
     hideScrollIndicator = false,
     keyboardAvoiding = false,
+    keyboardVerticalOffset = 0,
     maxWidth,
     refreshControl,
   } = props;
+
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  // Get all responsive layout values from centralized config
-  const layoutConfig = useMemo(
-    () => getScreenLayoutConfig(insets),
-    [insets]
-  );
+  const layoutConfig = useMemo(() => getScreenLayoutConfig(insets), [insets]);
 
-  // Use centralized layout config for consistency
   const finalMaxWidth = maxWidth || layoutConfig.maxContentWidth;
   const horizontalPadding = layoutConfig.horizontalPadding;
   const verticalPadding = layoutConfig.verticalPadding;
 
-  // Pre-compute styles
   const styles = useMemo(
     () => getScreenLayoutStyles({ maxWidth: finalMaxWidth, horizontalPadding, verticalPadding }),
-    [finalMaxWidth, horizontalPadding, verticalPadding]
+    [finalMaxWidth, horizontalPadding, verticalPadding],
   );
 
   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;
 
+  // Scroll component: prefer KeyboardAwareScrollView (keyboard-controller) over plain ScrollView.
+  // KeyboardAwareScrollView automatically keeps focused TextInput above the keyboard
+  // without needing a separate KeyboardAvoidingView wrapper.
+  const ScrollComponent = KCKeyboardAwareScrollView ?? ScrollView;
+
   const content = (
-    <View style={[
-      styles.responsiveWrapper,
-      {
-        paddingTop,
-        paddingBottom: footer ? 0 : paddingBottom,
-        paddingLeft,
-        paddingRight,
-      }
-    ]}>
+    <View
+      style={[
+        styles.responsiveWrapper,
+        {
+          paddingTop,
+          paddingBottom: footer ? 0 : paddingBottom,
+          paddingLeft,
+          paddingRight,
+        },
+      ]}
+    >
       {header}
       {scrollable ? (
-        <ScrollView
+        <ScrollComponent
           style={styles.scrollView}
           contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
           showsVerticalScrollIndicator={!hideScrollIndicator}
           keyboardShouldPersistTaps="handled"
           refreshControl={refreshControl}
-          nestedScrollEnabled
+          {...(KCKeyboardAwareScrollView ? { bottomOffset: 16 } : {})}
         >
           {children}
-        </ScrollView>
+        </ScrollComponent>
       ) : (
-        <View style={[styles.scrollView, styles.scrollContent, contentContainerStyle]}>
+        <View style={[styles.scrollView, contentContainerStyle]}>
           {children}
         </View>
       )}
-      {footer && (
-        <View style={{ paddingBottom }}>
-          {footer}
-        </View>
-      )}
+      {footer && <View style={{ paddingBottom }}>{footer}</View>}
     </View>
   );
 
+  // Keyboard avoiding wrapper: prefer keyboard-controller's KAV (consistent iOS+Android)
+  // over React Native's built-in (iOS-only reliable).
+  // Only used when keyboardAvoiding={true} — screens that manage their own keyboard
+  // handling (e.g. ChatScreen) should NOT set this prop.
+  if (keyboardAvoiding) {
+    const KAV = KCKeyboardAvoidingView ?? KeyboardAvoidingView;
+    return (
+      <View style={[styles.container, { backgroundColor: bgColor }, containerStyle]} testID={testID}>
+        <KAV
+          style={styles.keyboardAvoidingView}
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          keyboardVerticalOffset={keyboardVerticalOffset}
+        >
+          {content}
+        </KAV>
+      </View>
+    );
+  }
+
   return (
-    <View
-      style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
-      testID={testID}
-    >
-      {keyboardAvoiding ? (
-         <AtomicKeyboardAvoidingView style={styles.keyboardAvoidingView}>
-           {content}
-         </AtomicKeyboardAvoidingView>
-      ) : (
-         <View style={styles.keyboardAvoidingView}>
-           {content}
-         </View>
-      )}
+    <View style={[styles.container, { backgroundColor: bgColor }, containerStyle]} testID={testID}>
+      <View style={styles.keyboardAvoidingView}>{content}</View>
     </View>
   );
 };
 
-// Re-export types for convenience
 export type { ScreenLayoutProps } from './types';

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

@@ -18,6 +18,7 @@ export interface ScreenLayoutProps {
   readonly testID?: string;
   readonly hideScrollIndicator?: boolean;
   readonly keyboardAvoiding?: boolean;
+  readonly keyboardVerticalOffset?: number;
   readonly accessibilityLabel?: string;
   readonly accessibilityHint?: string;
   readonly accessible?: boolean;