Fix/73240 - The site header partially overlaps the typing indicator and composer error messages when the composer is focused and virtual keyboard is open

package.json

@@ -134,7 +134,7 @@
     "date-fns-tz": "^3.2.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^5.0.3",
-    "expensify-common": "2.0.162",
+    "expensify-common": "2.0.164",
     "expo": "54.0.10",
     "expo-asset": "12.0.8",
     "expo-av": "15.1.7",

src/components/KeyboardAvoidingView/BaseKeyboardAvoidingView/index.tsx

@@ -1,15 +1,60 @@
 /*
  * The KeyboardAvoidingView stub implementation for web and other platforms where the keyboard is handled automatically.
  */
-import React from 'react';
-import {View} from 'react-native';
+import React, {useEffect} from 'react';
+import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import type {KeyboardAvoidingViewProps} from '@components/KeyboardAvoidingView/types';
+import {isMobileSafariOnIos26} from '@libs/Browser';
+import KeyboardUtil from '@src/utils/keyboard';
+
+const isMobileSafariIos26 = isMobileSafariOnIos26();
+
+const BUBBLE_DOMAIN_HEIGHT_SAFARI_26 = 15;
 
 function BaseKeyboardAvoidingView(props: KeyboardAvoidingViewProps) {
-    const {behavior, contentContainerStyle, enabled, keyboardVerticalOffset, ...rest} = props;
+    const {behavior, contentContainerStyle, enabled, keyboardVerticalOffset, style, ...rest} = props;
+    const sharedValue = useSharedValue(0);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        return {paddingBottom: sharedValue.get() * BUBBLE_DOMAIN_HEIGHT_SAFARI_26};
+    });
+
+    useEffect(() => {
+        if (!isMobileSafariIos26) {
+            return;
+        }
+
+        let isTiming = false;
+        let prevIsActive = false;
+        const handler = (isActive: boolean) => {
+            if (isTiming && prevIsActive === isActive) {
+                return;
+            }
+            isTiming = true;
+            prevIsActive = isActive;
+            sharedValue.set(
+                withTiming(
+                    isActive ? 1 : 0,
+                    {
+                        duration: 100,
+                        easing: Easing.inOut(Easing.ease),
+                    },
+                    () => {
+                        isTiming = false;
+                    },
+                ),
+            );
+        };
+
+        return KeyboardUtil.subscribeKeyboardVisibilityChange(handler);
+    }, [sharedValue]);
+
     return (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <View {...rest} />
+        <Animated.View
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+            style={[style, isMobileSafariIos26 && animatedStyle]}
+        />
     );
 }
 

src/libs/Browser/index.ts

@@ -1,4 +1,16 @@
-import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileIOS, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types';
+import type {
+    GetBrowser,
+    IsChromeIOS,
+    IsMobile,
+    IsMobileChrome,
+    IsMobileIOS,
+    IsMobileSafari,
+    IsMobileSafariOnIos26,
+    IsMobileWebKit,
+    IsModernSafari,
+    IsSafari,
+    OpenRouteInDesktopApp,
+} from './types';
 
 const getBrowser: GetBrowser = () => '';
 
@@ -18,6 +30,8 @@ const isSafari: IsSafari = () => false;
 
 const isModernSafari: IsModernSafari = () => false;
 
+const isMobileSafariOnIos26: IsMobileSafariOnIos26 = () => false;
+
 const openRouteInDesktopApp: OpenRouteInDesktopApp = () => {};
 
-export {getBrowser, isMobile, isMobileIOS, isMobileSafari, isMobileWebKit, isSafari, isModernSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp};
+export {getBrowser, isMobile, isMobileIOS, isMobileSafari, isMobileWebKit, isSafari, isModernSafari, isMobileSafariOnIos26, isMobileChrome, isChromeIOS, openRouteInDesktopApp};

src/libs/Browser/index.website.ts

@@ -1,3 +1,4 @@
+import getOSAndName from '@libs/actions/Device/getDeviceInfo/getOSAndName';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -92,6 +93,10 @@ const isModernSafari: IsModernSafari = (): boolean => {
     return parseFloat(iosVersion) >= 18;
 };
 
