From 780477c067a00c8b2224671bf8fce05205a8c170 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Mon, 12 Jun 2023 06:53:22 -0600
Subject: [PATCH 01/17] Make part of MoneyRequestHeader scrollable, the top of
 the header stays fixed, the other part is moved as a footer of the
 InvertedFlatList which makes it a header

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/MoneyRequestHeader.js       |  36 ++----
 src/components/MoneyRequestTopHeader.js    | 121 +++++++++++++++++++++
 src/pages/home/ReportScreen.js             |   4 +-
 src/pages/home/report/ReportActionsList.js |  30 ++++-
 src/pages/home/report/ReportActionsView.js |   1 +
 src/styles/styles.js                       |   4 +
 src/styles/utilities/spacing.js            |   4 +
 7 files changed, 170 insertions(+), 30 deletions(-)
 create mode 100644 src/components/MoneyRequestTopHeader.js

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 600a96aede18..7df7fd3f42c0 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -36,11 +36,14 @@ const propTypes = {
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 
-    /** The policies which the user has access to and which the report could be tied to */
-    policies: PropTypes.shape({
-        /** Name of the policy */
+    /** The policy object for the current route */
+    policy: PropTypes.shape({
+        /** The name of the policy */
         name: PropTypes.string,
-    }).isRequired,
+
+        /** The URL for the policy avatar */
+        avatar: PropTypes.string,
+    }),
 
     /** The chat report this report is linked to */
     chatReport: reportPropTypes,
@@ -80,37 +83,18 @@ const MoneyRequestHeader = (props) => {
     const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport);
-    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail);
+    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail);
     const payeeAvatar = isExpenseReport
         ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
         : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail);
-    const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
+    
     const isPayer =
-        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
+        Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
     const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'payPalMeAddress']));
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-            <HeaderWithBackButton
-                shouldShowAvatarWithDisplay
-                shouldShowPinButton={props.isSingleTransactionView}
-                shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
-                threeDotsMenuItems={[
-                    {
-                        icon: Expensicons.Trashcan,
-                        text: props.translate('common.delete'),
-                        onSelected: () => {},
-                    },
-                ]}
-                threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
-                report={props.report}
-                parentReport={moneyRequestReport}
-                policies={props.policies}
-                personalDetails={props.personalDetails}
-                shouldShowBackButton={props.isSmallScreenWidth}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
-            />
             <View style={[styles.ph5, styles.pb2]}>
                 <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
