Skip to content

Commit dd0b8e6

Browse files
roryabrahamroryabraham
authored
Merge pull request #93020 from software-mansion-labs/collectioneur/transition-tracker-batch-2-part-3
[BATCH 2] Migrate Navigation usage, part 3
2 parents dd5a318 + 1343a80 commit dd0b8e6

4 files changed

Lines changed: 62 additions & 40 deletions

File tree

‎src/CONST/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,7 @@ const CONST = {
259259
COMPOSER_FOCUS_DELAY: 150,
260260
MAX_TRANSITION_DURATION_MS: 1000,
261261
MAX_TRANSITION_START_WAIT_MS: 1000,
262+
EXPENSE_REPORT_DELETE_DELAY_MS: 300,
262263
ANIMATION_DIRECTION: {
263264
IN: 'in',
264265
OUT: 'out',

‎src/components/MoneyRequestHeaderSecondaryActions.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import {shouldFailAllRequestsSelector} from '@selectors/Network';
33
import {hasSeenTourSelector} from '@selectors/Onboarding';
44
import {validTransactionDraftsSelector} from '@selectors/TransactionDraft';
55
import React, {useRef, useState} from 'react';
6-
// eslint-disable-next-line no-restricted-imports
7-
import {InteractionManager} from 'react-native';
86
import type {ValueOf} from 'type-fest';
97
import useConfirmModal from '@hooks/useConfirmModal';
108
import {useCurrencyListActions} from '@hooks/useCurrencyList';
@@ -84,7 +82,7 @@ type MoneyRequestHeaderSecondaryActionsProps = {
8482
reportID: string | undefined;
8583

8684
/** Method to trigger when pressing close button of the header */
87-
onBackButtonPress: (prioritizeBackTo?: boolean) => void;
85+
onBackButtonPress: (prioritizeBackTo?: boolean, options?: {afterTransition?: () => void}) => void;
8886
};
8987

9088
function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: MoneyRequestHeaderSecondaryActionsProps) {
@@ -443,6 +441,8 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
443441
}
444442
const backToRoute = route.params?.backTo ?? Navigation.getActiveRoute();
445443
setDeleteTransactionNavigateBackUrl(backToRoute);
444+
445+
let afterDelete: (() => void) | undefined;
446446
if (isTrackExpenseAction(parentReportAction) && !isExpenseSplit) {
447447
deleteTrackExpense({
448448
chatReportID: report?.parentReportID,
@@ -465,8 +465,7 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
465465
deleteTransactions([transaction.transactionID], duplicateTransactions, duplicateTransactionViolations, currentSearchHash, true);
466466
return;
467467
}
468-
// eslint-disable-next-line @typescript-eslint/no-deprecated
469-
InteractionManager.runAfterInteractions(() => {
468+
afterDelete = () => {
470469
const deleteResult = deleteTransactions(
471470
[transaction.transactionID],
472471
duplicateTransactions,
@@ -480,14 +479,19 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
480479
}
481480

482481
removeTransaction(transaction.transactionID);
483-
});
482+
};
484483
}
485484
if (isInNarrowPaneModal) {
486-
Navigation.navigateBackToLastSuperWideRHPScreen();
485+
// The super wide RHP close animation was changed, and because of that the report was deleted right after
486+
// the animation finished, which caused flickering in the reports list. We want the user to see
487+
// the expense in the list for a little bit longer, so we wait for the animation to finish and then
488+
// add an additional delay before removing it.
489+
// See https://github.com/Expensify/App/issues/92036
490+
Navigation.navigateBackToLastSuperWideRHPScreen({afterTransition: () => setTimeout(() => afterDelete?.(), CONST.EXPENSE_REPORT_DELETE_DELAY_MS)});
487491
return;
488492
}
489493

490-
onBackButtonPress();
494+
onBackButtonPress(false, {afterTransition: afterDelete});
491495
});
492496
},
493497
},

