Refactor TransactionItemRow for better performance

src/components/Checkbox.tsx

@@ -53,6 +53,9 @@ type CheckboxProps = Partial<ChildrenProps> & {
 
     /** Whether the checkbox should be selected when pressing Enter key */
     shouldSelectOnPressEnter?: boolean;
+
+    /** Additional styles to add to checkbox wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 function Checkbox(
@@ -72,6 +75,7 @@ function Checkbox(
         accessibilityLabel,
         shouldStopMouseDownPropagation,
         shouldSelectOnPressEnter,
+        wrapperStyle,
     }: CheckboxProps,
     ref: ForwardedRef<View>,
 ) {
@@ -123,6 +127,7 @@ function Checkbox(
             aria-checked={isIndeterminate ? 'mixed' : isChecked}
             accessibilityLabel={accessibilityLabel}
             pressDimmingValue={1}
+            wrapperStyle={wrapperStyle}
         >
             {children ?? (
                 <View

src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

@@ -0,0 +1,61 @@
+import {useIsFocused} from '@react-navigation/native';
+import React from 'react';
+import {View} from 'react-native';
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
+import type * as OnyxTypes from '@src/types/onyx';
+
+type MoneyRequestReportTotalSpendProps = {
+    /** Report for which the total spend is being displayed */
+    report: OnyxTypes.Report;
+
+    /** Whether the report has any comments */
+    hasComments: boolean;
+
+    /** Whether the report is loading report actions */
+    isLoadingReportActions: boolean;
+
+    /** Whether the report has any transactions */
+    isEmptyTransactions: boolean;
+
+    /** The total display spend of the report */
+    totalDisplaySpend: number;
+
+    /** Whether the report has any pending actions */
+    hasPendingAction: boolean;
+};
+
+function MoneyRequestReportTotalSpend({hasComments, isLoadingReportActions, isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const isFocused = useIsFocused();
+
+    return (
+        <View style={[styles.dFlex, styles.flexRow, styles.ph5, styles.justifyContentBetween, styles.mb2]}>
+            <Animated.Text
+                style={[styles.textLabelSupporting]}
+                entering={hasComments ? undefined : FadeIn}
+                exiting={isFocused ? FadeOut : undefined}
+            >
+                {hasComments || isLoadingReportActions ? translate('common.comments') : ''}
+            </Animated.Text>
+            {!isEmptyTransactions && (
+                <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3]}>
+                    <Text style={[styles.mr3, styles.textLabelSupporting]}>{translate('common.total')}</Text>
+                    <Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, hasPendingAction && styles.opacitySemiTransparent]}>
+                        {convertToDisplayString(totalDisplaySpend, report?.currency)}
+                    </Text>
+                </View>
+            )}
+        </View>
+    );
+}
+
+MoneyRequestReportTotalSpend.displayName = 'MoneyRequestReportTotalSpend';
+
+export default MoneyRequestReportTotalSpend;

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -0,0 +1,145 @@
+import React, {useEffect, useRef} from 'react';
+import type {View} from 'react-native';
+import {getButtonRole} from '@components/Button/utils';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {PressableWithFeedback} from '@components/Pressable';
+import type {TableColumnSize} from '@components/Search/types';
+import TransactionItemRow from '@components/TransactionItemRow';
+import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen';
+import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type {TransactionWithOptionalHighlight} from './MoneyRequestReportTransactionList';
+
+const allReportColumns = [
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.RECEIPT,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TYPE,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.DATE,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.MERCHANT,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.CATEGORY,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TAG,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TOTAL_AMOUNT,
+];
+
+type MoneyRequestReportTransactionItemProps = {
+    /** The transaction that is being displayed */
+    transaction: TransactionWithOptionalHighlight;
+
+    /** Whether the mobile selection mode is enabled */
+    isSelectionModeEnabled: boolean;
+
+    /** Callback function triggered upon pressing a transaction checkbox. */
+    toggleTransaction: (transactionID: string) => void;
+
+    /** Callback function triggered upon pressing a transaction. */
+    handleOnPress: (transactionID: string) => void;
+
+    /** Callback function triggered upon long pressing a transaction. */
+    handleLongPress: (transactionID: string) => void;
+
+    /** Whether the transaction is selected */
+    isSelected: boolean;
+
+    /** The size of the date column */
+    dateColumnSize: TableColumnSize;
+
+    /** The size of the amount column */
+    amountColumnSize: TableColumnSize;
+
+    /** The size of the tax amount column */
+    taxAmountColumnSize: TableColumnSize;
+
+    /** Callback function that scrolls to this transaction in case it is newly added */
+    scrollToNewTransaction?: (offset: number) => void;
+};
+
+function MoneyRequestReportTransactionItem({
+    transaction,
+    isSelectionModeEnabled,
+    toggleTransaction,
+    isSelected,
+    handleOnPress,
+    handleLongPress,
+    dateColumnSize,
+    amountColumnSize,
+    taxAmountColumnSize,
+    scrollToNewTransaction,
+}: MoneyRequestReportTransactionItemProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const theme = useTheme();
+    const isPendingDelete = isTransactionPendingDelete(transaction);
+    const pendingAction = getTransactionPendingAction(transaction);
+
+    const viewRef = useRef<View>(null);
+
+    // This useEffect scrolls to this transaction when it is newly added to the report
+    useEffect(() => {
+        if (!transaction.shouldBeHighlighted || !scrollToNewTransaction) {
+            return;
+        }
+        viewRef?.current?.measure((x, y, width, height, pageX, pageY) => {
+            scrollToNewTransaction?.(pageY);
+        });
+    }, [scrollToNewTransaction, transaction.shouldBeHighlighted]);
+
+    const animatedHighlightStyle = useAnimatedHighlightStyle({
+        borderRadius: variables.componentBorderRadius,
+        shouldHighlight: transaction.shouldBeHighlighted ?? false,
+        highlightColor: theme.messageHighlightBG,
+        backgroundColor: theme.highlightBG,
+    });
+
+    return (
+        <OfflineWithFeedback pendingAction={pendingAction}>
+            <PressableWithFeedback
+                key={transaction.transactionID}
+                onPress={() => {
+                    handleOnPress(transaction.transactionID);
+                }}
+                accessibilityLabel={translate('iou.viewDetails')}
+                role={getButtonRole(true)}
+                isNested
+                id={transaction.transactionID}
+                style={[styles.transactionListItemStyle]}
+                hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
+                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => ControlSelection.unblock()}
+                onLongPress={() => {
+                    handleLongPress(transaction.transactionID);
+                }}
+                disabled={isTransactionPendingDelete(transaction)}
+                ref={viewRef}
+                wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]}
+            >
+                <TransactionItemRow
+                    transactionItem={transaction}
+                    isSelected={isSelected}
+                    dateColumnSize={dateColumnSize}
+                    amountColumnSize={amountColumnSize}
+                    taxAmountColumnSize={taxAmountColumnSize}
+                    shouldShowTooltip
+                    shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
+                    shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth}
+                    onCheckboxPress={toggleTransaction}
+                    columns={allReportColumns}
+                    isDisabled={isPendingDelete}
+                />
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
+    );
+}
+
+MoneyRequestReportTransactionItem.displayName = 'MoneyRequestReportTransactionItem';
+
+export default MoneyRequestReportTransactionItem;