diff --git a/src/components/MoneyRequestTopHeader.js b/src/components/MoneyRequestTopHeader.js
new file mode 100644
index 000000000000..5513775089d8
--- /dev/null
+++ b/src/components/MoneyRequestTopHeader.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import iouReportPropTypes from '../pages/iouReportPropTypes';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import * as ReportUtils from '../libs/ReportUtils';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+import participantPropTypes from './participantPropTypes';
+import Avatar from './Avatar';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import CONST from '../CONST';
+import withWindowDimensions from './withWindowDimensions';
+import compose from '../libs/compose';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Icon from './Icon';
+import SettlementButton from './SettlementButton';
+import * as Policy from '../libs/actions/Policy';
+import ONYXKEYS from '../ONYXKEYS';
+import * as IOU from '../libs/actions/IOU';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import DateUtils from '../libs/DateUtils';
+import reportPropTypes from '../pages/reportPropTypes';
+import * as UserUtils from '../libs/UserUtils';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: iouReportPropTypes.isRequired,
+
+    /** The expense report or iou report (only will have a value if this is a transaction thread) */
+    parentReport: iouReportPropTypes,
+
+    /** The policies which the user has access to */
+    policies: PropTypes.objectOf(
+        PropTypes.shape({
+            /** The policy name */
+            name: PropTypes.string,
+
+            /** The type of the policy */
+            type: PropTypes.string,
+        }),
+    ),
+
+
+    /** Personal details so we can get the ones for the report participants */
+    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
+
+    /** Whether we're viewing a report with a single transaction in it */
+    isSingleTransactionView: PropTypes.bool,
+
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user email */
+        email: PropTypes.string,
+    }),
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    isSingleTransactionView: false,
+    session: {
+        email: null,
+    },
+    parentReport: {},
+};
+
+const MoneyRequestTopHeader = (props) => {
+    const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
+    const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
+    const isPayer =
+        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
+    return (
+        <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
+            
+                <HeaderWithBackButton
+                    shouldShowAvatarWithDisplay
+                    shouldShowPinButton={props.isSingleTransactionView}
+                    shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
+                    threeDotsMenuItems={[
+                        {
+                            icon: Expensicons.Trashcan,
+                            text: props.translate('common.delete'),
+                            onSelected: () => {},
+                        },
+                    ]}
+                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
+                    report={props.report}
+                    parentReport={moneyRequestReport}
+                    policies={props.policies}
+                    personalDetails={props.personalDetails}
+                    shouldShowBackButton={props.isSmallScreenWidth}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
+                />
+        </View>
+    );
+};
+
+MoneyRequestTopHeader.displayName = 'MoneyRequestTopHeader';
+MoneyRequestTopHeader.propTypes = propTypes;
+MoneyRequestTopHeader.defaultProps = defaultProps;
+
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withOnyx({
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+        parentReport: {
+            key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`,
+        },
+    }),
+)(MoneyRequestTopHeader);
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 652ea5eb5d2c..5fa8c622c665 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -36,7 +36,7 @@ import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible';
 import EmojiPicker from '../../components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
 import TaskHeader from '../../components/TaskHeader';
-import MoneyRequestHeader from '../../components/MoneyRequestHeader';
+import MoneyRequestTopHeader from '../../components/MoneyRequestTopHeader';
 import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
 
@@ -263,7 +263,7 @@ class ReportScreen extends React.Component {
                         shouldShowErrorMessages={false}
                     >
                         {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? (
-                            <MoneyRequestHeader
+                            <MoneyRequestTopHeader
                                 report={this.props.report}
                                 policies={this.props.policies}
                                 personalDetails={this.props.personalDetails}
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index edbfcc7eee47..bf812cbddb9b 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -21,6 +21,7 @@ import CONST from '../../../CONST';
 import reportPropTypes from '../../reportPropTypes';
 import networkPropTypes from '../../../components/networkPropTypes';
 import withLocalize from '../../../components/withLocalize';
+import MoneyRequestHeader from '../../../components/MoneyRequestHeader';
 
 const propTypes = {
     /** Position of the "New" line marker */
@@ -53,6 +54,15 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** The policy object for the current route */
+    policy: PropTypes.shape({
+        /** The name of the policy */
+        name: PropTypes.string,
+
+        /** The URL for the policy avatar */
+        avatar: PropTypes.string,
+    }),
+
     ...windowDimensionsPropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
 };
@@ -148,6 +158,10 @@ const ReportActionsList = (props) => {
     // To notify there something changes we can use extraData prop to flatlist
     const extraData = [props.isSmallScreenWidth ? props.newMarkerReportActionID : undefined, ReportUtils.isArchivedRoom(props.report)];
     const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(props.personalDetails, props.report, props.currentUserPersonalDetails.login);
+
+    const parentReportAction = ReportActionsUtils.getParentReportAction(props.report);
+    const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction);
+    const showMoneyRequestHeader = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView;
     return (
         <Animated.View style={[animatedStyles, styles.flex1]}>
             <InvertedFlatList
@@ -155,12 +169,14 @@ const ReportActionsList = (props) => {
                 ref={ReportScrollManager.flatListRef}
                 data={props.sortedReportActions}
                 renderItem={renderItem}
-                contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0]}
+                contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0, showMoneyRequestHeader && styles.pb0]}
                 keyExtractor={keyExtractor}
                 initialRowHeight={32}
                 initialNumToRender={calculateInitialNumToRender()}
                 onEndReached={props.loadMoreChats}
                 onEndReachedThreshold={0.75}
+                ListFooterComponentStyle={showMoneyRequestHeader && styles.chatFooterAtTheTop}
+               
                 ListFooterComponent={() => {
                     if (props.report.isLoadingMoreReportActions) {
                         return <ReportActionsSkeletonView containerHeight={CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT * 3} />;
@@ -178,7 +194,17 @@ const ReportActionsList = (props) => {
                             />
                         );
                     }
-
+                    if(showMoneyRequestHeader) {
+                        return (
+                            <MoneyRequestHeader
+                                report={props.report}
+                                policy={props.policy}
+                                personalDetails={props.personalDetails}
+                                isSingleTransactionView={isSingleTransactionView}
+                                parentReportAction={parentReportAction}
+                            />
+                        );
+                    }
                     return null;
                 }}
                 keyboardShouldPersistTaps="handled"
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 6c7cf10da781..ce377f4ecf1d 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -352,6 +352,7 @@ class ReportActionsView extends React.Component {
                     isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
                     loadMoreChats={this.loadMoreChats}
                     newMarkerReportActionID={this.state.newMarkerReportActionID}
+                    policy={this.props.policy}
                 />
                 <PopoverReactionList
                     ref={ReactionList.reactionListRef}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1144e27412a8..a946466ca1ee 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1577,6 +1577,10 @@ const styles = {
     chatItemReactionsDraftRight: {
         marginLeft: 52,
     },
+    chatFooterAtTheTop : {
+        flexGrow: 1,
+        justifyContent: 'flex-start',
+    },
 
     // Be extremely careful when editing the compose styles, as it is easy to introduce regressions.
     // Make sure you run the following tests against any changes: #12669
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index e1cbb7e42469..96eb885a0176 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -422,6 +422,10 @@ export default {
         paddingTop: 80,
     },
 
+    pb0: {
+        paddingBottom: 0,
+    },
+
     pb1: {
         paddingBottom: 4,
     },

From bc80a96530105c99daefaa7cc3a97f436d9bcd57 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Tue, 20 Jun 2023 08:53:41 -0600
Subject: [PATCH 02/17] ListFooterComponentStyle was overwritten so the header
 was at the bottom

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/InvertedFlatList/index.android.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index 287a5975df9f..812267c1ed08 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -19,7 +19,7 @@ export default forwardRef((props, ref) => (
         // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13
         inverted={false}
         style={styles.invert}
-        ListFooterComponentStyle={styles.invert}
+        ListFooterComponentStyle={[styles.invert, props.ListFooterComponentStyle]}
         verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position
         CellRendererComponent={InvertedCell}
     />

From 367261d85b4bc08febcdbf392ef7706d2d817fa6 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Tue, 20 Jun 2023 09:59:32 -0600
Subject: [PATCH 03/17] Merge was wrong, it looks like we use the Id now
 instead of the email

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/MoneyRequestHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index f792fc9bf589..aadd716d0ae8 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -83,7 +83,7 @@ function MoneyRequestHeader(props) {
     const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport);
-    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail);
+    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID);
     const payeeAvatar = isExpenseReport
         ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
         : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID);

From 7bab3f14cc86ed9f111fd5afc91490d566958e79 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 17:08:24 -0600
Subject: [PATCH 04/17] Another problem with the merge, we use the id now

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/MoneyRequestHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index aadd716d0ae8..b6aeb3e1386e 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -88,7 +88,7 @@ function MoneyRequestHeader(props) {
         ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
         : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID);
     const isPayer =
-        Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
+        Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
     const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));

From f60c83c4be9e240d6e5aea9c4994b6dcd8d7fcac Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 17:28:13 -0600
Subject: [PATCH 05/17] Changing names of files

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/MoneyRequestDetails.js      | 215 +++++++++++++++++++++
 src/components/MoneyRequestHeader.js       | 160 ++++-----------
 src/components/MoneyRequestTopHeader.js    | 121 ------------
 src/pages/home/ReportScreen.js             |   2 +-
 src/pages/home/report/ReportActionsList.js |  12 +-
 5 files changed, 255 insertions(+), 255 deletions(-)
 create mode 100644 src/components/MoneyRequestDetails.js
 delete mode 100644 src/components/MoneyRequestTopHeader.js

diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js
new file mode 100644
index 000000000000..d79fefabdf42
--- /dev/null
+++ b/src/components/MoneyRequestDetails.js
@@ -0,0 +1,215 @@
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import iouReportPropTypes from '../pages/iouReportPropTypes';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import * as ReportUtils from '../libs/ReportUtils';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+import participantPropTypes from './participantPropTypes';
+import Avatar from './Avatar';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import CONST from '../CONST';
+import withWindowDimensions from './withWindowDimensions';
+import compose from '../libs/compose';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Icon from './Icon';
+import SettlementButton from './SettlementButton';
+import * as Policy from '../libs/actions/Policy';
+import ONYXKEYS from '../ONYXKEYS';
+import * as IOU from '../libs/actions/IOU';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import DateUtils from '../libs/DateUtils';
+import reportPropTypes from '../pages/reportPropTypes';
+import * as UserUtils from '../libs/UserUtils';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: iouReportPropTypes.isRequired,
+
+    /** The expense report or iou report (only will have a value if this is a transaction thread) */
+    parentReport: iouReportPropTypes,
+
+    /** The policy object for the current route */
+    policy: PropTypes.shape({
+        /** The name of the policy */
+        name: PropTypes.string,
+
+        /** The URL for the policy avatar */
+        avatar: PropTypes.string,
+    }),
+
+    /** The chat report this report is linked to */
+    chatReport: reportPropTypes,
+
+    /** Personal details so we can get the ones for the report participants */
+    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
+
+    /** Whether we're viewing a report with a single transaction in it */
+    isSingleTransactionView: PropTypes.bool,
+
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user email */
+        email: PropTypes.string,
+    }),
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    isSingleTransactionView: false,
+    chatReport: {},
+    session: {
+        email: null,
+    },
+    parentReport: {},
+};
+
+function MoneyRequestHeader(props) {
+    // These are only used for the single transaction view and not for expense and iou reports
+    const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction);
+    const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
+    const transactionDate = lodashGet(props.parentReportAction, ['created']);
+    const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate);
+
+    const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
+    const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
+    const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport);
+    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID);
+    const payeeAvatar = isExpenseReport
+        ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
+        : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID);
+    const isPayer =
+        Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
+    const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
+    const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
+    const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));
+    return (
+        <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
+            <View style={[styles.ph5, styles.pb2]}>
+                <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        <Avatar
+                            source={payeeAvatar}
+                            type={isExpenseReport ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR}
+                            name={payeeName}
+                            size={CONST.AVATAR_SIZE.DEFAULT}
+                        />
+                        <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
+                            <Text
+                                style={[styles.headerText, styles.pre]}
+                                numberOfLines={1}
+                            >
+                                {payeeName}
+                            </Text>
+                            {isExpenseReport && (
+                                <Text
+                                    style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                    numberOfLines={1}
+                                >
+                                    {props.translate('workspace.common.workspace')}
+                                </Text>
+                            )}
+                        </View>
+                    </View>
+                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                        {!props.isSingleTransactionView && <Text style={[styles.newKansasLarge]}>{formattedAmount}</Text>}
+                        {!props.isSingleTransactionView && isSettled && (
+                            <View style={styles.defaultCheckmarkWrapper}>
+                                <Icon
+                                    src={Expensicons.Checkmark}
+                                    fill={themeColors.iconSuccessFill}
+                                />
+                            </View>
+                        )}
+                        {shouldShowSettlementButton && !props.isSmallScreenWidth && (
+                            <View style={[styles.ml4]}>
+                                <SettlementButton
+                                    currency={props.report.currency}
+                                    policyID={props.report.policyID}
+                                    shouldShowPaypal={shouldShowPaypal}
+                                    chatReportID={props.chatReport.reportID}
+                                    iouReport={props.report}
+                                    onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
+                                    enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
+                                    addBankAccountRoute={bankAccountRoute}
+                                    shouldShowPaymentOptions
+                                />
+                            </View>
+                        )}
+                    </View>
+                </View>
+                {shouldShowSettlementButton && props.isSmallScreenWidth && (
+                    <SettlementButton
+                        currency={props.report.currency}
+                        policyID={props.report.policyID}
+                        shouldShowPaypal={shouldShowPaypal}
+                        chatReportID={props.report.chatReportID}
+                        iouReport={props.report}
+                        onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
+                        enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
+                        addBankAccountRoute={bankAccountRoute}
+                        shouldShowPaymentOptions
+                    />
+                )}
+            </View>
+            {props.isSingleTransactionView && (
+                <>
+                    <MenuItemWithTopDescription
+                        title={formattedTransactionAmount}
+                        shouldShowTitleIcon={isSettled}
+                        titleIcon={Expensicons.Checkmark}
+                        description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`}
+                        titleStyle={styles.newKansasLarge}
+                        disabled={isSettled}
+                        // Note: These options are temporarily disabled while we figure out the required API changes
+                        // shouldShowRightIcon={!isSettled}
+                        // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
+                    />
+                    <MenuItemWithTopDescription
+                        description={props.translate('common.description')}
+                        title={transactionDescription}
+                        disabled={isSettled}
+                        // shouldShowRightIcon={!isSettled}
+                        // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
+                    />
+                    <MenuItemWithTopDescription
+                        description={props.translate('common.date')}
+                        title={formattedTransactionDate}
+                        // shouldShowRightIcon={!isSettled}
+                        // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
+                    />
+                </>
+            )}
+        </View>
+    );
+}
+
+MoneyRequestHeader.displayName = 'MoneyRequestHeader';
+MoneyRequestHeader.propTypes = propTypes;
+MoneyRequestHeader.defaultProps = defaultProps;
+
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withOnyx({
+        chatReport: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+        parentReport: {
+            key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`,
+        },
+    }),
+)(MoneyRequestHeader);
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index d79fefabdf42..ca755431ad03 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -36,17 +36,17 @@ const propTypes = {
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 
-    /** The policy object for the current route */
-    policy: PropTypes.shape({
-        /** The name of the policy */
-        name: PropTypes.string,
+    /** The policies which the user has access to */
+    policies: PropTypes.objectOf(
+        PropTypes.shape({
+            /** The policy name */
+            name: PropTypes.string,
 
-        /** The URL for the policy avatar */
-        avatar: PropTypes.string,
-    }),
+            /** The type of the policy */
+            type: PropTypes.string,
+        }),
+    ),
 
-    /** The chat report this report is linked to */
-    chatReport: reportPropTypes,
 
     /** Personal details so we can get the ones for the report participants */
     personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
@@ -65,134 +65,43 @@ const propTypes = {
 
 const defaultProps = {
     isSingleTransactionView: false,
-    chatReport: {},
     session: {
         email: null,
     },
     parentReport: {},
 };
 
-function MoneyRequestHeader(props) {
-    // These are only used for the single transaction view and not for expense and iou reports
-    const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction);
-    const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
-    const transactionDate = lodashGet(props.parentReportAction, ['created']);
-    const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate);
-
-    const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
+const MoneyRequestHeader = (props) => {
     const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
-    const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport);
-    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerID);
-    const payeeAvatar = isExpenseReport
-        ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
-        : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID);
+    const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
     const isPayer =
-        Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
-    const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
-    const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
-    const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));
+        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-            <View style={[styles.ph5, styles.pb2]}>
-                <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
-                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                        <Avatar
-                            source={payeeAvatar}
-                            type={isExpenseReport ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR}
-                            name={payeeName}
-                            size={CONST.AVATAR_SIZE.DEFAULT}
-                        />
-                        <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
-                            <Text
-                                style={[styles.headerText, styles.pre]}
-                                numberOfLines={1}
-                            >
-                                {payeeName}
-                            </Text>
-                            {isExpenseReport && (
-                                <Text
-                                    style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
-                                    numberOfLines={1}
-                                >
-                                    {props.translate('workspace.common.workspace')}
-                                </Text>
-                            )}
-                        </View>
-                    </View>
-                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                        {!props.isSingleTransactionView && <Text style={[styles.newKansasLarge]}>{formattedAmount}</Text>}
-                        {!props.isSingleTransactionView && isSettled && (
-                            <View style={styles.defaultCheckmarkWrapper}>
-                                <Icon
-                                    src={Expensicons.Checkmark}
-                                    fill={themeColors.iconSuccessFill}
-                                />
-                            </View>
-                        )}
-                        {shouldShowSettlementButton && !props.isSmallScreenWidth && (
-                            <View style={[styles.ml4]}>
-                                <SettlementButton
-                                    currency={props.report.currency}
-                                    policyID={props.report.policyID}
-                                    shouldShowPaypal={shouldShowPaypal}
-                                    chatReportID={props.chatReport.reportID}
-                                    iouReport={props.report}
-                                    onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
-                                    enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
-                                    addBankAccountRoute={bankAccountRoute}
-                                    shouldShowPaymentOptions
-                                />
-                            </View>
-                        )}
-                    </View>
-                </View>
-                {shouldShowSettlementButton && props.isSmallScreenWidth && (
-                    <SettlementButton
-                        currency={props.report.currency}
-                        policyID={props.report.policyID}
-                        shouldShowPaypal={shouldShowPaypal}
-                        chatReportID={props.report.chatReportID}
-                        iouReport={props.report}
-                        onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
-                        enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
-                        addBankAccountRoute={bankAccountRoute}
-                        shouldShowPaymentOptions
-                    />
-                )}
-            </View>
-            {props.isSingleTransactionView && (
-                <>
-                    <MenuItemWithTopDescription
-                        title={formattedTransactionAmount}
-                        shouldShowTitleIcon={isSettled}
-                        titleIcon={Expensicons.Checkmark}
-                        description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`}
-                        titleStyle={styles.newKansasLarge}
-                        disabled={isSettled}
-                        // Note: These options are temporarily disabled while we figure out the required API changes
-                        // shouldShowRightIcon={!isSettled}
-                        // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
-                    />
-                    <MenuItemWithTopDescription
-                        description={props.translate('common.description')}
-                        title={transactionDescription}
-                        disabled={isSettled}
-                        // shouldShowRightIcon={!isSettled}
-                        // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
-                    />
-                    <MenuItemWithTopDescription
-                        description={props.translate('common.date')}
-                        title={formattedTransactionDate}
-                        // shouldShowRightIcon={!isSettled}
-                        // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
-                    />
-                </>
-            )}
+            
+                <HeaderWithBackButton
+                    shouldShowAvatarWithDisplay
+                    shouldShowPinButton={props.isSingleTransactionView}
+                    shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
+                    threeDotsMenuItems={[
+                        {
+                            icon: Expensicons.Trashcan,
+                            text: props.translate('common.delete'),
+                            onSelected: () => {},
+                        },
+                    ]}
+                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
+                    report={props.report}
+                    parentReport={moneyRequestReport}
+                    policies={props.policies}
+                    personalDetails={props.personalDetails}
+                    shouldShowBackButton={props.isSmallScreenWidth}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
+                />
         </View>
     );
