diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index a95ba93cea1e..548799ee7b1d 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -569,6 +569,7 @@ function MoneyRequestReportActionsList({ emojiReactions={actionEmojiReactions} isReportArchived={isReportArchived} draftMessage={matchingDraftMessageString} + isReverted={false} isTryNewDotNVPDismissed={isTryNewDotNVPDismissed} /> ); diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts index fa0042a3bf26..12880b096658 100644 --- a/src/hooks/useReportScrollManager/index.native.ts +++ b/src/hooks/useReportScrollManager/index.native.ts @@ -11,12 +11,12 @@ function useReportScrollManager(): ReportScrollManagerData { * Scroll to the provided index. */ const scrollToIndex = useCallback( - (index: number) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + (index: number, isEditing?: boolean, viewPosition?: number) => { if (!flatListRef?.current) { return; } - - flatListRef.current.scrollToIndex({index}); + flatListRef.current.scrollToIndex({index, viewPosition}); }, [flatListRef], ); diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts index e5e95b77bbe8..f0ba5513dd51 100644 --- a/src/hooks/useReportScrollManager/index.ts +++ b/src/hooks/useReportScrollManager/index.ts @@ -9,12 +9,12 @@ function useReportScrollManager(): ReportScrollManagerData { * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because */ const scrollToIndex = useCallback( - (index: number, isEditing?: boolean) => { + (index: number, isEditing?: boolean, viewPosition?: number) => { if (!flatListRef?.current || isEditing) { return; } - flatListRef.current.scrollToIndex({index, animated: true}); + flatListRef.current.scrollToIndex({index, animated: true, viewPosition}); }, [flatListRef], ); diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts index 6706f00e1744..3c8fa759df24 100644 --- a/src/hooks/useReportScrollManager/types.ts +++ b/src/hooks/useReportScrollManager/types.ts @@ -2,7 +2,7 @@ import type {FlatListRefType} from '@pages/home/ReportScreenContext'; type ReportScrollManagerData = { ref: FlatListRefType; - scrollToIndex: (index: number, isEditing?: boolean) => void; + scrollToIndex: (index: number, isEditing?: boolean, viewPosition?: number) => void; scrollToBottom: () => void; scrollToEnd: () => void; scrollToOffset: (offset: number) => void; diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 09466a3c3138..6e7570084f63 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -388,6 +388,9 @@ type PureReportActionItemProps = { /** Current user's account id */ currentUserAccountID?: number; + /** Whether the flatlist is reverted */ + isReverted?: boolean; + /** The bank account list */ bankAccountList?: OnyxTypes.BankAccountList | undefined; }; @@ -456,6 +459,7 @@ function PureReportActionItem({ shouldHighlight = false, isTryNewDotNVPDismissed = false, currentUserAccountID, + isReverted, bankAccountList, }: PureReportActionItemProps) { const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext); @@ -1492,6 +1496,7 @@ function PureReportActionItem({ (chatIncludesConcierge(report) && isBlockedFromConcierge(blockedFromConcierge)) || isArchivedNonExpenseReport(report, isArchivedRoom) } isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE} + isReverted={isReverted} /> )} diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 0e5a1f953c40..75c7e8ae31f0 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -83,6 +83,9 @@ type ReportActionItemMessageEditProps = { /** Whether report is from group policy */ isGroupPolicyReport: boolean; + /** Whether the flatlist is reverted */ + isReverted?: boolean; + /** Reference to the outer element */ ref?: ForwardedRef; }; @@ -106,6 +109,7 @@ function ReportActionItemMessageEdit({ index, isGroupPolicyReport, shouldDisableEmojiPicker = false, + isReverted = true, ref, }: ReportActionItemMessageEditProps) { const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {canBeMissing: true}); @@ -417,6 +421,25 @@ function ReportActionItemMessageEdit({ [cursorPositionValue, measureContainer, selection, isScrolling], ); + const scrollToIndex = useCallback( + (i: number, isEditing?: boolean, viewPosition?: number, shouldDelay = false) => { + if (shouldDelay) { + setTimeout(() => { + requestAnimationFrame(() => { + reportScrollManager.scrollToIndex(i, isEditing, viewPosition); + }); + }, 400); + } else { + InteractionManager.runAfterInteractions(() => { + requestAnimationFrame(() => { + reportScrollManager.scrollToIndex(i, isEditing, viewPosition); + }); + }); + } + }, + [reportScrollManager], + ); + useEffect(() => { // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data. tag.set(findNodeHandle(textInputRef.current) ?? -1); @@ -513,7 +536,7 @@ function ReportActionItemMessageEdit({ // eslint-disable-next-line @typescript-eslint/no-deprecated InteractionManager.runAfterInteractions(() => { requestAnimationFrame(() => { - reportScrollManager.scrollToIndex(index, true); + scrollToIndex(index, true, isReverted ? 0 : 1, !isReverted); endScrollBlock(); }); }); diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index e0e038f25819..3247d8d51134 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -84,6 +84,8 @@ type ReportActionItemParentActionProps = { /** User billing fund ID */ userBillingFundID: number | undefined; + /** Whether the flatlist is reverted */ + isReverted?: boolean; /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */ isTryNewDotNVPDismissed: boolean | undefined; @@ -110,6 +112,7 @@ function ReportActionItemParentAction({ allEmojiReactions, linkedTransactionRouteError, userBillingFundID, + isReverted, isTryNewDotNVPDismissed = false, isReportArchived = false, }: ReportActionItemParentActionProps) { @@ -201,6 +204,7 @@ function ReportActionItemParentAction({ linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} isTryNewDotNVPDismissed={isTryNewDotNVPDismissed} + isReverted={isReverted} /> ); diff --git a/src/pages/home/report/ReportActionsListItemRenderer.tsx b/src/pages/home/report/ReportActionsListItemRenderer.tsx index ddaf25718a7c..3851e8741c3c 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.tsx +++ b/src/pages/home/report/ReportActionsListItemRenderer.tsx @@ -93,6 +93,8 @@ type ReportActionsListItemRendererProps = { /** All emoji reactions collection */ allEmojiReactions?: OnyxCollection; + /** Whether the flatlist is reverted */ + isReverted?: boolean; /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */ isTryNewDotNVPDismissed: boolean | undefined; /** Whether the report is archived */ @@ -128,6 +130,7 @@ function ReportActionsListItemRenderer({ personalDetails, allDraftMessages, allEmojiReactions, + isReverted, isTryNewDotNVPDismissed = false, isReportArchived = false, }: ReportActionsListItemRendererProps) { @@ -226,6 +229,7 @@ function ReportActionsListItemRenderer({ allEmojiReactions={allEmojiReactions} linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} + isReverted={isReverted} isTryNewDotNVPDismissed={isTryNewDotNVPDismissed} isReportArchived={isReportArchived} /> @@ -259,6 +263,7 @@ function ReportActionsListItemRenderer({ emojiReactions={emojiReactions} linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} + isReverted={isReverted} isTryNewDotNVPDismissed={isTryNewDotNVPDismissed} /> );