@idealyst/components 1.2.121 → 1.2.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.121",
+  "version": "1.2.122",
   "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,12 +56,13 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.121",
+    "@idealyst/theme": "^1.2.122",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
     "@react-native-vector-icons/material-design-icons": ">=12.0.0",
     "@react-native/normalize-colors": "*",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-edge-to-edge": "*",
@@ -80,6 +81,9 @@
     "@mdi/react": {
       "optional": true
     },
+    "@react-navigation/bottom-tabs": {
+      "optional": true
+    },
     "@react-native/normalize-colors": {
       "optional": true
     },
@@ -107,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.121",
-    "@idealyst/tooling": "^1.2.121",
+    "@idealyst/theme": "^1.2.122",
+    "@idealyst/tooling": "^1.2.122",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Screen/Screen.native.tsx

@@ -1,7 +1,8 @@
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import { View as RNView, ScrollView as RNScrollView, Keyboard, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { useSafeAreaInsets } from '@idealyst/theme';
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import type { IdealystElement } from '../utils/refTypes';
@@ -16,6 +17,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   safeAreaRight,
   scrollable = true,
   avoidKeyboard = true,
+  keyboardAvoidingOffset = 0,
   contentInset,
   onLayout,
   // Spacing variants from ContainerStyleProps
@@ -38,6 +40,9 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   const applySafeAreaLeft = safeAreaLeft ?? safeArea;
   const applySafeAreaRight = safeAreaRight ?? safeArea;
 
+  // Detect tab bar height when inside a bottom tab navigator
+  const tabBarHeight = useContext(BottomTabBarHeightContext) ?? 0;
+
   // Animated keyboard offset
   const keyboardOffset = useSharedValue(0);
 
@@ -49,7 +54,10 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showSubscription = Keyboard.addListener(showEvent, (e) => {
-      keyboardOffset.value = withTiming(e.endCoordinates.height, {
+      // Subtract the tab bar height and any manual offset since those areas
+      // are already occupied and don't need additional padding
+      const adjustedHeight = Math.max(0, e.endCoordinates.height - tabBarHeight - keyboardAvoidingOffset);
+      keyboardOffset.value = withTiming(adjustedHeight, {
         duration: Platform.OS === 'ios' ? e.duration : 250,
         easing: Easing.out(Easing.cubic),
       });
@@ -66,7 +74,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
       showSubscription.remove();
       hideSubscription.remove();
     };
-  }, [avoidKeyboard]);
+  }, [avoidKeyboard, tabBarHeight, keyboardAvoidingOffset]);
 
   const animatedKeyboardStyle = useAnimatedStyle(() => ({
     paddingBottom: keyboardOffset.value,

package/src/Screen/types.ts

@@ -84,6 +84,15 @@ export interface ScreenProps extends ContainerStyleProps {
    */
   avoidKeyboard?: boolean;
 
+  /**
+   * Additional offset to subtract from the keyboard height when avoiding the keyboard.
+   * The Screen automatically accounts for the tab bar height when inside a tab navigator,
+   * but this prop can be used for other fixed UI elements that occupy space at the bottom.
+   * @default 0
+   * @platform native
+   */
+  keyboardAvoidingOffset?: number;
+
   /**
    * Called when the layout of the screen changes.
    * Provides the new width, height, x, and y coordinates.