Merge branch 'Expensify:main' into fix/90269

Author: truph01

Mobile-Expensify

@@ -111,8 +111,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009037100
-        versionName "9.3.71-0"
+        versionCode 1009037300
+        versionName "9.3.73-0"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

android/app/build.gradle

@@ -23,7 +23,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.3.71</string>
+	<string>9.3.73</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -44,7 +44,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.3.71.0</string>
+	<string>9.3.73.0</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NewExpensify/Info.plist

@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.3.71</string>
+	<string>9.3.73</string>
 	<key>CFBundleVersion</key>
-	<string>9.3.71.0</string>
+	<string>9.3.73.0</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

ios/NotificationServiceExtension/Info.plist

@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.3.71</string>
+	<string>9.3.73</string>
 	<key>CFBundleVersion</key>
-	<string>9.3.71.0</string>
+	<string>9.3.73.0</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionAttributes</key>

ios/ShareViewController/Info.plist

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.3.71-0",
+  "version": "9.3.73-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

package-lock.json

@@ -3,13 +3,15 @@ import React, {useEffect, useRef} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {useReanimatedKeyboardAnimation} from 'react-native-keyboard-controller';
 import Reanimated, {Easing, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import useDebounce from '@hooks/useDebounce';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import isInLandscapeModeUtil from '@libs/isInLandscapeMode';
 import type {CollapsibleHeaderOnKeyboardProps} from './types';
 
 const COLLAPSE_DURATION = 100;
 const RESTORE_DURATION = 300;
+const HEADER_CONTENT_LAYOUT_STABILIZATION_TIME_ON_ORIENTATION_CHANGE = 300;
 // Assumed vertical space for the focused input field — used to reserve space above the keyboard.
 const VERTICAL_SPACE_FOR_FOCUSED_INPUT = 120;
 const KEYBOARD_OPENING_PROGRESS_THRESHOLDS = [0.5, 0.7, 0.8, 0.85, 0.9, 0.95, 0.99];
@@ -60,12 +62,33 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
         isInLandscapeModeSV.set(isInLandscapeMode);
     }, [isInLandscapeMode, isInLandscapeModeSV]);
 