-}
+};
 
 MoneyRequestHeader.displayName = 'MoneyRequestHeader';
 MoneyRequestHeader.propTypes = propTypes;
@@ -202,9 +111,6 @@ export default compose(
     withWindowDimensions,
     withLocalize,
     withOnyx({
-        chatReport: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/src/components/MoneyRequestTopHeader.js b/src/components/MoneyRequestTopHeader.js
deleted file mode 100644
index 5513775089d8..000000000000
--- a/src/components/MoneyRequestTopHeader.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import HeaderWithBackButton from './HeaderWithBackButton';
-import iouReportPropTypes from '../pages/iouReportPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-import participantPropTypes from './participantPropTypes';
-import Avatar from './Avatar';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import withWindowDimensions from './withWindowDimensions';
-import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import Icon from './Icon';
-import SettlementButton from './SettlementButton';
-import * as Policy from '../libs/actions/Policy';
-import ONYXKEYS from '../ONYXKEYS';
-import * as IOU from '../libs/actions/IOU';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import DateUtils from '../libs/DateUtils';
-import reportPropTypes from '../pages/reportPropTypes';
-import * as UserUtils from '../libs/UserUtils';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: iouReportPropTypes.isRequired,
-
-    /** The expense report or iou report (only will have a value if this is a transaction thread) */
-    parentReport: iouReportPropTypes,
-
-    /** The policies which the user has access to */
-    policies: PropTypes.objectOf(
-        PropTypes.shape({
-            /** The policy name */
-            name: PropTypes.string,
-
-            /** The type of the policy */
-            type: PropTypes.string,
-        }),
-    ),
-
-
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
-    /** Whether we're viewing a report with a single transaction in it */
-    isSingleTransactionView: PropTypes.bool,
-
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user email */
-        email: PropTypes.string,
-    }),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    isSingleTransactionView: false,
-    session: {
-        email: null,
-    },
-    parentReport: {},
-};
-
-const MoneyRequestTopHeader = (props) => {
-    const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
-    const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
-    const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
-    const isPayer =
-        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
-    return (
-        <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-            
-                <HeaderWithBackButton
-                    shouldShowAvatarWithDisplay
-                    shouldShowPinButton={props.isSingleTransactionView}
-                    shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
-                    threeDotsMenuItems={[
-                        {
-                            icon: Expensicons.Trashcan,
-                            text: props.translate('common.delete'),
-                            onSelected: () => {},
-                        },
-                    ]}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
-                    report={props.report}
-                    parentReport={moneyRequestReport}
-                    policies={props.policies}
-                    personalDetails={props.personalDetails}
-                    shouldShowBackButton={props.isSmallScreenWidth}
-                    onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
-                />
-        </View>
-    );
-};
-
-MoneyRequestTopHeader.displayName = 'MoneyRequestTopHeader';
-MoneyRequestTopHeader.propTypes = propTypes;
-MoneyRequestTopHeader.defaultProps = defaultProps;
-
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        parentReport: {
-            key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`,
-        },
-    }),
-)(MoneyRequestTopHeader);
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index f227012cbb28..384e7bf948df 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -36,7 +36,7 @@ import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible';
 import EmojiPicker from '../../components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
 import TaskHeader from '../../components/TaskHeader';
-import MoneyRequestTopHeader from '../../components/MoneyRequestTopHeader';
+import MoneyRequestHeader from '../../components/MoneyRequestHeader';
 import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
 import ReportScreenContext from './ReportScreenContext';
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 6b77fe5d6c10..cf74e6e51581 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -21,7 +21,7 @@ import reportPropTypes from '../../reportPropTypes';
 import networkPropTypes from '../../../components/networkPropTypes';
 import withLocalize from '../../../components/withLocalize';
 import useReportScrollManager from '../../../hooks/useReportScrollManager';
-import MoneyRequestHeader from '../../../components/MoneyRequestHeader';
+import MoneyRequestDetails from '../../../components/MoneyRequestDetails';
 
 const propTypes = {
     /** Position of the "New" line marker */
@@ -162,7 +162,7 @@ function ReportActionsList(props) {
 
     const parentReportAction = ReportActionsUtils.getParentReportAction(props.report);
     const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction);
-    const showMoneyRequestHeader = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView;
+    const showMoneyRequestDetails = ReportUtils.isMoneyRequestReport(props.report) || isSingleTransactionView;
     return (
         <Animated.View style={[animatedStyles, styles.flex1]}>
             <InvertedFlatList
@@ -170,13 +170,13 @@ function ReportActionsList(props) {
                 ref={reportScrollManager.ref}
                 data={props.sortedReportActions}
                 renderItem={renderItem}
-                contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0, showMoneyRequestHeader && styles.pb0]}
+                contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0, showMoneyRequestDetails && styles.pb0]}
                 keyExtractor={keyExtractor}
                 initialRowHeight={32}
                 initialNumToRender={calculateInitialNumToRender()}
                 onEndReached={props.loadMoreChats}
                 onEndReachedThreshold={0.75}
-                ListFooterComponentStyle={showMoneyRequestHeader && styles.chatFooterAtTheTop}
+                ListFooterComponentStyle={showMoneyRequestDetails && styles.chatFooterAtTheTop}
                
                 ListFooterComponent={() => {
                     if (props.report.isLoadingMoreReportActions) {
@@ -195,9 +195,9 @@ function ReportActionsList(props) {
                             />
                         );
                     }
-                    if(showMoneyRequestHeader) {
+                    if(showMoneyRequestDetails) {
                         return (
-                            <MoneyRequestHeader
+                            <MoneyRequestDetails
                                 report={props.report}
                                 policy={props.policy}
                                 personalDetails={props.personalDetailsList}

From bce157a0275cac793015cbf1dae2c4cac2c1a994 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 17:45:25 -0600
Subject: [PATCH 06/17] Fix problem with merging

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/pages/home/ReportScreen.js             | 2 +-
 src/pages/home/report/ReportActionsView.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 384e7bf948df..de274b0591c7 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -348,7 +348,7 @@ class ReportScreen extends React.Component {
                                         report={this.props.report}
                                         isComposerFullSize={this.props.isComposerFullSize}
                                         onSubmitComment={this.onSubmitComment}
-                                        policies={this.props.policies}
+                                        policy={policy}
                                     />
                                 </>
                             )}
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index cad34e5aa58b..b4a19554f9d8 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -353,7 +353,7 @@ class ReportActionsView extends React.Component {
                     isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
                     loadMoreChats={this.loadMoreChats}
                     newMarkerReportActionID={this.state.newMarkerReportActionID}
-                	policy={this.props.policy}
+                    policy={this.props.policy}
                 />
 
                 <PopoverReactionList

From 89cedaf82c9e55cd9c06cbd35452d9c60df062d0 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 17:54:35 -0600
Subject: [PATCH 07/17] Fixing the merge again

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/pages/home/ReportScreen.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index de274b0591c7..b97c14b5106f 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -328,7 +328,7 @@ class ReportScreen extends React.Component {
                                     report={this.props.report}
                                     isComposerFullSize={this.props.isComposerFullSize}
                                     parentViewHeight={this.state.skeletonViewContainerHeight}
-                                    policies={this.props.policies}
+                                    policy={policy}
                                 />
                             )}
 
@@ -348,7 +348,7 @@ class ReportScreen extends React.Component {
                                         report={this.props.report}
                                         isComposerFullSize={this.props.isComposerFullSize}
                                         onSubmitComment={this.onSubmitComment}
-                                        policy={policy}
+                                        policies={this.props.policies}
                                     />
                                 </>
                             )}

From 1c0af6e3efd0d977ad74a19317d6245e74aab6ea Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 17:59:12 -0600
Subject: [PATCH 08/17] I changed that but I don't know why so I changed it
 back

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/MoneyRequestHeader.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index ca755431ad03..487579e732c9 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -36,17 +36,11 @@ const propTypes = {
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 
-    /** The policies which the user has access to */
-    policies: PropTypes.objectOf(
-        PropTypes.shape({
-            /** The policy name */
-            name: PropTypes.string,
-
-            /** The type of the policy */
-            type: PropTypes.string,
-        }),
-    ),
-
+    /** The policies which the user has access to and which the report could be tied to */
+    policies: PropTypes.shape({
+        /** Name of the policy */
+        name: PropTypes.string,
+    }).isRequired,
 
     /** Personal details so we can get the ones for the report participants */
     personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,

From 6b961a1963df63272e0f06c43442bed191ac013a Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 18:25:40 -0600
Subject: [PATCH 09/17] Correct one lint error

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/pages/home/report/ReportActionsList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index cf74e6e51581..f9e62d17e691 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -195,7 +195,7 @@ function ReportActionsList(props) {
                             />
                         );
                     }
-                    if(showMoneyRequestDetails) {
+                    if (showMoneyRequestDetails) {
                         return (
                             <MoneyRequestDetails
                                 report={props.report}

From fc5b73a403a073298c5b9c63d4e745e24f9d5827 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 18:56:54 -0600
Subject: [PATCH 10/17] Correct Lint errors

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/InvertedFlatList/index.android.js | 10 ++++++++++
 src/components/MoneyRequestDetails.js            | 13 ++++++-------
 src/components/MoneyRequestHeader.js             |  6 ------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index a7f86c808c1a..ada6670acc40 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -2,6 +2,16 @@ import React, {forwardRef} from 'react';
 import {View} from 'react-native';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import styles from '../../styles/styles';
+import PropTypes from 'prop-types';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    ListFooterComponentStyle: stylePropTypes,
+};
+
+const defaultProps = {
+    ListFooterComponentStyle: {},
+};
 
 function InvertedCell(props) {
     return (
diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js
index d79fefabdf42..6a15ac571d87 100644
--- a/src/components/MoneyRequestDetails.js
+++ b/src/components/MoneyRequestDetails.js
@@ -3,7 +3,6 @@ import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
-import HeaderWithBackButton from './HeaderWithBackButton';
 import iouReportPropTypes from '../pages/iouReportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import * as ReportUtils from '../libs/ReportUtils';
@@ -16,7 +15,6 @@ import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
 import withWindowDimensions from './withWindowDimensions';
 import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import Icon from './Icon';
 import SettlementButton from './SettlementButton';
@@ -70,9 +68,10 @@ const defaultProps = {
         email: null,
     },
     parentReport: {},
+    policy: null,
 };
 
-function MoneyRequestHeader(props) {
+function MoneyRequestDetails(props) {
     // These are only used for the single transaction view and not for expense and iou reports
     const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getMoneyRequestAction(props.parentReportAction);
     const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
@@ -194,9 +193,9 @@ function MoneyRequestHeader(props) {
     );
 }
 
-MoneyRequestHeader.displayName = 'MoneyRequestHeader';
-MoneyRequestHeader.propTypes = propTypes;
-MoneyRequestHeader.defaultProps = defaultProps;
+MoneyRequestDetails.displayName = 'MoneyRequestDetails';
+MoneyRequestDetails.propTypes = propTypes;
+MoneyRequestDetails.defaultProps = defaultProps;
 
 export default compose(
     withWindowDimensions,
@@ -212,4 +211,4 @@ export default compose(
             key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`,
         },
     }),
