diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
index 8a818e1c7bff..d5da41c9f648 100644
--- a/src/components/Reactions/ReportActionItemReactions.js
+++ b/src/components/Reactions/ReportActionItemReactions.js
@@ -11,7 +11,7 @@ import * as Report from '../../libs/actions/Report';
 import Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
 import * as EmojiUtils from '../../libs/EmojiUtils';
-import ReactionListRefContext from '../../pages/home/report/ReactionList/ReactionListRefContext';
+import ReportScreenContext from '../../pages/home/ReportScreenContext';
 
 const propTypes = {
     /**
@@ -47,7 +47,7 @@ const defaultProps = {
 };
 
 function ReportActionItemReactions(props) {
-    const reactionListRef = useContext(ReactionListRefContext);
+    const {reactionListRef} = useContext(ReportScreenContext);
     const popoverReactionListAnchor = useRef(null);
     const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0);
 
diff --git a/src/hooks/useReportScrollManager/index.js b/src/hooks/useReportScrollManager/index.js
new file mode 100644
index 000000000000..13e7471f6eb1
--- /dev/null
+++ b/src/hooks/useReportScrollManager/index.js
@@ -0,0 +1,36 @@
+import {useContext} from 'react';
+import ReportScreenContext from '../../pages/home/ReportScreenContext';
+
+function useReportScrollManager() {
+    const {flatListRef} = useContext(ReportScreenContext);
+
+    /**
+     * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
+     * we are editing a comment.
+     *
+     * @param {Object} index
+     * @param {Boolean} isEditing
+     */
+    const scrollToIndex = (index, isEditing) => {
+        if (!flatListRef.current || isEditing) {
+            return;
+        }
+
+        flatListRef.current.scrollToIndex(index);
+    };
+
+    /**
+     * Scroll to the bottom of the flatlist.
+     */
+    const scrollToBottom = () => {
+        if (!flatListRef.current) {
+            return;
+        }
+
+        flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    };
+
+    return {ref: flatListRef, scrollToIndex, scrollToBottom};
+}
+
+export default useReportScrollManager;
diff --git a/src/hooks/useReportScrollManager/index.native.js b/src/hooks/useReportScrollManager/index.native.js
new file mode 100644
index 000000000000..e206991efa03
--- /dev/null
+++ b/src/hooks/useReportScrollManager/index.native.js
@@ -0,0 +1,34 @@
+import {useContext} from 'react';
+import ReportScreenContext from '../../pages/home/ReportScreenContext';
+
+function useReportScrollManager() {
+    const {flatListRef} = useContext(ReportScreenContext);
+
+    /**
+     * Scroll to the provided index.
+     *
+     * @param {Object} index
+     */
+    const scrollToIndex = (index) => {
+        if (!flatListRef.current) {
+            return;
+        }
+
+        flatListRef.current.scrollToIndex(index);
+    };
+
+    /**
+     * Scroll to the bottom of the flatlist.
+     */
+    const scrollToBottom = () => {
+        if (!flatListRef.current) {
+            return;
+        }
+
+        flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    };
+
+    return {ref: flatListRef, scrollToIndex, scrollToBottom};
+}
+
+export default useReportScrollManager;
diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js
index f35abb74020a..1dd9922b33b8 100644
--- a/src/libs/ReportScrollManager/index.js
+++ b/src/libs/ReportScrollManager/index.js
@@ -1,34 +1,30 @@
-import React from 'react';
-
-// This ref is created using React.createRef here because this function is used by a component that doesn't have access
-// to the original ref.
-const flatListRef = React.createRef();
-
 /**
  * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
  * we are editing a comment.
  *
+ * @param {Object} ref
  * @param {Object} index
  * @param {Boolean} isEditing
  */
