diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index ec2755f1a5dd..4f590b43e180 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -13,7 +13,7 @@ import EmojiReactionsPropTypes from './EmojiReactionsPropTypes';
import Tooltip from '../Tooltip';
import ReactionTooltipContent from './ReactionTooltipContent';
import * as EmojiUtils from '../../libs/EmojiUtils';
-import ReportScreenContext from '../../pages/home/ReportScreenContext';
+import {ReactionListContext} from '../../pages/home/ReportScreenContext';
const propTypes = {
emojiReactions: EmojiReactionsPropTypes,
@@ -41,7 +41,7 @@ const defaultProps = {
};
function ReportActionItemEmojiReactions(props) {
- const {reactionListRef} = useContext(ReportScreenContext);
+ const reactionListRef = useContext(ReactionListContext);
const popoverReactionListAnchor = useRef(null);
let totalReactionCount = 0;
diff --git a/src/hooks/useReportScrollManager/index.js b/src/hooks/useReportScrollManager/index.js
index 0cf09146553c..9a3303504b92 100644
--- a/src/hooks/useReportScrollManager/index.js
+++ b/src/hooks/useReportScrollManager/index.js
@@ -1,8 +1,8 @@
import {useContext, useCallback} from 'react';
-import ReportScreenContext from '../../pages/home/ReportScreenContext';
+import {ActionListContext} from '../../pages/home/ReportScreenContext';
function useReportScrollManager() {
- const {flatListRef} = useContext(ReportScreenContext);
+ const flatListRef = useContext(ActionListContext);
/**
* Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
diff --git a/src/hooks/useReportScrollManager/index.native.js b/src/hooks/useReportScrollManager/index.native.js
index 35af064cb062..d44a40222ca5 100644
--- a/src/hooks/useReportScrollManager/index.native.js
+++ b/src/hooks/useReportScrollManager/index.native.js
@@ -1,8 +1,8 @@
import {useContext, useCallback} from 'react';
-import ReportScreenContext from '../../pages/home/ReportScreenContext';
+import {ActionListContext} from '../../pages/home/ReportScreenContext';
function useReportScrollManager() {
- const {flatListRef} = useContext(ReportScreenContext);
+ const flatListRef = useContext(ActionListContext);
/**
* Scroll to the provided index.
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 83f0e4a6d506..16284c2bd9c5 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -33,7 +33,7 @@ import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible';
import MoneyRequestHeader from '../../components/MoneyRequestHeader';
import MoneyReportHeader from '../../components/MoneyReportHeader';
import * as ComposerActions from '../../libs/actions/Composer';
-import ReportScreenContext from './ReportScreenContext';
+import {ActionListContext, ReactionListContext} from './ReportScreenContext';
import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
import DragAndDropProvider from '../../components/DragAndDrop/Provider';
@@ -276,111 +276,107 @@ class ReportScreen extends React.Component {
}
return (
-
-
-
+
+
-
- {headerView}
- {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && (
-
-
-
-
+
+ {headerView}
+ {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && (
+
+
+
+
+
-
- )}
-
- {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
-
- )}
-
- {
- // Rounding this value for comparison because they can look like this: 411.9999694824219
- const skeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height);
-
- // Only set state when the height changes to avoid unnecessary renders
- if (reportActionsListViewHeight === skeletonViewContainerHeight) return;
-
- // 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 && (
-
)}
-
- {/* 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) && (
-
- )}
-
- {this.isReportReadyForDisplay() && (
- <>
-
+ {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
+
+ )}
+
+ {
+ // Rounding this value for comparison because they can look like this: 411.9999694824219
+ const skeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height);
+
+ // Only set state when the height changes to avoid unnecessary renders
+ if (reportActionsListViewHeight === skeletonViewContainerHeight) return;
+
+ // 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 && (
+
- >
- )}
+ )}
- {!this.isReportReadyForDisplay() && (
-
- )}
-
-
-
-
-
+ {/* 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) && (
+
+ )}
+
+ {this.isReportReadyForDisplay() && (
+ <>
+
+ >
+ )}
+
+ {!this.isReportReadyForDisplay() && (
+
+ )}
+
+
+
+
+
+
);
}
}
diff --git a/src/pages/home/ReportScreenContext.js b/src/pages/home/ReportScreenContext.js
index 2f79d6ae9432..0be1882699f4 100644
--- a/src/pages/home/ReportScreenContext.js
+++ b/src/pages/home/ReportScreenContext.js
@@ -1,4 +1,9 @@
import {createContext} from 'react';
-const ReportScreenContext = createContext();
-export default ReportScreenContext;
+const ActionListContext = createContext();
+const ReactionListContext = createContext();
+
+export {
+ ActionListContext,
+ ReactionListContext
+}
\ No newline at end of file
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index e5b199d1c994..4a0c0d7bd3ba 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -64,7 +64,7 @@ import * as PersonalDetailsUtils from '../../../libs/PersonalDetailsUtils';
import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
import * as store from '../../../libs/actions/ReimbursementAccount/store';
import * as BankAccounts from '../../../libs/actions/BankAccounts';
-import ReportScreenContext from '../ReportScreenContext';
+import { ReactionListContext } from '../ReportScreenContext';
import Permissions from '../../../libs/Permissions';
const propTypes = {
@@ -127,7 +127,7 @@ function ReportActionItem(props) {
const [isContextMenuActive, setIsContextMenuActive] = useState(ReportActionContextMenu.isActiveReportAction(props.action.reportActionID));
const [isHidden, setIsHidden] = useState(false);
const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
- const {reactionListRef} = useContext(ReportScreenContext);
+ const reactionListRef = useContext(ReactionListContext);
const textInputRef = useRef();
const popoverAnchorRef = useRef();
const downloadedPreviews = useRef([]);
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index da475e61f749..70eb65ade3ea 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -19,7 +19,7 @@ import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
import reportPropTypes from '../../reportPropTypes';
import PopoverReactionList from './ReactionList/PopoverReactionList';
import getIsReportFullyVisible from '../../../libs/getIsReportFullyVisible';
-import ReportScreenContext from '../ReportScreenContext';
+import { ReactionListContext } from '../ReportScreenContext';
const propTypes = {
/** The report currently being looked at */
@@ -54,10 +54,9 @@ const defaultProps = {
};
function ReportActionsView(props) {
- const context = useContext(ReportScreenContext);
useCopySelectionHelper();
-
+ const reactionListRef = useContext(ReactionListContext)
const didLayout = useRef(false);
const didSubscribeToReportTypingEvents = useRef(false);
const hasCachedActions = useRef(_.size(props.reportActions) > 0);
@@ -189,7 +188,7 @@ function ReportActionsView(props) {
loadMoreChats={loadMoreChats}
policy={props.policy}
/>
-
+
>
);
}