-)(MoneyRequestHeader);
+)(MoneyRequestDetails);
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 487579e732c9..1a031129c6bc 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -8,21 +8,15 @@ import iouReportPropTypes from '../pages/iouReportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
 import participantPropTypes from './participantPropTypes';
-import Avatar from './Avatar';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
 import withWindowDimensions from './withWindowDimensions';
 import compose from '../libs/compose';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
-import Icon from './Icon';
-import SettlementButton from './SettlementButton';
 import * as Policy from '../libs/actions/Policy';
 import ONYXKEYS from '../ONYXKEYS';
-import * as IOU from '../libs/actions/IOU';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import DateUtils from '../libs/DateUtils';

From 8e1432a3a1d0bc3fded1f96fba25a50cef7d65ad Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Thu, 29 Jun 2023 19:47:03 -0600
Subject: [PATCH 11/17] just to fix lint errors, for the props validation

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 .../InvertedFlatList/index.android.js         | 56 +++++++++++++++----
 src/components/MoneyRequestHeader.js          | 11 +---
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index ada6670acc40..baf46c3f001a 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -1,11 +1,18 @@
 import React, {forwardRef} from 'react';
-import {View} from 'react-native';
+import {View, FlatList} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import styles from '../../styles/styles';
-import PropTypes from 'prop-types';
 import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