-function scrollToIndex(index, isEditing) {
-    if (isEditing) {
+function scrollToIndex(ref, index, isEditing) {
+    if (!ref.current || isEditing) {
         return;
     }
 
-    flatListRef.current.scrollToIndex(index);
+    ref.current.scrollToIndex(index);
 }
 
 /**
  * Scroll to the bottom of the flatlist.
  *
+ * @param {Object} ref
  */
-function scrollToBottom() {
-    if (!flatListRef.current) {
+function scrollToBottom(ref) {
+    if (!ref.current) {
         return;
     }
 
-    flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    ref.current.scrollToOffset({animated: false, offset: 0});
 }
 
-export {flatListRef, scrollToIndex, scrollToBottom};
+export {scrollToIndex, scrollToBottom};
diff --git a/src/libs/ReportScrollManager/index.native.js b/src/libs/ReportScrollManager/index.native.js
index 85a67f51e559..570d3a72acac 100644
--- a/src/libs/ReportScrollManager/index.native.js
+++ b/src/libs/ReportScrollManager/index.native.js
@@ -1,28 +1,28 @@
-import React from 'react';
-
-// This ref is created using React.createRef here because this function is used by a component that doesn't have access
-// to the original ref.
-const flatListRef = React.createRef();
-
 /**
  * Scroll to the provided index.
  *
+ * @param {Object} ref
  * @param {Object} index
  */
-function scrollToIndex(index) {
-    flatListRef.current.scrollToIndex(index);
+function scrollToIndex(ref, index) {
+    if (!ref.current) {
+        return;
+    }
+
+    ref.current.scrollToIndex(index);
 }
 
 /**
  * Scroll to the bottom of the flatlist.
  *
+ * @param {Object} ref
  */
-function scrollToBottom() {
-    if (!flatListRef.current) {
+function scrollToBottom(ref) {
+    if (!ref.current) {
         return;
     }
 
-    flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    ref.current.scrollToOffset({animated: false, offset: 0});
 }
 
-export {flatListRef, scrollToIndex, scrollToBottom};
+export {scrollToIndex, scrollToBottom};
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 34d6924dff54..1e3a297f08da 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -17,6 +17,7 @@ import DateUtils from '../DateUtils';
 import TransactionUtils from '../TransactionUtils';
 import * as ErrorUtils from '../ErrorUtils';
 import * as UserUtils from '../UserUtils';
+import * as Report from './Report';
 
 const chatReports = {};
 const iouReports = {};
@@ -427,6 +428,7 @@ function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, part
     );
     resetMoneyRequestInfo();
     Navigation.dismissModal(chatReport.reportID);
+    Report.notifyNewAction(chatReport.reportID, payeeAccountID);
 }
 
 /**
@@ -733,6 +735,7 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
 
     resetMoneyRequestInfo();
     Navigation.dismissModal();
+    Report.notifyNewAction(groupData.chatReportID, currentUserAccountID);
 }
 
 /**
@@ -763,6 +766,7 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou
 
     resetMoneyRequestInfo();
     Navigation.dismissModal(groupData.chatReportID);
+    Report.notifyNewAction(groupData.chatReportID, currentUserAccountID);
 }
 
 /**
@@ -1227,6 +1231,7 @@ function sendMoneyElsewhere(report, amount, currency, comment, managerID, recipi
 
     resetMoneyRequestInfo();
     Navigation.dismissModal(params.chatReportID);
+    Report.notifyNewAction(params.chatReportID, managerID);
 }
 
 /**
@@ -1244,6 +1249,7 @@ function sendMoneyWithWallet(report, amount, currency, comment, managerID, recip
 
     resetMoneyRequestInfo();
     Navigation.dismissModal(params.chatReportID);
+    Report.notifyNewAction(params.chatReportID, managerID);
 }
 
 /**
@@ -1261,6 +1267,7 @@ function sendMoneyViaPaypal(report, amount, currency, comment, managerID, recipi
 
     resetMoneyRequestInfo();
     Navigation.dismissModal(params.chatReportID);
+    Report.notifyNewAction(params.chatReportID, managerID);
 
     asyncOpenURL(Promise.resolve(), buildPayPalPaymentUrl(amount, recipient.payPalMeAddress, currency));
 }
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 4cf90dbcb1ab..b49af54ad075 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -193,6 +193,21 @@ function subscribeToNewActionEvent(reportID, callback) {
     };
 }
 
+/**
+ * Notify the ReportActionsView that a new comment has arrived
+ *
+ * @param {String} reportID
+ * @param {Number} accountID
+ * @param {String} reportActionID
+ */
+function notifyNewAction(reportID, accountID, reportActionID) {
+    if (reportID !== newActionSubscriber.reportID) {
+        return;
+    }
+    const isFromCurrentUser = accountID === currentUserAccountID;
+    newActionSubscriber.callback(isFromCurrentUser, reportActionID);
+}
+
 /**
  * Add up to two report actions to a report. This method can be called for the following situations:
  *
@@ -306,12 +321,7 @@ function addActions(reportID, text = '', file) {
         successData,
         failureData,
     });
-
-    // Notify the ReportActionsView that a new comment has arrived
-    if (reportID === newActionSubscriber.reportID) {
-        const isFromCurrentUser = lastAction.actorAccountID === currentUserAccountID;
-        newActionSubscriber.callback(isFromCurrentUser, lastAction.reportActionID);
-    }
+    notifyNewAction(reportID, lastAction.actorAccountID, lastAction.reportActionID);
 }
 
 /**
@@ -1436,12 +1446,7 @@ function showReportActionNotification(reportID, action) {
             Navigation.navigate(ROUTES.getReportRoute(reportID));
         },
     });
-
-    // Notify the ReportActionsView that a new comment has arrived
-    if (reportID === newActionSubscriber.reportID) {
-        const isFromCurrentUser = action.actorAccountID === currentUserAccountID;
-        newActionSubscriber.callback(isFromCurrentUser, action.reportActionID);
-    }
+    notifyNewAction(reportID, action.actorAccountID, action.reportActionID);
 }
 
 /**
@@ -1830,6 +1835,7 @@ export {
     clearPolicyRoomNameErrors,
     clearIOUError,
     subscribeToNewActionEvent,
+    notifyNewAction,
     showReportActionNotification,
     addEmojiReaction,
     removeEmojiReaction,
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index d3fb665ecb48..e9229698d3d2 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -39,6 +39,7 @@ import TaskHeader from '../../components/TaskHeader';
 import MoneyRequestHeader from '../../components/MoneyRequestHeader';
 import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
+import ReportScreenContext from './ReportScreenContext';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -134,6 +135,8 @@ class ReportScreen extends React.Component {
             isBannerVisible: true,
         };
         this.firstRenderRef = React.createRef();
+        this.flatListRef = React.createRef();
+        this.reactionListRef = React.createRef();
     }
 
     componentDidMount() {
@@ -248,111 +251,118 @@ class ReportScreen extends React.Component {
         const policy = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.props.report.policyID}`];
 
         return (
-            <ScreenWrapper style={screenWrapperStyle}>
-                <FullPageNotFoundView
-                    shouldShow={(!this.props.report.reportID && !this.props.report.isLoadingReportActions && !isLoading) || shouldHideReport}
-                    subtitleKey="notFound.noAccess"
-                    shouldShowCloseButton={false}
-                    shouldShowBackButton={this.props.isSmallScreenWidth}
-                    onBackButtonPress={Navigation.goBack}
-                >
-                    <OfflineWithFeedback
-                        pendingAction={addWorkspaceRoomOrChatPendingAction}
-                        errors={addWorkspaceRoomOrChatErrors}
-                        shouldShowErrorMessages={false}
+            <ReportScreenContext.Provider
+                value={{
+                    flatListRef: this.flatListRef,
+                    reactionListRef: this.reactionListRef,
+                }}
+            >
+                <ScreenWrapper style={screenWrapperStyle}>
+                    <FullPageNotFoundView
+                        shouldShow={(!this.props.report.reportID && !this.props.report.isLoadingReportActions && !isLoading) || shouldHideReport}
+                        subtitleKey="notFound.noAccess"
+                        shouldShowCloseButton={false}
+                        shouldShowBackButton={this.props.isSmallScreenWidth}
+                        onBackButtonPress={Navigation.goBack}
                     >
-                        {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? (
-                            <MoneyRequestHeader
-                                report={this.props.report}
-                                policies={this.props.policies}
-                                personalDetails={this.props.personalDetails}
-                                isSingleTransactionView={isSingleTransactionView}
-                                parentReportAction={parentReportAction}
-                            />
-                        ) : (
-                            <HeaderView
-                                reportID={reportID}
-                                onNavigationMenuButtonClicked={() => Navigation.goBack(ROUTES.HOME)}
-                                personalDetails={this.props.personalDetails}
-                                report={this.props.report}
-                            />
-                        )}
+                        <OfflineWithFeedback
+                            pendingAction={addWorkspaceRoomOrChatPendingAction}
+                            errors={addWorkspaceRoomOrChatErrors}
+                            shouldShowErrorMessages={false}
+                        >
+                            {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? (
+                                <MoneyRequestHeader
+                                    report={this.props.report}
+                                    policies={this.props.policies}
+                                    personalDetails={this.props.personalDetails}
+                                    isSingleTransactionView={isSingleTransactionView}
+                                    parentReportAction={parentReportAction}
+                                />
+                            ) : (
+                                <HeaderView
+                                    reportID={reportID}
+                                    onNavigationMenuButtonClicked={() => Navigation.goBack(ROUTES.HOME)}
+                                    personalDetails={this.props.personalDetails}
+                                    report={this.props.report}
+                                />
+                            )}
 
-                        {ReportUtils.isTaskReport(this.props.report) && (
-                            <TaskHeader
-                                report={this.props.report}
-                                personalDetails={this.props.personalDetails}
-                            />
-                        )}
-                    </OfflineWithFeedback>
-                    {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
-                        <Banner
-                            containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.bgDark]}
-                            textStyles={[styles.colorReversed]}
-                            text={this.props.translate('reportActionsView.chatWithAccountManager')}
-                            onClose={this.dismissBanner}
-                            onPress={this.chatWithAccountManager}
-                            shouldShowCloseButton
-                        />
-                    )}
-                    <View
-                        nativeID={CONST.REPORT.DROP_NATIVE_ID + this.getNavigationKey()}
-                        style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
-                        onLayout={(event) => {
-                            const skeletonViewContainerHeight = event.nativeEvent.layout.height;
-
-                            // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it
-                            // takes up so we can set the skeleton view container height.
-                            if (skeletonViewContainerHeight === 0) {
-                                return;
-                            }
-                            reportActionsListViewHeight = skeletonViewContainerHeight;
-                            this.setState({skeletonViewContainerHeight});
-                        }}
-                    >
-                        {this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading && (
-                            <ReportActionsView
-                                reportActions={this.props.reportActions}
-                                report={this.props.report}
-                                isComposerFullSize={this.props.isComposerFullSize}
-                                parentViewHeight={this.state.skeletonViewContainerHeight}
-                                policy={policy}
+                            {ReportUtils.isTaskReport(this.props.report) && (
+                                <TaskHeader
+                                    report={this.props.report}
+                                    personalDetails={this.props.personalDetails}
+                                />
+                            )}
+                        </OfflineWithFeedback>
+                        {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
+                            <Banner
+                                containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.bgDark]}
+                                textStyles={[styles.colorReversed]}
+                                text={this.props.translate('reportActionsView.chatWithAccountManager')}
+                                onClose={this.dismissBanner}
+                                onPress={this.chatWithAccountManager}
+                                shouldShowCloseButton
                             />
                         )}
-
-                        {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then
-                        we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */}
-                        {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && (
-                            <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
-                        )}
-
-                        {this.isReportReadyForDisplay() && (
-                            <>
-                                <ReportFooter
-                                    errors={addWorkspaceRoomOrChatErrors}
-                                    pendingAction={addWorkspaceRoomOrChatPendingAction}
-                                    isOffline={this.props.network.isOffline}
+                        <View
+                            nativeID={CONST.REPORT.DROP_NATIVE_ID + this.getNavigationKey()}
+                            style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
+                            onLayout={(event) => {
+                                const skeletonViewContainerHeight = event.nativeEvent.layout.height;
+
+                                // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it
+                                // takes up so we can set the skeleton view container height.
+                                if (skeletonViewContainerHeight === 0) {
+                                    return;
+                                }
+                                reportActionsListViewHeight = skeletonViewContainerHeight;
+                                this.setState({skeletonViewContainerHeight});
+                            }}
+                        >
+                            {this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading && (
+                                <ReportActionsView
                                     reportActions={this.props.reportActions}
                                     report={this.props.report}
                                     isComposerFullSize={this.props.isComposerFullSize}
-                                    onSubmitComment={this.onSubmitComment}
-                                    policies={this.props.policies}
+                                    parentViewHeight={this.state.skeletonViewContainerHeight}
+                                    policy={policy}
                                 />
-                            </>
-                        )}
-
-                        {!this.isReportReadyForDisplay() && (
-                            <ReportFooter
-                                shouldDisableCompose
-                                isOffline={this.props.network.isOffline}
-                            />
-                        )}
-
-                        <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
-                        <PortalHost name={CONST.REPORT.DROP_HOST_NAME} />
-                    </View>
-                </FullPageNotFoundView>
-            </ScreenWrapper>
+                            )}
+
+                            {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then
+                            we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */}
+                            {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && (
+                                <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
+                            )}
+
+                            {this.isReportReadyForDisplay() && (
+                                <>
+                                    <ReportFooter
+                                        errors={addWorkspaceRoomOrChatErrors}
+                                        pendingAction={addWorkspaceRoomOrChatPendingAction}
+                                        isOffline={this.props.network.isOffline}
+                                        reportActions={this.props.reportActions}
+                                        report={this.props.report}
+                                        isComposerFullSize={this.props.isComposerFullSize}
+                                        onSubmitComment={this.onSubmitComment}
+                                        policies={this.props.policies}
+                                    />
+                                </>
+                            )}
+
+                            {!this.isReportReadyForDisplay() && (
+                                <ReportFooter
+                                    shouldDisableCompose
+                                    isOffline={this.props.network.isOffline}
+                                />
+                            )}
+
+                            <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
+                            <PortalHost name={CONST.REPORT.DROP_HOST_NAME} />
+                        </View>
+                    </FullPageNotFoundView>
+                </ScreenWrapper>
+            </ReportScreenContext.Provider>
         );
     }
 }
diff --git a/src/pages/home/ReportScreenContext.js b/src/pages/home/ReportScreenContext.js
new file mode 100644
index 000000000000..2f79d6ae9432
--- /dev/null
+++ b/src/pages/home/ReportScreenContext.js
@@ -0,0 +1,4 @@
+import {createContext} from 'react';
+
+const ReportScreenContext = createContext();
+export default ReportScreenContext;
diff --git a/src/pages/home/report/ReactionList/ReactionListRefContext.js b/src/pages/home/report/ReactionList/ReactionListRefContext.js
deleted file mode 100644
index 12417b03bb15..000000000000
--- a/src/pages/home/report/ReactionList/ReactionListRefContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-const ReactionListRefContext = React.createContext();
-export default ReactionListRefContext;
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 56b78a73ae50..7d4535abc2c8 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -11,7 +11,6 @@ import themeColors from '../../../styles/themes/default';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import Composer from '../../../components/Composer';
 import * as Report from '../../../libs/actions/Report';
-import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
@@ -33,6 +32,7 @@ import Hoverable from '../../../components/Hoverable';
 import useLocalize from '../../../hooks/useLocalize';
 import useKeyboardState from '../../../hooks/useKeyboardState';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import useReportScrollManager from '../../../hooks/useReportScrollManager';
 
 const propTypes = {
     /** All the data of the action */
@@ -75,6 +75,7 @@ const emojiButtonID = 'emojiButton';
 const messageEditInput = 'messageEditInput';
 
 function ReportActionItemMessageEdit(props) {
+    const reportScrollManager = useReportScrollManager();
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -186,11 +187,11 @@ function ReportActionItemMessageEdit(props) {
         // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report.
         if (props.index === 0) {
             const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-                ReportScrollManager.scrollToIndex({animated: true, index: props.index}, false);
+                reportScrollManager.scrollToIndex({animated: true, index: props.index}, false);
                 keyboardDidHideListener.remove();
             });
         }
-    }, [props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID]);
+    }, [props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID, reportScrollManager]);
 
     /**
      * Save the draft of the comment to be the new comment message. This will take the comment out of "edit mode" with
@@ -306,7 +307,7 @@ function ReportActionItemMessageEdit(props) {
                             style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
                             onFocus={() => {
                                 setIsFocused(true);
-                                ReportScrollManager.scrollToIndex({animated: true, index: props.index}, true);
+                                reportScrollManager.scrollToIndex({animated: true, index: props.index}, true);
                                 ComposerActions.setShouldShowComposeInput(false);
                             }}
                             onBlur={(event) => {
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index c3288c3eeb6a..8e48f06c3528 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -4,7 +4,6 @@ import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-nati
 import _ from 'underscore';
 import InvertedFlatList from '../../../components/InvertedFlatList';
 import compose from '../../../libs/compose';
-import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import styles from '../../../styles/styles';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
@@ -21,6 +20,7 @@ import CONST from '../../../CONST';
 import reportPropTypes from '../../reportPropTypes';
 import networkPropTypes from '../../../components/networkPropTypes';
 import withLocalize from '../../../components/withLocalize';
+import useReportScrollManager from '../../../hooks/useReportScrollManager';
 
 const propTypes = {
     /** Position of the "New" line marker */