+const isMobileSafariOnIos26: IsModernSafari = (): boolean => {
+    return isMobileSafari() && getOSAndName().osVersion === '26';
+};
+
 /**
  * The session information needs to be passed to the Desktop app, and the only way to do that is by using query params. There is no other way to transfer the data.
  */
@@ -155,4 +160,5 @@ export {
     openRouteInDesktopApp,
     isOpeningRouteInDesktop,
     resetIsOpeningRouteInDesktop,
+    isMobileSafariOnIos26,
 };

src/libs/Browser/types.ts

@@ -16,6 +16,8 @@ type IsSafari = () => boolean;
 
 type IsModernSafari = () => boolean;
 
+type IsMobileSafariOnIos26 = () => boolean;
+
 type OpenRouteInDesktopApp = (shortLivedAuthToken?: string, email?: string, initialRoute?: string) => void;
 
-export type {GetBrowser, IsMobile, IsMobileIOS, IsMobileSafari, IsMobileChrome, IsMobileWebKit, IsSafari, IsModernSafari, IsChromeIOS, OpenRouteInDesktopApp};
+export type {GetBrowser, IsMobile, IsMobileIOS, IsMobileSafari, IsMobileChrome, IsMobileWebKit, IsSafari, IsModernSafari, IsMobileSafariOnIos26, IsChromeIOS, OpenRouteInDesktopApp};

src/utils/keyboard/index.android.ts

@@ -15,6 +15,11 @@ Keyboard.addListener('keyboardDidShow', () => {
     isVisible = true;
 });
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => {
+    return () => {};
+};
+
 const dismiss = (): Promise<void> => {
     return new Promise((resolve) => {
         if (!isVisible) {
@@ -55,7 +60,7 @@ const dismissKeyboardAndExecute = (cb: () => void): Promise<void> => {
     });
 };
 
-const utils = {dismiss, dismissKeyboardAndExecute};
+const utils = {dismiss, dismissKeyboardAndExecute, subscribeKeyboardVisibilityChange};
 
 export type {SimplifiedKeyboardEvent};
 export default utils;

src/utils/keyboard/index.ts

@@ -14,6 +14,11 @@ Keyboard.addListener('keyboardDidShow', () => {
     isVisible = true;
 });
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => {
+    return () => {};
+};
+
 const dismiss = (): Promise<void> => {
     return new Promise((resolve) => {
         if (!isVisible) {
@@ -39,7 +44,7 @@ const dismissKeyboardAndExecute = (cb: () => void): Promise<void> => {
     });
 };
 
-const utils = {dismiss, dismissKeyboardAndExecute};
+const utils = {dismiss, dismissKeyboardAndExecute, subscribeKeyboardVisibilityChange};
 
 export type {SimplifiedKeyboardEvent};
 export default utils;

src/utils/keyboard/index.website.ts

@@ -5,6 +5,16 @@ import CONST from '@src/CONST';
 let isVisible = false;
 const initialViewportHeight = window?.visualViewport?.height;
 
+const keyboardVisibilityChangeListenersSet = new Set<(isVisible: boolean) => void>();
+
+const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => {
+    keyboardVisibilityChangeListenersSet.add(cb);
+
+    return () => {
+        keyboardVisibilityChangeListenersSet.delete(cb);
+    };
+};
+
 const handleResize = () => {
     const viewportHeight = window?.visualViewport?.height;
 
@@ -16,6 +26,8 @@ const handleResize = () => {
     // The 152px threshold accounts for UI elements such as smart banners on iOS Retina (max ~152px)
     // and smaller overlays like offline indicators on Android. Height differences > 152px reliably indicate keyboard visibility.
     isVisible = initialViewportHeight - viewportHeight > CONST.SMART_BANNER_HEIGHT;
+
+    keyboardVisibilityChangeListenersSet.forEach((cb) => cb(isVisible));
 };
 
 window.visualViewport?.addEventListener('resize', handleResize);
@@ -58,6 +70,6 @@ const dismissKeyboardAndExecute = (cb: () => void): Promise<void> => {
     });
 };
 
-const utils = {dismiss, dismissKeyboardAndExecute};
+const utils = {dismiss, dismissKeyboardAndExecute, subscribeKeyboardVisibilityChange};
 
 export default utils;