+    /** Passed via forwardRef so we can access the FlatList ref */
+    innerRef: PropTypes.shape({
+        current: PropTypes.instanceOf(FlatList),
+    }).isRequired,
+
+    /** The style of the footer of the list */
     ListFooterComponentStyle: stylePropTypes,
 };
 
@@ -23,16 +30,45 @@ function InvertedCell(props) {
     );
 }
 
+class InvertedFlatList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.list = undefined;
+    }
+
+    componentDidMount() {
+        if (!_.isFunction(this.props.innerRef)) {
+            // eslint-disable-next-line no-param-reassign
+            this.props.innerRef.current = this.list;
+        } else {
+            this.props.innerRef(this.list);
+        }
+    }
+
+    render() {
+        return (
+            <BaseInvertedFlatList
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+                ref={(el) => (this.list = el)}
+                // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13
+                inverted={false}
+                style={styles.invert}
+                ListFooterComponentStyle={[styles.invert, this.props.ListFooterComponentStyle]}
+                verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position
+                CellRendererComponent={InvertedCell}
+            />
+        );
+    }
+}
+InvertedFlatList.propTypes = propTypes;
+InvertedFlatList.defaultProps = defaultProps;
+
 export default forwardRef((props, ref) => (
-    <BaseInvertedFlatList
+    <InvertedFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
-        ref={ref}
-        // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13
-        inverted={false}
-        style={styles.invert}
-        ListFooterComponentStyle={[styles.invert, props.ListFooterComponentStyle]}
-        verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position
-        CellRendererComponent={InvertedCell}
+        innerRef={ref}
     />
 ));
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 1a031129c6bc..b9dc10695f46 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -17,11 +17,6 @@ import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import * as Policy from '../libs/actions/Policy';
 import ONYXKEYS from '../ONYXKEYS';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import DateUtils from '../libs/DateUtils';