@@ -78,6 +78,7 @@ function keyExtractor(item) {
 }
 
 function ReportActionsList(props) {
+    const reportScrollManager = useReportScrollManager();
     const opacity = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -152,7 +153,7 @@ function ReportActionsList(props) {
         <Animated.View style={[animatedStyles, styles.flex1]}>
             <InvertedFlatList
                 accessibilityLabel={props.translate('sidebarScreen.listOfChatMessages')}
-                ref={ReportScrollManager.flatListRef}
+                ref={reportScrollManager.ref}
                 data={props.sortedReportActions}
                 renderItem={renderItem}
                 contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0]}
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 8c11571d0da1..fdd255f05006 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -21,9 +21,9 @@ import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import reportPropTypes from '../../reportPropTypes';
 import withNavigationFocus from '../../../components/withNavigationFocus';
-import ReactionListRefContext from './ReactionList/ReactionListRefContext';
 import PopoverReactionList from './ReactionList/PopoverReactionList';
 import getIsReportFullyVisible from '../../../libs/getIsReportFullyVisible';
+import ReportScreenContext from '../ReportScreenContext';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -105,7 +105,7 @@ class ReportActionsView extends React.Component {
             // If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
             // they are now in the list.
             if (isFromCurrentUser) {
-                ReportScrollManager.scrollToBottom();
+                ReportScrollManager.scrollToBottom(this.context.flatListRef);
 
                 // If the current user sends a new message in the chat we clear the new marker since they have "read" the report
                 this.setState({newMarkerReportActionID: ''});
@@ -286,7 +286,7 @@ class ReportActionsView extends React.Component {
     }
 
     scrollToBottomAndMarkReportAsRead() {
-        ReportScrollManager.scrollToBottom();
+        ReportScrollManager.scrollToBottom(this.context.flatListRef);
         Report.readNewestAction(this.props.report.reportID);
     }
 
@@ -344,20 +344,18 @@ class ReportActionsView extends React.Component {
                     isActive={this.state.isFloatingMessageCounterVisible && !_.isEmpty(this.state.newMarkerReportActionID)}
                     onClick={this.scrollToBottomAndMarkReportAsRead}
                 />
-                <ReactionListRefContext.Provider value={this.reactionListRef}>
-                    <ReportActionsList
-                        report={this.props.report}
-                        onScroll={this.trackScroll}
-                        onLayout={this.recordTimeToMeasureItemLayout}
-                        sortedReportActions={this.props.reportActions}
-                        mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
-                        isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
-                        loadMoreChats={this.loadMoreChats}
-                        newMarkerReportActionID={this.state.newMarkerReportActionID}
-                    />
-                </ReactionListRefContext.Provider>
+                <ReportActionsList
+                    report={this.props.report}
+                    onScroll={this.trackScroll}
+                    onLayout={this.recordTimeToMeasureItemLayout}
+                    sortedReportActions={this.props.reportActions}
+                    mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
+                    isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
+                    loadMoreChats={this.loadMoreChats}
+                    newMarkerReportActionID={this.state.newMarkerReportActionID}
+                />
                 <PopoverReactionList
-                    ref={this.reactionListRef}
+                    ref={this.context.reactionListRef}
                     report={this.props.report}
                 />
                 <CopySelectionHelper />
@@ -368,5 +366,6 @@ class ReportActionsView extends React.Component {
 
 ReportActionsView.propTypes = propTypes;
 ReportActionsView.defaultProps = defaultProps;
+ReportActionsView.contextType = ReportScreenContext;
 
 export default compose(Performance.withRenderTrace({id: '<ReportActionsView> rendering'}), withWindowDimensions, withNavigationFocus, withLocalize, withNetwork())(ReportActionsView);
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index f7d78cc6b06b..4655427ca3e6 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -10,7 +10,6 @@ import ScreenWrapper from '../../../components/ScreenWrapper';
 import styles from '../../../styles/styles';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
-import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import * as IOU from '../../../libs/actions/IOU';
 import compose from '../../../libs/compose';
 import * as ReportUtils from '../../../libs/ReportUtils';
@@ -196,14 +195,8 @@ function MoneyRequestConfirmPage(props) {
                         iouAmount={props.iou.amount}
                         iouComment={props.iou.comment}
                         iouCurrencyCode={props.iou.currency}
-                        onConfirm={(selectedParticipants) => {
-                            createTransaction(selectedParticipants);
-                            ReportScrollManager.scrollToBottom();
-                        }}
-                        onSendMoney={(paymentMethodType) => {
-                            sendMoney(paymentMethodType);
-                            ReportScrollManager.scrollToBottom();
-                        }}
+                        onConfirm={createTransaction}
+                        onSendMoney={sendMoney}
                         onSelectParticipant={(option) => {
                             const newParticipants = _.map(props.iou.participants, (participant) => {
                                 if (participant.accountID === option.accountID) {