‎src/hooks/useExpenseActions.ts‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -510,24 +510,33 @@ function useExpenseActions({reportID, isReportInSearch = false, backTo, onDuplic
510510
);
511511
const deleteNavigateBackUrl = goBackRoute ?? backTo ?? Navigation.getActiveRoute();
512512
setDeleteTransactionNavigateBackUrl(deleteNavigateBackUrl);
513+
// The wide RHP close animation was changed, and because of that the expense was deleted right after
514+
// the animation finished, which caused flickering in the expenses list. We want the user to see
515+
// the expense in the list for a little bit longer, so we wait for the animation to finish and then
516+
// add an additional delay before removing it.
517+
// See https://github.com/Expensify/App/issues/92036
518+
const afterTransition = () => {
519+
setTimeout(() => {
520+
const deleteResult = deleteTransactions(
521+
[transaction.transactionID],
522+
duplicateTransactions,
523+
duplicateTransactionViolations,
524+
isReportInSearch ? currentSearchHash : undefined,
525+
false,
526+
);
527+
528+
if (deleteResult.action === 'redirected') {
529+
return;
530+
}
531+
532+
removeTransaction(transaction.transactionID);
533+
}, CONST.EXPENSE_REPORT_DELETE_DELAY_MS);
534+
};
513535
if (goBackRoute) {
514-
navigateOnDeleteExpense(goBackRoute);
536+
navigateOnDeleteExpense(goBackRoute, afterTransition);
537+
} else {
538+
afterTransition();
515539
}
516-
InteractionManager.runAfterInteractions(() => {
517-
const deleteResult = deleteTransactions(
518-
[transaction.transactionID],
519-
duplicateTransactions,
520-
duplicateTransactionViolations,
521-
isReportInSearch ? currentSearchHash : undefined,
522-
false,
523-
);
524-
525-
if (deleteResult.action === 'redirected') {
526-
return;
527-
}
528-
529-
removeTransaction(transaction.transactionID);
530-
});
531540
}
532541
return;
533542
}
@@ -546,19 +555,27 @@ function useExpenseActions({reportID, isReportInSearch = false, backTo, onDuplic
546555
const deleteNavigateBackUrl = backToRoute ?? Navigation.getActiveRoute();
547556
setDeleteTransactionNavigateBackUrl(deleteNavigateBackUrl);
548557

558+
// The wide RHP close animation was changed, and because of that the report was deleted right after
559+
// the animation finished, which caused flickering in the reports list. We want the user to see
560+
// the report in the list for a little bit longer, so we wait for the animation to finish and then
561+
// add an additional delay before removing it.
562+
// See https://github.com/Expensify/App/issues/92036
549563
Navigation.setNavigationActionToMicrotaskQueue(() => {
550-
Navigation.goBack(backToRoute);
551-
InteractionManager.runAfterInteractions(() => {
552-
deleteAppReport({
553-
report: moneyRequestReport,
554-
selfDMReport,
555-
currentUserEmailParam: email ?? '',
556-
currentUserAccountIDParam: accountID,
557-
reportTransactions,
558-
allTransactionViolations,
559-
bankAccountList,
560-
hash: currentSearchHash,
561-
});
564+
Navigation.goBack(backToRoute, {
565+
afterTransition: () => {
566+
setTimeout(() => {
567+
deleteAppReport({
568+
report: moneyRequestReport,
569+
selfDMReport,
570+
currentUserEmailParam: email ?? '',
571+
currentUserAccountIDParam: accountID,
572+
reportTransactions,
573+
allTransactionViolations,
574+
bankAccountList,
575+
hash: currentSearchHash,
576+
});
577+
}, CONST.EXPENSE_REPORT_DELETE_DELAY_MS);
578+
},
562579
});
563580
});
564581
},

‎src/libs/ReportUtils.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5961,20 +5961,20 @@ function goBackFromPrivateNotes(report: OnyxEntry<Report>, accountID?: number) {
59615961
Navigation.goBack();
59625962
}
59635963

5964-
function navigateOnDeleteExpense(backToRoute: Route) {
5964+
function navigateOnDeleteExpense(backToRoute: Route, afterTransition?: () => void) {
59655965
if (isSearchTopmostFullScreenRoute()) {
5966-
Navigation.dismissModal();
5966+
Navigation.dismissModal({afterTransition});
59675967
return;
59685968
}
59695969

59705970
const rootState = navigationRef.getRootState();
59715971
const focusedRoute = findFocusedRoute(rootState);
59725972
if (focusedRoute?.params && 'backTo' in focusedRoute.params) {
5973-
Navigation.goBack(focusedRoute.params.backTo as Route);
5973+
Navigation.goBack(focusedRoute.params.backTo as Route, {afterTransition});
59745974
return;
59755975
}
59765976

5977-
Navigation.goBack(backToRoute);
5977+
Navigation.goBack(backToRoute, {afterTransition});
59785978
}
59795979

59805980
/**

0 commit comments

Comments
 (0)