-import reportPropTypes from '../pages/reportPropTypes';
-import * as UserUtils from '../libs/UserUtils';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -59,12 +54,12 @@ const defaultProps = {
     parentReport: {},
 };
 
-const MoneyRequestHeader = (props) => {
+function MoneyRequestHeader(props) {
     const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
     const isPayer =
-        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
+    Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             
@@ -89,7 +84,7 @@ const MoneyRequestHeader = (props) => {
                 />
         </View>
     );
-};
+}
 
 MoneyRequestHeader.displayName = 'MoneyRequestHeader';
 MoneyRequestHeader.propTypes = propTypes;

From 837f69072e3af7139f6f139c312e703dc296afc7 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Fri, 30 Jun 2023 02:40:58 -0600
Subject: [PATCH 12/17] Try with former lint version because new one seem to
 bug

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 .github/actionlint.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actionlint.yaml b/.github/actionlint.yaml
index 9a314079362c..d2a8b4a0b9b5 100644
--- a/.github/actionlint.yaml
+++ b/.github/actionlint.yaml
@@ -1,5 +1,5 @@
 # See https://github.com/rhysd/actionlint/blob/main/docs/config.md
 self-hosted-runner:
   labels:
-    - ubuntu-latest-xl
+    - ubuntu-20.04-64core
     - macos-12-xl

