Merge pull request Expensify#63623 from nkdengineer/fix/55211

luacmartins · web-flow · commit 32abd07f20e2 · 2025-08-19T13:42:01.000-06:00
feat: update Search/Reports page immediately following report actions
diff --git a/patches/react-native-reanimated/details.md b/patches/react-native-reanimated/details.md
@@ -15,3 +15,10 @@
 - E/App issue: 🛑
 - PR Introducing Patch:  [NR 0.75 upgrade](https://github.com/Expensify/App/pull/45289)
 
+### [react-native-reanimated+3.19.1+003+correctly-handle-Easing.bezier.patch](react-native-reanimated+3.19.1+003+correctly-handle-Easing.bezier.patch)
+
+- Reason: The Easing.bezier animation doesn't work on web
+- Upstream PR/issue: https://github.com/software-mansion/react-native-reanimated/pull/8049
+- E/App issue: https://github.com/Expensify/App/pull/63623
+- PR Introducing Patch:  🛑
+
diff --git a/patches/react-native-reanimated/react-native-reanimated+3.19.1+003+correctly-handle-Easing.bezier.patch b/patches/react-native-reanimated/react-native-reanimated+3.19.1+003+correctly-handle-Easing.bezier.patch
@@ -0,0 +1,62 @@
+diff --git a/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/Easing.web.js b/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/Easing.web.js
+index ed0f9d3..6baf136 100644
+--- a/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/Easing.web.js
++++ b/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/Easing.web.js
+@@ -14,4 +14,18 @@ export const WebEasings = {
+ export function getEasingByName(easingName) {
+   return `cubic-bezier(${WebEasings[easingName].toString()})`;
+ }
+-//# sourceMappingURL=Easing.web.js.map
+\ No newline at end of file
++export function maybeGetBezierEasing(easing) {
++  if (!('factory' in easing)) {
++    return null;
++  }
++  const easingFactory = easing.factory;
++  if (!('__closure' in easingFactory)) {
++    return null;
++  }
++  const closure = easingFactory.__closure;
++  if (!('Bezier' in closure)) {
++    return null;
++  }
++  return `cubic-bezier(${closure.x1}, ${closure.y1}, ${closure.x2}, ${closure.y2})`;
++}
++
+diff --git a/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/componentUtils.js b/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/componentUtils.js
+index 7f724c4..ad53a74 100644
+--- a/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/componentUtils.js
++++ b/node_modules/react-native-reanimated/lib/module/layoutReanimation/web/componentUtils.js
+@@ -10,18 +10,28 @@ import { setElementPosition, snapshots } from "./componentStyle.js";
+ import { Animations, TransitionType } from "./config.js";
+ import { TransitionGenerator } from "./createAnimation.js";
+ import { scheduleAnimationCleanup } from "./domUtils.js";
+-import { getEasingByName, WebEasings } from "./Easing.web.js";
++import {
++  getEasingByName,
++  maybeGetBezierEasing,
++  WebEasings
++} from "./Easing.web.js";
+ import { prepareCurvedTransition } from "./transition/Curved.web.js";
+ function getEasingFromConfig(config) {
+   if (!config.easingV) {
+     return getEasingByName('linear');
+   }
+   const easingName = config.easingV[EasingNameSymbol];
+-  if (!(easingName in WebEasings)) {
+-    logger.warn(`Selected easing is not currently supported on web.`);
++  if (easingName in WebEasings) {
++    return getEasingByName(easingName);
++  }
++  const bezierEasing = maybeGetBezierEasing(config.easingV);
++  if (!bezierEasing) {
++    logger.warn(
++      `Selected easing is not currently supported on web. Using linear easing instead.`
++    );
+     return getEasingByName('linear');
+   }
+-  return getEasingByName(easingName);
++  return bezierEasing;
+ }
+ function getRandomDelay(maxDelay = 1000) {
+   return Math.floor(Math.random() * (maxDelay + 1)) / 1000;
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -6280,6 +6280,7 @@ const CONST = {
 
     SEARCH: {
         RESULTS_PAGE_SIZE: 50,
+        EXITING_ANIMATION_DURATION: 200,
         DATA_TYPES: {
             EXPENSE: 'expense',
             INVOICE: 'invoice',
diff --git a/src/components/Search/SearchList.tsx b/src/components/Search/SearchList.tsx
@@ -5,7 +5,7 @@ import React, {forwardRef, useCallback, useContext, useEffect, useImperativeHand
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import type {NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {Easing, FadeOutUp, LinearTransition} from 'react-native-reanimated';
 import Checkbox from '@components/Checkbox';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
@@ -25,6 +25,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -39,6 +40,8 @@ import {createItemHeightCalculator} from './itemHeightCalculator';
 import ITEM_HEIGHTS from './itemHeights';
 import type {SearchQueryJSON} from './types';
 
+const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0);
+
 const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListItem>);
 
 type SearchListItem = TransactionListItemType | TransactionGroupListItemType | ReportActionListItemType | TaskListItemType;
@@ -78,6 +81,9 @@ type SearchListProps = Pick<FlashListProps<SearchListItem>, 'onScroll' | 'conten
     /** Whether to prevent long press of options */
     shouldPreventLongPressRow?: boolean;
 
+    /** Whether to animate the items in the list */
+    shouldAnimate?: boolean;
+
     /** The search query */
     queryJSON: SearchQueryJSON;
 
@@ -127,6 +133,7 @@ function SearchList(
         queryJSON,
         onViewableItemsChanged,
         onLayout,
+        shouldAnimate,
         estimatedItemSize = ITEM_HEIGHTS.NARROW_WITHOUT_DRAWER.STANDARD,
         isMobileSelectionModeEnabled,
     }: SearchListProps,
@@ -163,6 +170,7 @@ function SearchList(
     const itemFocusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const {isKeyboardShown} = useKeyboardState();
     const {safeAreaPaddingBottomStyle} = useSafeAreaPaddings();
+    const prevDataLength = usePrevious(data.length);
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component
     // See https://github.com/Expensify/App/issues/48675 for more details
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
@@ -177,6 +185,7 @@ function SearchList(
 
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
 
+    const hasItemsBeingRemoved = prevDataLength && prevDataLength > data.length;
     const personalDetails = usePersonalDetails();
 
     const [userWalletTierName] = useOnyx(ONYXKEYS.USER_WALLET, {selector: (wallet) => wallet?.tierName, canBeMissing: false});
@@ -316,62 +325,72 @@ function SearchList(
             const isDisabled = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
             return (
-                <ListItem
-                    showTooltip
-                    isFocused={isItemFocused}
-                    onSelectRow={onSelectRow}
-                    onFocus={(event: NativeSyntheticEvent<ExtendedTargetedEvent>) => {
-                        // Prevent unexpected scrolling on mobile Chrome after the context menu closes by ignoring programmatic focus not triggered by direct user interaction.
-                        if (isMobileChrome() && event.nativeEvent) {
-                            if (!event.nativeEvent.sourceCapabilities) {
-                                return;
-                            }
-                            // Ignore the focus if it's caused by a touch event on mobile chrome.
-                            // For example, a long press will trigger a focus event on mobile chrome
-                            if (event.nativeEvent.sourceCapabilities.firesTouchEvents) {
-                                return;
+                <Animated.View
+                    exiting={shouldAnimate ? FadeOutUp.duration(CONST.SEARCH.EXITING_ANIMATION_DURATION).easing(easing) : undefined}
+                    entering={undefined}
+                    style={styles.overflowHidden}
+                    layout={shouldAnimate && hasItemsBeingRemoved ? LinearTransition.easing(easing).duration(CONST.SEARCH.EXITING_ANIMATION_DURATION) : undefined}
+                >
+                    <ListItem
+                        showTooltip
+                        isFocused={isItemFocused}
+                        onSelectRow={onSelectRow}
+                        onFocus={(event: NativeSyntheticEvent<ExtendedTargetedEvent>) => {
+                            // Prevent unexpected scrolling on mobile Chrome after the context menu closes by ignoring programmatic focus not triggered by direct user interaction.
+                            if (isMobileChrome() && event.nativeEvent) {
+                                if (!event.nativeEvent.sourceCapabilities) {
+                                    return;
+                                }
+                                // Ignore the focus if it's caused by a touch event on mobile chrome.
+                                // For example, a long press will trigger a focus event on mobile chrome
+                                if (event.nativeEvent.sourceCapabilities.firesTouchEvents) {
+                                    return;
+                                }
                             }
-                        }
-                        setFocusedIndex(index);
-                    }}
-                    onLongPressRow={handleLongPressRow}
-                    onCheckboxPress={onCheckboxPress}
-                    canSelectMultiple={canSelectMultiple}
-                    item={{
-                        shouldAnimateInHighlight: isItemHighlighted,
-                        ...item,
-                    }}
-                    shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
-                    queryJSONHash={hash}
-                    policies={policies}
-                    isDisabled={isDisabled}
-                    allReports={allReports}
-                    groupBy={groupBy}
-                    userWalletTierName={userWalletTierName}
-                    isUserValidated={isUserValidated}
-                    personalDetails={personalDetails}
-                    userBillingFundID={userBillingFundID}
-                />
+                            setFocusedIndex(index);
+                        }}
+                        onLongPressRow={handleLongPressRow}
+                        onCheckboxPress={onCheckboxPress}
+                        canSelectMultiple={canSelectMultiple}
+                        item={{
+                            shouldAnimateInHighlight: isItemHighlighted,
+                            ...item,
+                        }}
+                        shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                        queryJSONHash={hash}
+                        policies={policies}
+                        isDisabled={isDisabled}
+                        allReports={allReports}
+                        groupBy={groupBy}
+                        userWalletTierName={userWalletTierName}
+                        isUserValidated={isUserValidated}
+                        personalDetails={personalDetails}
+                        userBillingFundID={userBillingFundID}
+                    />
+                </Animated.View>
             );
         },
         [
-            ListItem,
-            canSelectMultiple,
             focusedIndex,
             itemsToHighlight,
+            shouldAnimate,
+            styles.overflowHidden,
+            hasItemsBeingRemoved,
+            ListItem,
+            onSelectRow,
             handleLongPressRow,
             onCheckboxPress,
-            onSelectRow,
-            policies,
-            hash,
-            groupBy,
-            setFocusedIndex,
+            canSelectMultiple,
             shouldPreventDefaultFocusOnSelectRow,
+            hash,
+            policies,
             allReports,
+            groupBy,
             userWalletTierName,
             isUserValidated,
             personalDetails,
             userBillingFundID,
+            setFocusedIndex,
         ],
     );
 
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -813,6 +813,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
                 onViewableItemsChanged={onViewableItemsChanged}
                 onLayout={onLayout}
                 isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
+                shouldAnimate={type === CONST.SEARCH.DATA_TYPES.EXPENSE}
             />
         </SearchScopeProvider>
     );
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
