@idealyst/components 1.2.43 → 1.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.43",
+  "version": "1.2.44",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.43",
+    "@idealyst/theme": "^1.2.44",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.43",
+    "@idealyst/theme": "^1.2.44",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Screen/Screen.native.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView, KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
@@ -10,6 +10,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   background = 'screen',
   safeArea = true,
   scrollable = true,
+  avoidKeyboard = true,
   contentInset,
   onLayout,
   // Spacing variants from ContainerStyleProps
@@ -54,6 +55,13 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     paddingRight: insets.right,
   } : undefined;
 
+  // Wrapper component for keyboard avoidance
+  const KeyboardWrapper = avoidKeyboard ? KeyboardAvoidingView : RNView;
+  const keyboardWrapperProps = avoidKeyboard ? {
+    behavior: Platform.OS === 'ios' ? 'padding' as const : 'height' as const,
+    style: { flex: 1 },
+  } : { style: { flex: 1 } };
+
   if (scrollable) {
     // Content styles applied via View wrapper for Unistyles reactivity
     // (contentContainerStyle isn't reactive, only style prop is)
@@ -65,25 +73,30 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     } : safeAreaStyle;
 
     return (
-      <RNScrollView
-        ref={ref as any}
-        nativeID={id}
-        style={[screenStyle, style]}
-        contentContainerStyle={{ flexGrow: 1 }}
-        testID={testID}
-        onLayout={onLayout}
-      >
-        <RNView style={[contentInsetStyle, { flex: 1 }]}>
-          {children}
-        </RNView>
-      </RNScrollView>
+      <KeyboardWrapper {...keyboardWrapperProps}>
+        <RNScrollView
+          ref={ref as any}
+          nativeID={id}
+          style={[screenStyle, style]}
+          contentContainerStyle={{ flexGrow: 1 }}
+          testID={testID}
+          onLayout={onLayout}
+          keyboardShouldPersistTaps="handled"
+        >
+          <RNView style={[contentInsetStyle, { flex: 1 }]}>
+            {children}
+          </RNView>
+        </RNScrollView>
+      </KeyboardWrapper>
     );
   }
 
   return (
-    <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID} onLayout={onLayout}>
-      {children}
-    </RNView>
+    <KeyboardWrapper {...keyboardWrapperProps}>
+      <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID} onLayout={onLayout}>
+        {children}
+      </RNView>
+    </KeyboardWrapper>
   );
 });
 

package/src/Screen/types.ts

@@ -51,6 +51,14 @@ export interface ScreenProps extends ContainerStyleProps {
    */
   scrollable?: boolean;
 
+  /**
+   * Whether to avoid the keyboard on native platforms (iOS/Android).
+   * When enabled, content will shift up when the keyboard appears.
+   * @default true
+   * @platform native
+   */
+  avoidKeyboard?: boolean;
+
   /**
    * Called when the layout of the screen changes.
    * Provides the new width, height, x, and y coordinates.