From 61985bc5e2cb9da271e81b47825bebe846b284ce Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Fri, 30 Jun 2023 03:00:48 -0600
Subject: [PATCH 13/17] After run prettier

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/MoneyRequestHeader.js       | 41 +++++++++++-----------
 src/pages/home/report/ReportActionsList.js |  3 +-
 src/styles/styles.js                       |  2 +-
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index b9dc10695f46..f082b3bfd07c 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -59,29 +59,28 @@ function MoneyRequestHeader(props) {
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
     const isPayer =
-    Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
+        Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'email', null) === moneyRequestReport.managerEmail);
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-            
-                <HeaderWithBackButton
-                    shouldShowAvatarWithDisplay
-                    shouldShowPinButton={props.isSingleTransactionView}
-                    shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
-                    threeDotsMenuItems={[
-                        {
-                            icon: Expensicons.Trashcan,
-                            text: props.translate('common.delete'),
-                            onSelected: () => {},
-                        },
-                    ]}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
-                    report={props.report}
-                    parentReport={moneyRequestReport}
-                    policies={props.policies}
-                    personalDetails={props.personalDetails}
-                    shouldShowBackButton={props.isSmallScreenWidth}
-                    onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
-                />
+            <HeaderWithBackButton
+                shouldShowAvatarWithDisplay
+                shouldShowPinButton={props.isSingleTransactionView}
+                shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
+                threeDotsMenuItems={[
+                    {
+                        icon: Expensicons.Trashcan,
+                        text: props.translate('common.delete'),
+                        onSelected: () => {},
+                    },
+                ]}
+                threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
+                report={props.report}
+                parentReport={moneyRequestReport}
+                policies={props.policies}
+                personalDetails={props.personalDetails}
+                shouldShowBackButton={props.isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
+            />
         </View>
     );
 }
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index f9e62d17e691..6e0b4e69cd73 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -53,7 +53,7 @@ const propTypes = {
 
     /** Information about the network */
     network: networkPropTypes.isRequired,
-    
+
     /** The policy object for the current route */
     policy: PropTypes.shape({
         /** The name of the policy */
@@ -177,7 +177,6 @@ function ReportActionsList(props) {
                 onEndReached={props.loadMoreChats}
                 onEndReachedThreshold={0.75}
                 ListFooterComponentStyle={showMoneyRequestDetails && styles.chatFooterAtTheTop}
-               
                 ListFooterComponent={() => {
                     if (props.report.isLoadingMoreReportActions) {
                         return <ReportActionsSkeletonView containerHeight={CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT * 3} />;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 710116a4c189..8f721084faed 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1581,7 +1581,7 @@ const styles = {
     chatItemReactionsDraftRight: {
         marginLeft: 52,
     },
-    chatFooterAtTheTop : {
+    chatFooterAtTheTop: {
         flexGrow: 1,
         justifyContent: 'flex-start',
     },

From 54f6edd531eedfabaa6dc838304ce36d4a8a450b Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Fri, 30 Jun 2023 10:06:11 -0600
Subject: [PATCH 14/17] Revert "Try with former lint version because new one
 seem to bug"

This reverts commit 837f69072e3af7139f6f139c312e703dc296afc7.

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 .github/actionlint.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actionlint.yaml b/.github/actionlint.yaml
index d2a8b4a0b9b5..9a314079362c 100644
--- a/.github/actionlint.yaml
+++ b/.github/actionlint.yaml
@@ -1,5 +1,5 @@
 # See https://github.com/rhysd/actionlint/blob/main/docs/config.md
 self-hosted-runner:
   labels:
-    - ubuntu-20.04-64core
+    - ubuntu-latest-xl
     - macos-12-xl

From 86d22728cc5e9a657a0e3bf2ab85adfcd45f46c9 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Mon, 3 Jul 2023 14:41:46 -0600
Subject: [PATCH 15/17] Resolve the errors about prop type in the android
 console

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/InvertedFlatList/index.android.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index baf46c3f001a..020040a916d6 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -13,7 +13,8 @@ const propTypes = {
     }).isRequired,
 
     /** The style of the footer of the list */
-    ListFooterComponentStyle: stylePropTypes,
+    // eslint-disable-next-line react/forbid-prop-types
+    ListFooterComponentStyle: PropTypes.any,
 };
 
 const defaultProps = {

From 8e10409ee74e60752519a758f084953b2139635f Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Mon, 3 Jul 2023 15:30:35 -0600
Subject: [PATCH 16/17] Resolve lint errors and merging errors

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/InvertedFlatList/index.android.js | 1 -
 src/components/MoneyRequestHeader.js             | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index 020040a916d6..484a0a4ce31f 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import styles from '../../styles/styles';
-import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
     /** Passed via forwardRef so we can access the FlatList ref */
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 9f5222a1df14..111d436e7bf9 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -62,7 +62,7 @@ function MoneyRequestHeader(props) {
         Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
     const report = props.report;
     if (props.isSingleTransactionView) {
-        report.ownerAccountID = lodashGet(props, ['parentReport', ''], null);
+        report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null);
         report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], '');
     }
     return (

From bd3ac02780b56b9f0e737f95e0f2911fa453e343 Mon Sep 17 00:00:00 2001
From: Pierre Michel <pmiche04@gmail.com>
Date: Mon, 3 Jul 2023 16:31:01 -0600
Subject: [PATCH 17/17] Reverting to the good prop type and fixing the console
 error on android

Signed-off-by: Pierre Michel <pmiche04@gmail.com>
---
 src/components/InvertedFlatList/index.android.js | 4 ++--
 src/pages/home/report/ReportActionsList.js       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
index 484a0a4ce31f..baf46c3f001a 100644
--- a/src/components/InvertedFlatList/index.android.js
+++ b/src/components/InvertedFlatList/index.android.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
     /** Passed via forwardRef so we can access the FlatList ref */
@@ -12,8 +13,7 @@ const propTypes = {
     }).isRequired,
 
     /** The style of the footer of the list */
-    // eslint-disable-next-line react/forbid-prop-types
-    ListFooterComponentStyle: PropTypes.any,
+    ListFooterComponentStyle: stylePropTypes,
 };
 
 const defaultProps = {
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 04675270d4ac..67d81f77d90b 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -176,7 +176,7 @@ function ReportActionsList(props) {
                 initialNumToRender={calculateInitialNumToRender()}
                 onEndReached={props.loadMoreChats}
                 onEndReachedThreshold={0.75}
-                ListFooterComponentStyle={showMoneyRequestDetails && styles.chatFooterAtTheTop}
+                ListFooterComponentStyle={showMoneyRequestDetails ? styles.chatFooterAtTheTop : {}}
                 ListFooterComponent={() => {
                     if (props.report.isLoadingMoreReportActions) {
                         return <ReportActionsSkeletonView containerHeight={CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT * 3} />;