+    const debouncedUpdateNaturalHeightRef = useDebounce((height: number) => {
+        if (isInLandscapeMode) {
+            return;
+        }
+        naturalHeightRef.current = height;
+    }, HEADER_CONTENT_LAYOUT_STABILIZATION_TIME_ON_ORIENTATION_CHANGE);
+
     const onLayout = (e: LayoutChangeEvent) => {
         const height = e.nativeEvent.layout.height;
 
         if (height <= 0) {
             return;
         }
+
+        // Header re-measured in portrait mode and the content is taller than the previous measurement,
+        // set the natural height to the new height and animate the height to the new height.
+        // This can happen when header has different height on portrait and landscape mode.
+        if (!isInLandscapeMode && height > naturalHeightRef.current && naturalHeightRef.current !== -1) {
+            naturalHeight.set(height);
+            animatedHeight.set(withTiming(height, {duration: RESTORE_DURATION}));
+
+            // we need to debounce the update of the natural height ref to make sure we don't block height updates
+            // on landscape -> portrait mode change where header layout might not be stable at first.
+            debouncedUpdateNaturalHeightRef(height);
+            return;
+        }
+
         // First measurement, or content changed while header is fully open
         // (to skip onLayout calls triggered by our own height animation collapsing the view to 0)
         if (naturalHeightRef.current === -1 || animatedHeight.get() >= naturalHeightRef.current) {
@@ -77,19 +100,20 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
 
     // Restores the header when the screen goes from landscape to portrait mode.
     useEffect(() => {
-        const naturalHeightValue = naturalHeightRef.current;
+        const naturalHeightValue = naturalHeight.get();
         if (!isInLandscapeMode && isFocused && naturalHeightValue !== -1) {
             animatedHeight.set(withTiming(naturalHeightValue, {duration: RESTORE_DURATION}));
         }
-    }, [isInLandscapeMode, isFocused, animatedHeight]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isInLandscapeMode]);
 
     // Restores the header when the screen loses focus
     useEffect(() => {
         if (!prevIsFocused || isFocused) {
             return;
         }
 
-        const naturalHeightValue = naturalHeightRef.current;
+        const naturalHeightValue = naturalHeight.get();
         if (naturalHeightValue === -1) {
             return;
         }
@@ -159,7 +183,7 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
         // When fully open, leave height undefined so the view sizes itself naturally.
         // This avoids fighting the layout engine during orientation changes.
         if (animatedHeight.get() >= naturalHeight.get()) {
-            return {overflow: 'hidden'};
+            return {overflow: 'hidden', height: 'auto'};
         }
         return {height: animatedHeight.get(), overflow: 'hidden'};
     });

package.json

@@ -7,15 +7,15 @@ import {getDelegateAccountIDFromReportAction} from '@libs/ReportActionsUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 
-type OptionRowAvatarProps = {
+type AvatarProps = {
     optionItem: OptionData;
     isInFocusMode: boolean;
     subscriptAvatarBorderColor: ColorValue;
     secondaryAvatarBackgroundColor: ColorValue;
     singleAvatarContainerStyle: ViewStyle[];
 };
 
-function OptionRowAvatarInner({optionItem, isInFocusMode, subscriptAvatarBorderColor, secondaryAvatarBackgroundColor, singleAvatarContainerStyle}: OptionRowAvatarProps) {
+function AvatarInner({optionItem, isInFocusMode, subscriptAvatarBorderColor, secondaryAvatarBackgroundColor, singleAvatarContainerStyle}: AvatarProps) {
     const personalDetails = usePersonalDetails();
 
     const delegateAccountID = getDelegateAccountIDFromReportAction(optionItem?.parentReportAction);
@@ -64,15 +64,15 @@ function OptionRowAvatarInner({optionItem, isInFocusMode, subscriptAvatarBorderC
     );
 }
 
-OptionRowAvatarInner.displayName = 'OptionRowAvatarInner';
+AvatarInner.displayName = 'OptionRow.AvatarInner';
 
-function OptionRowAvatar({optionItem, isInFocusMode, subscriptAvatarBorderColor, secondaryAvatarBackgroundColor, singleAvatarContainerStyle}: OptionRowAvatarProps) {
+function Avatar({optionItem, isInFocusMode, subscriptAvatarBorderColor, secondaryAvatarBackgroundColor, singleAvatarContainerStyle}: AvatarProps) {
     // Bail out before subscribing to personal details when the row has no avatar to render.
     if (!optionItem.icons?.length || !optionItem.icons.at(0)) {
         return null;
     }
     return (
-        <OptionRowAvatarInner
+        <AvatarInner
             optionItem={optionItem}
             isInFocusMode={isInFocusMode}
             subscriptAvatarBorderColor={subscriptAvatarBorderColor}
@@ -82,6 +82,6 @@ function OptionRowAvatar({optionItem, isInFocusMode, subscriptAvatarBorderColor,
     );
 }
 
-OptionRowAvatar.displayName = 'OptionRowAvatar';
+Avatar.displayName = 'OptionRow.Avatar';
 
-export default OptionRowAvatar;
+export default Avatar;

src/components/CollapsibleHeaderOnKeyboard/index.native.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type {ReactNode} from 'react';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import type {OptionData} from '@libs/ReportUtils';
+
+type OfflineWrapperProps = {
+    /** Pending action forwarded to OfflineWithFeedback to drive opacity and strikethrough. */
+    pendingAction: OptionData['pendingAction'];
+
+    /** Errors forwarded to OfflineWithFeedback. Error messages themselves are hidden in the LHN. */
+    errors: OptionData['allReportErrors'];
+
+    /** Row content to wrap. */
+    children: ReactNode;
+};
+
+function OfflineWrapper({pendingAction, errors, children}: OfflineWrapperProps) {
+    return (
+        <OfflineWithFeedback
+            pendingAction={pendingAction}
+            errors={errors}
+            shouldShowErrorMessages={false}
+            needsOffscreenAlphaCompositing
+        >
+            {children}
+        </OfflineWithFeedback>
+    );
+}
+
+OfflineWrapper.displayName = 'OptionRow.OfflineWrapper';
+
+export default OfflineWrapper;