From 0843b661532c7e8e88fd105473ede37e4af848fd Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 25 Aug 2024 06:29:51 +0530 Subject: [PATCH 001/381] fix: Dupe detect - Tax field does not show the Default label on the confirmation page. Signed-off-by: krishna2323 --- src/libs/TransactionUtils/index.ts | 25 ++++++++++++++++--- .../ReviewDescription.tsx | 3 ++- src/types/onyx/ReviewDuplicates.ts | 4 +++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts index e5bd5d9b0753..986435041fa6 100644 --- a/src/libs/TransactionUtils/index.ts +++ b/src/libs/TransactionUtils/index.ts @@ -959,9 +959,27 @@ function compareDuplicateTransactionFields(transactionID: string): {keep: Partia ]; } + const getTransactionCommentWithoutWaypointKeys = (firstTransaction: OnyxEntry) => { + // Remove keyForList from each waypoint + const updatedWaypoints = Object.fromEntries(Object.entries(firstTransaction?.waypoints ?? {}).map(([key, waypoint]) => [key, (({keyForList, ...rest}) => rest)(waypoint)])); + + // Create the new object + const updatedData = { + ...firstTransaction, + waypoints: updatedWaypoints, + }; + + return updatedData; + }; + // Helper function to check if all comments are equal function areAllCommentsEqual(items: Array>, firstTransaction: OnyxEntry) { - return items.every((item) => lodashIsEqual(item?.comment, firstTransaction?.comment)); + return items.every((item) => { + if (item?.comment?.waypoints) { + return lodashIsEqual(getTransactionCommentWithoutWaypointKeys(item.comment), getTransactionCommentWithoutWaypointKeys(firstTransaction?.comment)); + } + return lodashIsEqual(item?.comment, firstTransaction?.comment); + }); } // Helper function to check if all fields are equal for a given key @@ -986,10 +1004,11 @@ function compareDuplicateTransactionFields(transactionID: string): {keep: Partia if (fieldName === 'description') { const allCommentsAreEqual = areAllCommentsEqual(transactions, firstTransaction); - const allCommentsAreEmpty = isFirstTransactionCommentEmptyObject && transactions.every((item) => item?.comment === undefined); + const allCommentsAreEmpty = isFirstTransactionCommentEmptyObject && transactions.every((item) => !item?.comment); if (allCommentsAreEqual || allCommentsAreEmpty) { keep[fieldName] = firstTransaction?.comment?.comment ?? firstTransaction?.comment; + keep.comment = firstTransaction?.comment; } else { processChanges(fieldName, transactions, keys); } @@ -1027,7 +1046,7 @@ function buildNewTransactionAfterReviewingDuplicates(reviewDuplicateTransaction: ...restReviewDuplicateTransaction, modifiedMerchant: reviewDuplicateTransaction?.merchant, merchant: reviewDuplicateTransaction?.merchant, - comment: {comment: reviewDuplicateTransaction?.description}, + comment: {...reviewDuplicateTransaction?.comment, comment: reviewDuplicateTransaction?.description}, }; } diff --git a/src/pages/TransactionDuplicate/ReviewDescription.tsx b/src/pages/TransactionDuplicate/ReviewDescription.tsx index e6229afe48ac..be7bb7ca4b18 100644 --- a/src/pages/TransactionDuplicate/ReviewDescription.tsx +++ b/src/pages/TransactionDuplicate/ReviewDescription.tsx @@ -33,7 +33,8 @@ function ReviewDescription() { ); const setDescription = (data: FieldItemType<'description'>) => { if (data.value !== undefined) { - setReviewDuplicatesKey({description: data.value}); + const comment = compareResult.change.description?.find((d) => d?.comment === data.value); + setReviewDuplicatesKey({description: data.value, comment}); } navigateToNextScreen(); }; diff --git a/src/types/onyx/ReviewDuplicates.ts b/src/types/onyx/ReviewDuplicates.ts index 0682ed0a7f7c..e8944a9f56b0 100644 --- a/src/types/onyx/ReviewDuplicates.ts +++ b/src/types/onyx/ReviewDuplicates.ts @@ -1,3 +1,5 @@ +import type {Comment} from './Transaction'; + /** * Model of review duplicates request */ @@ -26,6 +28,8 @@ type ReviewDuplicates = { /** Description which user want to keep */ description: string; + /** Description which user want to keep */ + comment: Comment; /** Whether the transaction is reimbursable */ reimbursable: boolean; From ccfc7d86c09920aacf195b711a1b5c7cf43ab68a Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 11 Oct 2024 20:21:48 +0530 Subject: [PATCH 002/381] revert changes. Signed-off-by: krishna2323 --- src/libs/TransactionUtils/index.ts | 25 +++---------------- .../ReviewDescription.tsx | 3 +-- src/types/onyx/ReviewDuplicates.ts | 4 --- 3 files changed, 4 insertions(+), 28 deletions(-) diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts index 986435041fa6..e5bd5d9b0753 100644 --- a/src/libs/TransactionUtils/index.ts +++ b/src/libs/TransactionUtils/index.ts @@ -959,27 +959,9 @@ function compareDuplicateTransactionFields(transactionID: string): {keep: Partia ]; } - const getTransactionCommentWithoutWaypointKeys = (firstTransaction: OnyxEntry) => { - // Remove keyForList from each waypoint - const updatedWaypoints = Object.fromEntries(Object.entries(firstTransaction?.waypoints ?? {}).map(([key, waypoint]) => [key, (({keyForList, ...rest}) => rest)(waypoint)])); - - // Create the new object - const updatedData = { - ...firstTransaction, - waypoints: updatedWaypoints, - }; - - return updatedData; - }; - // Helper function to check if all comments are equal function areAllCommentsEqual(items: Array>, firstTransaction: OnyxEntry) { - return items.every((item) => { - if (item?.comment?.waypoints) { - return lodashIsEqual(getTransactionCommentWithoutWaypointKeys(item.comment), getTransactionCommentWithoutWaypointKeys(firstTransaction?.comment)); - } - return lodashIsEqual(item?.comment, firstTransaction?.comment); - }); + return items.every((item) => lodashIsEqual(item?.comment, firstTransaction?.comment)); } // Helper function to check if all fields are equal for a given key @@ -1004,11 +986,10 @@ function compareDuplicateTransactionFields(transactionID: string): {keep: Partia if (fieldName === 'description') { const allCommentsAreEqual = areAllCommentsEqual(transactions, firstTransaction); - const allCommentsAreEmpty = isFirstTransactionCommentEmptyObject && transactions.every((item) => !item?.comment); + const allCommentsAreEmpty = isFirstTransactionCommentEmptyObject && transactions.every((item) => item?.comment === undefined); if (allCommentsAreEqual || allCommentsAreEmpty) { keep[fieldName] = firstTransaction?.comment?.comment ?? firstTransaction?.comment; - keep.comment = firstTransaction?.comment; } else { processChanges(fieldName, transactions, keys); } @@ -1046,7 +1027,7 @@ function buildNewTransactionAfterReviewingDuplicates(reviewDuplicateTransaction: ...restReviewDuplicateTransaction, modifiedMerchant: reviewDuplicateTransaction?.merchant, merchant: reviewDuplicateTransaction?.merchant, - comment: {...reviewDuplicateTransaction?.comment, comment: reviewDuplicateTransaction?.description}, + comment: {comment: reviewDuplicateTransaction?.description}, }; } diff --git a/src/pages/TransactionDuplicate/ReviewDescription.tsx b/src/pages/TransactionDuplicate/ReviewDescription.tsx index be7bb7ca4b18..e6229afe48ac 100644 --- a/src/pages/TransactionDuplicate/ReviewDescription.tsx +++ b/src/pages/TransactionDuplicate/ReviewDescription.tsx @@ -33,8 +33,7 @@ function ReviewDescription() { ); const setDescription = (data: FieldItemType<'description'>) => { if (data.value !== undefined) { - const comment = compareResult.change.description?.find((d) => d?.comment === data.value); - setReviewDuplicatesKey({description: data.value, comment}); + setReviewDuplicatesKey({description: data.value}); } navigateToNextScreen(); }; diff --git a/src/types/onyx/ReviewDuplicates.ts b/src/types/onyx/ReviewDuplicates.ts index e8944a9f56b0..0682ed0a7f7c 100644 --- a/src/types/onyx/ReviewDuplicates.ts +++ b/src/types/onyx/ReviewDuplicates.ts @@ -1,5 +1,3 @@ -import type {Comment} from './Transaction'; - /** * Model of review duplicates request */ @@ -28,8 +26,6 @@ type ReviewDuplicates = { /** Description which user want to keep */ description: string; - /** Description which user want to keep */ - comment: Comment; /** Whether the transaction is reimbursable */ reimbursable: boolean; From 1408a2d316f6f8bd4381eb55719a7a20acaa5bfe Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 10:38:50 +0200 Subject: [PATCH 003/381] feat: native-stack (initial changes) --- .../MoneyRequestPreviewContent.tsx | 4 +- src/components/ScreenWrapper.tsx | 6 +- .../ScrollOffsetContextProvider.tsx | 9 +- src/components/Search/index.tsx | 4 +- .../withNavigationTransitionEnd.tsx | 4 +- .../Navigation/AppNavigator/AuthScreens.tsx | 51 +++--- .../ModalNavigatorScreenOptions.ts | 19 --- .../ModalStackNavigators/index.tsx | 9 +- .../useModalScreenOptions.ts | 30 ++-- .../Navigators/BottomTabNavigator.tsx | 5 +- .../Navigators/ExplanationModalNavigator.tsx | 7 +- .../FeatureTrainingModalNavigator.tsx | 7 +- .../Navigators/FullScreenNavigator.tsx | 10 +- .../Navigators/LeftModalNavigator.tsx | 14 +- .../Navigators/OnboardingModalNavigator.tsx | 4 +- .../Navigators/Overlay/index.native.tsx | 14 +- .../Navigators/RightModalNavigator.tsx | 34 ++-- .../Navigators/WelcomeVideoModalNavigator.tsx | 6 +- .../OnboardingModalNavigatorScreenOptions.ts | 9 +- .../Navigation/AppNavigator/PublicScreens.tsx | 13 +- .../BottomTabNavigationContentWrapper.tsx | 22 +++ .../createCustomBottomTabNavigator/index.tsx | 88 +++------- .../useCustomState/index.ts | 20 +++ .../CustomFullScreenRouter.tsx | 13 +- .../index.native.tsx | 36 ---- .../createCustomFullScreenNavigator/index.tsx | 59 ++----- .../createCustomFullScreenNavigator/types.ts | 8 - .../CustomRouter.ts | 144 ---------------- .../createCustomStackNavigator/index.tsx | 122 -------------- .../createCustomStackNavigator/types.ts | 13 -- .../createModalCardStyleInterpolator.ts | 49 ------ .../AppNavigator/defaultScreenOptions.ts | 14 +- .../getRootNavigatorScreenOptions.ts | 141 ---------------- .../useModalCardStyleInterpolator.ts | 66 ++++++++ .../AppNavigator/useModalNavigatorOptions.ts | 35 ++++ .../AppNavigator/useRootNavigatorOptions.ts | 155 ++++++++++++++++++ .../index.android.ts | 4 +- src/libs/Navigation/types.ts | 26 ++- src/pages/ConciergePage.tsx | 4 +- .../Debug/DebugDetailsConstantPickerPage.tsx | 4 +- .../Debug/DebugDetailsDateTimePickerPage.tsx | 4 +- src/pages/Debug/Report/DebugReportPage.tsx | 4 +- .../DebugReportActionCreatePage.tsx | 4 +- .../ReportAction/DebugReportActionPage.tsx | 4 +- src/pages/EditReportFieldPage.tsx | 4 +- src/pages/FlagCommentPage.tsx | 4 +- src/pages/GetAssistancePage.tsx | 4 +- src/pages/GroupChatNameEditPage.tsx | 4 +- src/pages/InviteReportParticipantsPage.tsx | 4 +- .../LogInWithShortLivedAuthTokenPage.tsx | 4 +- src/pages/LogOutPreviousUserPage.tsx | 4 +- src/pages/OnboardingEmployees/types.ts | 4 +- src/pages/OnboardingPersonalDetails/types.ts | 16 +- src/pages/OnboardingPurpose/types.ts | 4 +- .../PrivateNotes/PrivateNotesEditPage.tsx | 4 +- .../PrivateNotes/PrivateNotesListPage.tsx | 4 +- src/pages/ProfilePage.tsx | 4 +- src/pages/ReferralDetailsPage.tsx | 4 +- .../ReimbursementAccountPage.tsx | 7 +- src/pages/ReportAvatar.tsx | 4 +- src/pages/ReportDescriptionPage.tsx | 4 +- src/pages/ReportDetailsPage.tsx | 4 +- src/pages/ReportParticipantDetailsPage.tsx | 4 +- .../ReportParticipantRoleSelectionPage.tsx | 4 +- src/pages/ReportParticipantsPage.tsx | 4 +- .../WorkspaceRestrictedActionPage.tsx | 4 +- src/pages/RoomDescriptionPage.tsx | 4 +- src/pages/RoomInvitePage.tsx | 4 +- src/pages/RoomMemberDetailsPage.tsx | 4 +- src/pages/RoomMembersPage.tsx | 7 +- src/pages/Search/SearchHoldReasonPage.tsx | 4 +- src/pages/Search/SearchPage.tsx | 4 +- .../TransactionDuplicate/Confirmation.tsx | 4 +- src/pages/TransactionDuplicate/Review.tsx | 4 +- .../TransactionDuplicate/ReviewBillable.tsx | 4 +- .../TransactionDuplicate/ReviewCategory.tsx | 4 +- .../ReviewDescription.tsx | 4 +- .../TransactionDuplicate/ReviewMerchant.tsx | 4 +- .../ReviewReimbursable.tsx | 4 +- src/pages/TransactionDuplicate/ReviewTag.tsx | 4 +- .../TransactionDuplicate/ReviewTaxCode.tsx | 4 +- src/pages/TransactionReceiptPage.tsx | 4 +- src/pages/UnlinkLoginPage.tsx | 4 +- src/pages/ValidateLoginPage/types.ts | 4 +- src/pages/home/ReportScreen.tsx | 4 +- .../ReportActionCompose/SuggestionEmoji.tsx | 2 +- src/pages/home/report/ReportActionsList.tsx | 4 +- src/pages/home/report/ReportActionsView.tsx | 4 +- src/pages/home/report/ReportAttachments.tsx | 4 +- .../home/report/ReportDetailsExportPage.tsx | 4 +- .../report/ReportDetailsShareCodePage.tsx | 4 +- .../home/report/UserTypingEventListener.tsx | 4 +- .../withReportAndReportActionOrNotFound.tsx | 6 +- .../home/report/withReportOrNotFound.tsx | 42 +++-- src/pages/iou/HoldReasonPage.tsx | 25 +-- src/pages/iou/SplitBillDetailsPage.tsx | 4 +- src/pages/iou/request/IOURequestStartPage.tsx | 13 +- .../step/withFullTransactionOrNotFound.tsx | 7 +- .../step/withWritableReportOrNotFound.tsx | 6 +- src/pages/settings/AboutPage/ConsolePage.tsx | 4 +- src/pages/settings/AboutPage/ShareLogPage.tsx | 4 +- .../ExitSurvey/ExitSurveyConfirmPage.tsx | 4 +- .../ExitSurvey/ExitSurveyResponsePage.tsx | 4 +- .../Contacts/ContactMethodDetailsPage.tsx | 4 +- .../Profile/Contacts/ContactMethodsPage.tsx | 4 +- .../Profile/Contacts/NewContactMethodPage.tsx | 9 +- .../PersonalDetails/CountrySelectionPage.tsx | 4 +- .../PersonalDetails/PersonalAddressPage.tsx | 4 +- src/pages/settings/Profile/ProfileAvatar.tsx | 4 +- src/pages/settings/Report/NamePage.tsx | 4 +- .../Report/NotificationPreferencePage.tsx | 7 +- .../settings/Report/ReportSettingsPage.tsx | 4 +- src/pages/settings/Report/RoomNamePage.tsx | 4 +- src/pages/settings/Report/VisibilityPage.tsx | 7 +- .../settings/Report/WriteCapabilityPage.tsx | 7 +- .../AddDelegate/ConfirmDelegatePage.tsx | 4 +- .../AddDelegate/DelegateMagicCodePage.tsx | 4 +- .../AddDelegate/SelectDelegateRolePage.tsx | 4 +- .../settings/Security/CloseAccountPage.tsx | 4 +- .../TwoFactorAuth/Steps/CodesStep.tsx | 4 +- .../TwoFactorAuth/TwoFactorAuthSteps.tsx | 4 +- .../Subscription/SubscriptionSize/index.tsx | 4 +- .../Wallet/ActivatePhysicalCardPage.tsx | 4 +- .../Wallet/Card/GetPhysicalCardAddress.tsx | 4 +- .../Wallet/Card/GetPhysicalCardConfirm.tsx | 4 +- .../Wallet/Card/GetPhysicalCardName.tsx | 4 +- .../Wallet/Card/GetPhysicalCardPhone.tsx | 4 +- .../settings/Wallet/ExpensifyCardPage.tsx | 4 +- .../settings/Wallet/ReportCardLostPage.tsx | 4 +- .../Wallet/ReportVirtualCardFraudPage.tsx | 4 +- .../settings/Wallet/VerifyAccountPage.tsx | 4 +- src/pages/tasks/NewTaskDescriptionPage.tsx | 4 +- src/pages/tasks/NewTaskDetailsPage.tsx | 4 +- src/pages/tasks/NewTaskPage.tsx | 4 +- src/pages/tasks/NewTaskTitlePage.tsx | 4 +- src/pages/tasks/TaskAssigneeSelectorModal.tsx | 4 +- src/pages/tasks/TaskDescriptionPage.tsx | 4 +- src/pages/tasks/TaskTitlePage.tsx | 4 +- src/pages/wallet/WalletStatementPage.tsx | 4 +- src/pages/workspace/WorkspaceAvatar.tsx | 4 +- src/pages/workspace/WorkspaceInitialPage.tsx | 4 +- .../workspace/WorkspaceInviteMessagePage.tsx | 4 +- src/pages/workspace/WorkspaceInvitePage.tsx | 4 +- src/pages/workspace/WorkspaceJoinUserPage.tsx | 4 +- src/pages/workspace/WorkspaceMembersPage.tsx | 6 +- .../workspace/WorkspaceMoreFeaturesPage.tsx | 4 +- .../workspace/WorkspaceProfileAddressPage.tsx | 4 +- src/pages/workspace/WorkspaceProfilePage.tsx | 4 +- .../EnterSageIntacctCredentialsPage.tsx | 4 +- .../intacct/ExistingConnectionsPage.tsx | 4 +- .../intacct/SageIntacctPrerequisitesPage.tsx | 4 +- .../export/SageIntacctDefaultVendorPage.tsx | 4 +- .../SageIntacctEditUserDimensionsPage.tsx | 4 +- .../import/SageIntacctMappingsTypePage.tsx | 4 +- .../import/SageIntacctToggleMappingsPage.tsx | 4 +- .../NetSuiteExistingConnectionsPage.tsx | 4 +- .../qbd/QuickBooksDesktopSetupPage.tsx | 4 +- .../qbd/RequireQuickBooksDesktopPage.tsx | 4 +- .../reconciliation/CardReconciliationPage.tsx | 4 +- .../ReconciliationAccountSettingsPage.tsx | 4 +- .../XeroOrganizationConfigurationPage.tsx | 4 +- .../categories/CategoryApproverPage.tsx | 4 +- .../categories/CategoryDefaultTaxRatePage.tsx | 4 +- .../CategoryDescriptionHintPage.tsx | 4 +- .../CategoryFlagAmountsOverPage.tsx | 4 +- .../categories/CategoryGLCodePage.tsx | 4 +- .../categories/CategoryPayrollCodePage.tsx | 4 +- .../CategoryRequireReceiptsOverPage.tsx | 4 +- .../categories/CategorySettingsPage.tsx | 4 +- .../categories/CreateCategoryPage.tsx | 4 +- .../workspace/categories/EditCategoryPage.tsx | 4 +- .../categories/ImportCategoriesPage.tsx | 4 +- .../categories/ImportedCategoriesPage.tsx | 4 +- .../categories/WorkspaceCategoriesPage.tsx | 4 +- ...kspaceCompanyCardAccountSelectCardPage.tsx | 4 +- .../WorkspaceCompanyCardDetailsPage.tsx | 4 +- .../WorkspaceCompanyCardEditCardNamePage.tsx | 4 +- .../WorkspaceCompanyCardFeedSelectorPage.tsx | 4 +- .../WorkspaceCompanyCardsPage.tsx | 4 +- ...kspaceCompanyCardsSettingsFeedNamePage.tsx | 4 +- .../WorkspaceCompanyCardsSettingsPage.tsx | 4 +- .../distanceRates/CreateDistanceRatePage.tsx | 4 +- .../PolicyDistanceRateDetailsPage.tsx | 4 +- .../PolicyDistanceRateEditPage.tsx | 4 +- .../PolicyDistanceRateTaxRateEditPage.tsx | 4 +- ...licyDistanceRateTaxReclaimableEditPage.tsx | 5 +- .../distanceRates/PolicyDistanceRatesPage.tsx | 4 +- .../PolicyDistanceRatesSettingsPage.tsx | 4 +- .../WorkspaceCardSettingsPage.tsx | 4 +- .../expensifyCard/WorkspaceCardsListLabel.tsx | 4 +- .../WorkspaceEditCardLimitPage.tsx | 4 +- .../WorkspaceEditCardLimitTypePage.tsx | 4 +- .../WorkspaceEditCardNamePage.tsx | 4 +- .../WorkspaceExpensifyCardBankAccounts.tsx | 4 +- .../WorkspaceExpensifyCardDetailsPage.tsx | 4 +- .../WorkspaceExpensifyCardListPage.tsx | 4 +- .../WorkspaceExpensifyCardPage.tsx | 4 +- .../WorkspaceExpensifyCardPageEmptyState.tsx | 4 +- .../WorkspaceSettlementAccountPage.tsx | 4 +- .../WorkspaceSettlementFrequencyPage.tsx | 7 +- .../issueNew/IssueNewCardPage.tsx | 4 +- .../invoices/WorkspaceInvoicesPage.tsx | 4 +- .../WorkspaceInvoicingDetailsName.tsx | 4 +- .../WorkspaceInvoicingDetailsWebsite.tsx | 4 +- .../workspace/members/ImportMembersPage.tsx | 4 +- .../workspace/members/ImportedMembersPage.tsx | 4 +- .../members/WorkspaceMemberDetailsPage.tsx | 4 +- .../members/WorkspaceMemberNewCardPage.tsx | 4 +- .../members/WorkspaceOwnerChangeErrorPage.tsx | 4 +- .../WorkspaceOwnerChangeSuccessPage.tsx | 4 +- .../WorkspaceOwnerChangeWrapperPage.tsx | 4 +- .../reportFields/CreateReportFieldsPage.tsx | 4 +- .../ReportFieldsAddListValuePage.tsx | 4 +- .../ReportFieldsEditValuePage.tsx | 4 +- .../ReportFieldsInitialValuePage.tsx | 5 +- .../ReportFieldsListValuesPage.tsx | 4 +- .../reportFields/ReportFieldsSettingsPage.tsx | 4 +- .../ReportFieldsValueSettingsPage.tsx | 4 +- .../WorkspaceReportFieldsPage.tsx | 4 +- src/pages/workspace/rules/PolicyRulesPage.tsx | 4 +- .../RulesAutoApproveReportsUnderPage.tsx | 4 +- .../rules/RulesAutoPayReportsUnderPage.tsx | 4 +- .../rules/RulesBillableDefaultPage.tsx | 4 +- .../workspace/rules/RulesCustomNamePage.tsx | 4 +- .../rules/RulesMaxExpenseAgePage.tsx | 4 +- .../rules/RulesMaxExpenseAmountPage.tsx | 4 +- .../rules/RulesRandomReportAuditPage.tsx | 4 +- .../rules/RulesReceiptRequiredAmountPage.tsx | 4 +- src/pages/workspace/tags/EditTagPage.tsx | 4 +- src/pages/workspace/tags/ImportTagsPage.tsx | 4 +- src/pages/workspace/tags/ImportedTagsPage.tsx | 4 +- src/pages/workspace/tags/TagApproverPage.tsx | 4 +- src/pages/workspace/tags/TagGLCodePage.tsx | 4 +- src/pages/workspace/tags/TagSettingsPage.tsx | 4 +- .../workspace/tags/WorkspaceCreateTagPage.tsx | 4 +- .../workspace/tags/WorkspaceEditTagsPage.tsx | 4 +- .../workspace/tags/WorkspaceTagsPage.tsx | 4 +- .../tags/WorkspaceTagsSettingsPage.tsx | 4 +- .../workspace/tags/WorkspaceViewTagsPage.tsx | 4 +- src/pages/workspace/taxes/NamePage.tsx | 4 +- src/pages/workspace/taxes/ValuePage.tsx | 4 +- .../taxes/WorkspaceCreateTaxPage.tsx | 4 +- .../workspace/taxes/WorkspaceEditTaxPage.tsx | 4 +- .../workspace/taxes/WorkspaceTaxCodePage.tsx | 4 +- .../workspace/taxes/WorkspaceTaxesPage.tsx | 4 +- .../WorkspaceTaxesSettingsCustomTaxName.tsx | 5 +- .../WorkspaceTaxesSettingsForeignCurrency.tsx | 4 +- .../taxes/WorkspaceTaxesSettingsPage.tsx | 4 +- ...orkspaceTaxesSettingsWorkspaceCurrency.tsx | 4 +- .../upgrade/WorkspaceUpgradePage.tsx | 4 +- src/pages/workspace/withPolicy.tsx | 4 +- .../WorkspaceAutoReportingFrequencyPage.tsx | 4 +- ...orkspaceAutoReportingMonthlyOffsetPage.tsx | 5 +- .../workflows/WorkspaceWorkflowsPage.tsx | 4 +- .../workflows/WorkspaceWorkflowsPayerPage.tsx | 4 +- ...orkspaceWorkflowsApprovalsApproverPage.tsx | 4 +- .../WorkspaceWorkflowsApprovalsCreatePage.tsx | 5 +- .../WorkspaceWorkflowsApprovalsEditPage.tsx | 5 +- ...paceWorkflowsApprovalsExpensesFromPage.tsx | 4 +- tests/perf-test/ReportScreen.perf-test.tsx | 10 +- tests/unit/NextStepUtilsTest.ts | 4 + 261 files changed, 1000 insertions(+), 1288 deletions(-) delete mode 100644 src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts create mode 100644 src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabNavigationContentWrapper.tsx create mode 100644 src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/useCustomState/index.ts delete mode 100644 src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.native.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts delete mode 100644 src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts delete mode 100644 src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts delete mode 100644 src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts delete mode 100644 src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts create mode 100644 src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts create mode 100644 src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts create mode 100644 src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index 9329558d6531..a41779a34e3b 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import lodashSortBy from 'lodash/sortBy'; import truncate from 'lodash/truncate'; @@ -29,6 +28,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as IOUUtils from '@libs/IOUUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReceiptUtils from '@libs/ReceiptUtils'; @@ -70,7 +70,7 @@ function MoneyRequestPreviewContent({ const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {windowWidth} = useWindowDimensions(); - const route = useRoute>(); + const route = useRoute>(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || '-1'}`); diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 9a85e1d3af24..9740acf1d266 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -1,5 +1,4 @@ import {useIsFocused, useNavigation} from '@react-navigation/native'; -import type {StackNavigationProp} from '@react-navigation/stack'; import type {ForwardedRef, ReactNode} from 'react'; import React, {createContext, forwardRef, useEffect, useMemo, useRef, useState} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; @@ -15,6 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; +import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, RootStackParamList} from '@libs/Navigation/types'; import toggleTestToolsModal from '@userActions/TestTool'; import CONST from '@src/CONST'; @@ -97,7 +97,7 @@ type ScreenWrapperProps = { * * This is required because transitionEnd event doesn't trigger in the testing environment. */ - navigation?: StackNavigationProp | StackNavigationProp; + navigation?: PlatformStackNavigationProp | PlatformStackNavigationProp; /** Whether to show offline indicator on wide screens */ shouldShowOfflineIndicatorInWideScreen?: boolean; @@ -142,7 +142,7 @@ function ScreenWrapper( * so in other places where ScreenWrapper is used, we need to * fallback to useNavigation. */ - const navigationFallback = useNavigation>(); + const navigationFallback = useNavigation>(); const navigation = navigationProp ?? navigationFallback; const isFocused = useIsFocused(); const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight); diff --git a/src/components/ScrollOffsetContextProvider.tsx b/src/components/ScrollOffsetContextProvider.tsx index d7815d7a65a0..78d8c5ed61fb 100644 --- a/src/components/ScrollOffsetContextProvider.tsx +++ b/src/components/ScrollOffsetContextProvider.tsx @@ -1,7 +1,8 @@ -import type {ParamListBase, RouteProp} from '@react-navigation/native'; +import type {ParamListBase} from '@react-navigation/native'; import React, {createContext, useCallback, useEffect, useMemo, useRef} from 'react'; import {withOnyx} from 'react-native-onyx'; import usePrevious from '@hooks/usePrevious'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NavigationPartialRoute, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -10,10 +11,10 @@ import type {PriorityMode} from '@src/types/onyx'; type ScrollOffsetContextValue = { /** Save scroll offset of flashlist on given screen */ - saveScrollOffset: (route: RouteProp, scrollOffset: number) => void; + saveScrollOffset: (route: PlatformStackRouteProp, scrollOffset: number) => void; /** Get scroll offset value for given screen */ - getScrollOffset: (route: RouteProp) => number | undefined; + getScrollOffset: (route: PlatformStackRouteProp) => number | undefined; /** Clean scroll offsets of screen that aren't anymore in the state */ cleanStaleScrollOffsets: (state: State) => void; @@ -38,7 +39,7 @@ const defaultValue: ScrollOffsetContextValue = { const ScrollOffsetContext = createContext(defaultValue); /** This function is prepared to work with HOME screens. May need modification if we want to handle other types of screens. */ -function getKey(route: RouteProp | NavigationPartialRoute): string { +function getKey(route: PlatformStackRouteProp | NavigationPartialRoute): string { if (route.params && 'policyID' in route.params && typeof route.params.policyID === 'string') { return `${route.name}-${route.params.policyID}`; } diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 670cfef54df8..c61d6a241df5 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -1,5 +1,4 @@ import {useNavigation} from '@react-navigation/native'; -import type {StackNavigationProp} from '@react-navigation/stack'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import type {NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native'; @@ -21,6 +20,7 @@ import * as SearchActions from '@libs/actions/Search'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Log from '@libs/Log'; import memoize from '@libs/memoize'; +import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as SearchUtils from '@libs/SearchUtils'; import Navigation from '@navigation/Navigation'; @@ -89,7 +89,7 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr const {shouldUseNarrowLayout} = useResponsiveLayout(); const styles = useThemeStyles(); const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout(); - const navigation = useNavigation>(); + const navigation = useNavigation>(); const lastSearchResultsRef = useRef>(); const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, setShouldShowStatusBarLoading, lastSearchType, setLastSearchType} = useSearchContext(); diff --git a/src/components/withNavigationTransitionEnd.tsx b/src/components/withNavigationTransitionEnd.tsx index 83f14a1d58ef..69e04ff22e35 100644 --- a/src/components/withNavigationTransitionEnd.tsx +++ b/src/components/withNavigationTransitionEnd.tsx @@ -1,8 +1,8 @@ import {useNavigation} from '@react-navigation/native'; -import type {StackNavigationProp} from '@react-navigation/stack'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect, useState} from 'react'; import getComponentDisplayName from '@libs/getComponentDisplayName'; +import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {RootStackParamList} from '@libs/Navigation/types'; type WithNavigationTransitionEndProps = {didScreenTransitionEnd: boolean}; @@ -10,7 +10,7 @@ type WithNavigationTransitionEndProps = {didScreenTransitionEnd: boolean}; export default function (WrappedComponent: ComponentType>): React.ComponentType> { function WithNavigationTransitionEnd(props: TProps, ref: ForwardedRef) { const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); - const navigation = useNavigation>(); + const navigation = useNavigation>(); useEffect(() => { const unsubscribeTransitionEnd = navigation.addListener('transitionEnd', () => { diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 7b8589c81e7f..94846c04e334 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -1,4 +1,4 @@ -import React, {memo, useEffect, useMemo, useRef, useState} from 'react'; +import React, {memo, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {withOnyx} from 'react-native-onyx'; @@ -13,14 +13,13 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useOnboardingFlowRouter from '@hooks/useOnboardingFlow'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as Welcome from '@libs/actions/Welcome'; import {READ_COMMANDS} from '@libs/API/types'; import HttpUtils from '@libs/HttpUtils'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Log from '@libs/Log'; import getCurrentUrl from '@libs/Navigation/currentUrl'; -import getOnboardingModalScreenOptions from '@libs/Navigation/getOnboardingModalScreenOptions'; import Navigation from '@libs/Navigation/Navigation'; import shouldOpenOnAdminRoom from '@libs/Navigation/shouldOpenOnAdminRoom'; import type {AuthScreensParamList, CentralPaneName, CentralPaneScreensParamList} from '@libs/Navigation/types'; @@ -56,9 +55,8 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; import beforeRemoveReportOpenedFromSearchRHP from './beforeRemoveReportOpenedFromSearchRHP'; import CENTRAL_PANE_SCREENS from './CENTRAL_PANE_SCREENS'; -import createCustomStackNavigator from './createCustomStackNavigator'; +import createResponsiveStackNavigator from './createResponsiveStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; -import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; import BottomTabNavigator from './Navigators/BottomTabNavigator'; import ExplanationModalNavigator from './Navigators/ExplanationModalNavigator'; import FeatureTrainingModalNavigator from './Navigators/FeatureTrainingModalNavigator'; @@ -67,6 +65,7 @@ import LeftModalNavigator from './Navigators/LeftModalNavigator'; import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator'; import RightModalNavigator from './Navigators/RightModalNavigator'; import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator'; +import useRootNavigatorOptions from './useRootNavigatorOptions'; type AuthScreensProps = { /** Session of currently logged in user */ @@ -194,7 +193,7 @@ function handleNetworkReconnect() { } } -const RootStack = createCustomStackNavigator(); +const RootStack = createResponsiveStackNavigator(); // We want to delay the re-rendering for components(e.g. ReportActionCompose) // that depends on modal visibility until Modal is completely closed and its focused // When modal screen is focused, update modal visibility in Onyx @@ -224,18 +223,12 @@ const modalScreenListenersWithCancelSearch = { function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); - const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils); + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const rootNavigatorOptions = useRootNavigatorOptions(); const {canUseDefaultRooms} = usePermissions(); const {activeWorkspaceID} = useActiveWorkspace(); const {toggleSearchRouter} = useSearchRouterContext(); - const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(onboardingIsMediumOrLargerScreenWidth), [screenOptions, onboardingIsMediumOrLargerScreenWidth]); - const onboardingScreenOptions = useMemo( - () => getOnboardingModalScreenOptions(shouldUseNarrowLayout, styles, StyleUtils, onboardingIsMediumOrLargerScreenWidth), - [StyleUtils, shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth, styles], - ); const modal = useRef({}); const [didPusherInit, setDidPusherInit] = useState(false); const {isOnboardingCompleted} = useOnboardingFlowRouter(); @@ -409,19 +402,16 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie return ( - + {isOnboardingCompleted === false && ( { @@ -559,7 +550,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie /> {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => { diff --git a/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts deleted file mode 100644 index 9dcbe8143b4a..000000000000 --- a/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type {StackNavigationOptions} from '@react-navigation/stack'; -import {CardStyleInterpolators} from '@react-navigation/stack'; -import type {GestureDirection} from '@react-navigation/stack/lib/typescript/src/types'; -import type {ThemeStyles} from '@styles/index'; - -/** - * Modal stack navigator screen options generator function - * @param themeStyles - The styles object - * @returns The screen options object - */ -const ModalNavigatorScreenOptions = (themeStyles: ThemeStyles, gestureDirection: GestureDirection = 'horizontal'): StackNavigationOptions => ({ - headerShown: false, - animationEnabled: true, - gestureDirection, - cardStyle: themeStyles.navigationScreenCardStyle, - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, -}); - -export default ModalNavigatorScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index fabf7fb78591..1e9a11fff115 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -1,7 +1,6 @@ import type {ParamListBase} from '@react-navigation/routers'; -import type {StackNavigationOptions} from '@react-navigation/stack'; -import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; +import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type { AddPersonalBankAccountNavigatorParamList, DebugParamList, @@ -33,10 +32,10 @@ import type { TravelNavigatorParamList, WalletStatementNavigatorParamList, } from '@navigation/types'; -import type {ThemeStyles} from '@styles/index'; import type {Screen} from '@src/SCREENS'; import SCREENS from '@src/SCREENS'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; +import type {GetModalStackScreenOptions} from './useModalScreenOptions'; import useModalScreenOptions from './useModalScreenOptions'; type Screens = Partial React.ComponentType>>; @@ -47,8 +46,8 @@ type Screens = Partial React.ComponentType>>; * @param screens key/value pairs where the key is the name of the screen and the value is a functon that returns the lazy-loaded component * @param getScreenOptions optional function that returns the screen options, override the default options */ -function createModalStackNavigator(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType { - const ModalStackNavigator = createStackNavigator(); +function createModalStackNavigator(screens: Screens, getScreenOptions?: GetModalStackScreenOptions): React.ComponentType { + const ModalStackNavigator = createPlatformStackNavigator(); function ModalStack() { const screenOptions = useModalScreenOptions(getScreenOptions); diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts index 2193dcb2bf6b..e7549cc3f8b7 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts @@ -1,35 +1,39 @@ -import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack'; +import type {StackCardInterpolationProps} from '@react-navigation/stack'; import {CardStyleInterpolators} from '@react-navigation/stack'; import {useMemo} from 'react'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {isSafari} from '@libs/Browser'; -import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator'; +import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; +import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; +import useModalCardStyleInterpolator from '@navigation/AppNavigator/useModalCardStyleInterpolator'; import type {ThemeStyles} from '@src/styles'; -function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions) { +type GetModalStackScreenOptions = (styles: ThemeStyles) => PlatformStackNavigationOptions; + +function useModalScreenOptions(getScreenOptions?: GetModalStackScreenOptions) { const styles = useThemeStyles(); - const styleUtils = useStyleUtils(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); + const customInterpolator = useModalCardStyleInterpolator(); let cardStyleInterpolator = CardStyleInterpolators.forHorizontalIOS; if (isSafari()) { - const customInterpolator = createModalCardStyleInterpolator(styleUtils); - cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(shouldUseNarrowLayout, false, false, props); + cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator({props}); } const defaultSubRouteOptions = useMemo( - (): StackNavigationOptions => ({ - cardStyle: styles.navigationScreenCardStyle, + (): PlatformStackNavigationOptions => ({ + ...hideKeyboardOnSwipe, headerShown: false, - cardStyleInterpolator, + web: { + cardStyle: styles.navigationScreenCardStyle, + cardStyleInterpolator, + }, }), - [styles, cardStyleInterpolator], + [cardStyleInterpolator, styles.navigationScreenCardStyle], ); return getScreenOptions?.(styles) ?? defaultSubRouteOptions; } export default useModalScreenOptions; +export type {GetModalStackScreenOptions}; diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index 30e8d4c668c6..62cceee9f400 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -1,8 +1,8 @@ import {useNavigationState} from '@react-navigation/native'; -import type {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; +import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import SidebarScreen from '@pages/home/sidebar/SidebarScreen'; import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab'; @@ -13,9 +13,8 @@ import ActiveCentralPaneRouteContext from './ActiveCentralPaneRouteContext'; const loadInitialSettingsPage = () => require('../../../../pages/settings/InitialSettingsPage').default; const Tab = createCustomBottomTabNavigator(); -const screenOptions: StackNavigationOptions = { +const screenOptions: PlatformStackNavigationOptions = { headerShown: false, - animationEnabled: false, }; function BottomTabNavigator() { diff --git a/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx index f4136bb8783a..b4626072538f 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx @@ -1,18 +1,19 @@ -import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import ExplanationModal from '@components/ExplanationModal'; +import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {ExplanationModalNavigatorParamList} from '@libs/Navigation/types'; import SCREENS from '@src/SCREENS'; +import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; -const Stack = createStackNavigator(); +const Stack = createPlatformStackNavigator(); function ExplanationModalNavigator() { return ( - + (); +const Stack = createPlatformStackNavigator(); function FeatureTrainingModalNavigator() { return ( - + - + {Object.entries(CENTRAL_PANE_WORKSPACE_SCREENS).map(([screenName, componentGetter]) => ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index 50439c19845e..a269b4c35270 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -1,27 +1,27 @@ -import type {StackScreenProps} from '@react-navigation/stack'; -import {createStackNavigator} from '@react-navigation/stack'; -import React, {useMemo} from 'react'; +import React from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import useModalNavigatorOptions from '@libs/Navigation/AppNavigator/useModalNavigatorOptions'; +import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; import Overlay from './Overlay'; -type LeftModalNavigatorProps = StackScreenProps; +type LeftModalNavigatorProps = PlatformStackScreenProps; const loadWorkspaceSwitcherPage = () => require('../../../../pages/WorkspaceSwitcherPage').default; -const Stack = createStackNavigator(); +const Stack = createPlatformStackNavigator(); function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles, 'horizontal-inverted'), [styles]); + const screenOptions = useModalNavigatorOptions('horizontal-inverted'); return ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx index 4aae43987797..dbe7f70e9628 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx @@ -1,4 +1,3 @@ -import {createStackNavigator} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; @@ -7,6 +6,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import OnboardingModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions'; +import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; import OnboardingRefManager from '@libs/OnboardingRefManager'; import OnboardingAccounting from '@pages/OnboardingAccounting'; @@ -17,7 +17,7 @@ import CONST from '@src/CONST'; import SCREENS from '@src/SCREENS'; import Overlay from './Overlay'; -const Stack = createStackNavigator(); +const Stack = createPlatformStackNavigator(); function OnboardingModalNavigator() { const styles = useThemeStyles(); diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx index 0dd9e203c46b..cde195fca561 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx @@ -1,15 +1,5 @@ -import React from 'react'; -import type {BaseOverlayProps} from './BaseOverlay'; -import BaseOverlay from './BaseOverlay'; - -function Overlay({...rest}: Omit) { - return ( - - ); +function Overlay() { + return null; } Overlay.displayName = 'Overlay'; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 0df3ae3f4b92..726a5305e3ab 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -1,40 +1,47 @@ -import type {StackCardInterpolationProps, StackScreenProps} from '@react-navigation/stack'; -import {createStackNavigator} from '@react-navigation/stack'; +import type {StackCardInterpolationProps} from '@react-navigation/stack'; import React, {useMemo, useRef} from 'react'; import {InteractionManager, View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {abandonReviewDuplicateTransactions} from '@libs/actions/Transaction'; import {isSafari} from '@libs/Browser'; -import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; -import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator'; +import useModalCardStyleInterpolator from '@libs/Navigation/AppNavigator/useModalCardStyleInterpolator'; +import useModalNavigatorOptions from '@libs/Navigation/AppNavigator/useModalNavigatorOptions'; +import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import Overlay from './Overlay'; -type RightModalNavigatorProps = StackScreenProps; +type RightModalNavigatorProps = PlatformStackScreenProps; -const Stack = createStackNavigator(); +const Stack = createPlatformStackNavigator(); function RightModalNavigator({navigation, route}: RightModalNavigatorProps) { const styles = useThemeStyles(); - const styleUtils = useStyleUtils(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const isExecutingRef = useRef(false); + const customInterpolator = useModalCardStyleInterpolator(); + const modalNavigatorOptions = useModalNavigatorOptions(); + const screenOptions = useMemo(() => { - const options = ModalNavigatorScreenOptions(styles); // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator if (isSafari()) { - const customInterpolator = createModalCardStyleInterpolator(styleUtils); - options.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(shouldUseNarrowLayout, false, false, props); + return { + ...modalNavigatorOptions, + web: { + ...modalNavigatorOptions.web, + cardStyleInterpolator: (props: StackCardInterpolationProps) => customInterpolator({props}), + }, + }; } - return options; - }, [shouldUseNarrowLayout, styleUtils, styles]); + return modalNavigatorOptions; + }, [customInterpolator, modalNavigatorOptions]); return ( @@ -170,6 +177,7 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) { (); +const Stack = createPlatformStackNavigator(); function WelcomeVideoModalNavigator() { return ( - + ({ +const OnboardingModalNavigatorScreenOptions = (): PlatformStackNavigationOptions => ({ headerShown: false, - animationEnabled: true, gestureDirection: 'horizontal', - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, presentation: 'transparentModal', + web: { + cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, + }, }); export default OnboardingModalNavigatorScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.tsx b/src/libs/Navigation/AppNavigator/PublicScreens.tsx index cfd41a4b1fa0..dbbb11c978d5 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.tsx +++ b/src/libs/Navigation/AppNavigator/PublicScreens.tsx @@ -1,6 +1,6 @@ -import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; import {NativeModules} from 'react-native'; +import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {PublicScreensParamList} from '@navigation/types'; import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import SessionExpiredPage from '@pages/ErrorPage/SessionExpiredPage'; @@ -15,20 +15,18 @@ import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import defaultScreenOptions from './defaultScreenOptions'; -const RootStack = createStackNavigator(); +const RootStack = createPlatformStackNavigator(); function PublicScreens() { return ( - + {/* The structure for the HOME route has to be the same in public and auth screens. That's why the name for SignInPage is BOTTOM_TAB_NAVIGATOR. */} diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabNavigationContentWrapper.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabNavigationContentWrapper.tsx new file mode 100644 index 000000000000..dd93a6df7b1e --- /dev/null +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabNavigationContentWrapper.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {View} from 'react-native'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useThemeStyles from '@hooks/useThemeStyles'; +import type {NavigationContentWrapperProps} from '@libs/Navigation/PlatformStackNavigation/types'; + +function BottomTabNavigationContentWrapper({children, displayName}: NavigationContentWrapperProps) { + const styles = useThemeStyles(); + + return ( + + {children} + + ); +} + +export default BottomTabNavigationContentWrapper; diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx index 7401c3368124..a4e50aeb6516 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx @@ -1,74 +1,32 @@ -import type {DefaultNavigatorOptions, ParamListBase, StackActionHelpers, StackNavigationState, StackRouterOptions} from '@react-navigation/native'; -import {createNavigatorFactory, StackRouter, useNavigationBuilder} from '@react-navigation/native'; -import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; -import {StackView} from '@react-navigation/stack'; +import type {ParamListBase} from '@react-navigation/native'; +import {createNavigatorFactory} from '@react-navigation/native'; import React from 'react'; -import {View} from 'react-native'; -import ScreenWrapper from '@components/ScreenWrapper'; -import useThemeStyles from '@hooks/useThemeStyles'; -import type {NavigationStateRoute} from '@libs/Navigation/types'; -import SCREENS from '@src/SCREENS'; +import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent'; +import type {ExtraContentProps, PlatformStackNavigationEventMap, PlatformStackNavigationOptions, PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; import BottomTabBar from './BottomTabBar'; +import BottomTabNavigationContentWrapper from './BottomTabNavigationContentWrapper'; +import useCustomState from './useCustomState'; -type CustomNavigatorProps = DefaultNavigatorOptions, StackNavigationOptions, StackNavigationEventMap> & { - initialRouteName: string; +const defaultScreenOptions: PlatformStackNavigationOptions = { + animation: 'none', }; -function getStateToRender(state: StackNavigationState): StackNavigationState { - const routesToRender = [state.routes.at(-1)] as NavigationStateRoute[]; - - // We need to render at least one HOME screen to make sure everything load properly. This may be not necessary after changing how IS_SIDEBAR_LOADED is handled. - // Currently this value will be switched only after the first HOME screen is rendered. - if (routesToRender.at(0)?.name !== SCREENS.HOME) { - const routeToRender = state.routes.find((route) => route.name === SCREENS.HOME); - if (routeToRender) { - routesToRender.unshift(routeToRender); - } - } - - return {...state, routes: routesToRender, index: routesToRender.length - 1}; +function ExtraContent({state}: ExtraContentProps) { + const selectedTab = state.routes.at(-1)?.name; + return ; } -function CustomBottomTabNavigator({initialRouteName, children, screenOptions, ...props}: CustomNavigatorProps) { - const {state, navigation, descriptors, NavigationContent} = useNavigationBuilder< - StackNavigationState, - StackRouterOptions, - StackActionHelpers, - StackNavigationOptions, - StackNavigationEventMap - >(StackRouter, { - children, - screenOptions, - initialRouteName, - }); - - const styles = useThemeStyles(); - const stateToRender = getStateToRender(state); - const selectedTab = stateToRender.routes.at(-1)?.name; - - return ( - - - - - - - - - ); +const CustomBottomTabNavigatorComponent = createPlatformStackNavigatorComponent('CustomBottomTabNavigator', { + useCustomState, + defaultScreenOptions, + NavigationContentWrapper: BottomTabNavigationContentWrapper, + ExtraContent, +}); + +function createCustomBottomTabNavigator() { + return createNavigatorFactory, PlatformStackNavigationOptions, PlatformStackNavigationEventMap, typeof CustomBottomTabNavigatorComponent>( + CustomBottomTabNavigatorComponent, + )(); } -CustomBottomTabNavigator.displayName = 'CustomBottomTabNavigator'; - -export default createNavigatorFactory(CustomBottomTabNavigator); +export default createCustomBottomTabNavigator; diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/useCustomState/index.ts b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/useCustomState/index.ts new file mode 100644 index 000000000000..e95c6c292dbc --- /dev/null +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/useCustomState/index.ts @@ -0,0 +1,20 @@ +import type {CustomStateHookProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import type {NavigationStateRoute} from '@libs/Navigation/types'; +import SCREENS from '@src/SCREENS'; + +function useCustomState({state}: CustomStateHookProps) { + const routesToRender = [state.routes.at(-1)] as NavigationStateRoute[]; + + // We need to render at least one HOME screen to make sure everything load properly. This may be not necessary after changing how IS_SIDEBAR_LOADED is handled. + // Currently this value will be switched only after the first HOME screen is rendered. + if (routesToRender.at(0)?.name !== SCREENS.HOME) { + const routeToRender = state.routes.find((route) => route.name === SCREENS.HOME); + if (routeToRender) { + routesToRender.unshift(routeToRender); + } + } + + return {stateToRender: {...state, routes: routesToRender, index: routesToRender.length - 1}}; +} + +export default useCustomState; diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx index 18cb758c5703..5c837fc93a5b 100644 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx @@ -1,10 +1,10 @@ -import type {ParamListBase, PartialState, RouterConfigOptions, StackNavigationState} from '@react-navigation/native'; +import type {ParamListBase, PartialState, Router, RouterConfigOptions} from '@react-navigation/native'; import {StackRouter} from '@react-navigation/native'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; +import type {PlatformStackNavigationState, PlatformStackRouterOptions} from '@libs/Navigation/PlatformStackNavigation/types'; import SCREENS from '@src/SCREENS'; -import type {FullScreenNavigatorRouterOptions} from './types'; -type StackState = StackNavigationState | PartialState>; +type StackState = PlatformStackNavigationState | PartialState>; const isAtLeastOneInState = (state: StackState, screenName: string): boolean => state.routes.some((route) => route.name === screenName); @@ -49,8 +49,9 @@ function adaptStateIfNecessary(state: StackState) { } } -function CustomFullScreenRouter(options: FullScreenNavigatorRouterOptions) { - const stackRouter = StackRouter(options); +function CustomFullScreenRouter(options: PlatformStackRouterOptions) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const stackRouter = StackRouter(options) as Router, any>; return { ...stackRouter, @@ -65,7 +66,7 @@ function CustomFullScreenRouter(options: FullScreenNavigatorRouterOptions) { return initialState; }, - getRehydratedState(partialState: StackState, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): StackNavigationState { + getRehydratedState(partialState: StackState, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): PlatformStackNavigationState { adaptStateIfNecessary(partialState); const state = stackRouter.getRehydratedState(partialState, {routeNames, routeParamList, routeGetIdList}); return state; diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.native.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.native.tsx deleted file mode 100644 index 2f61f1519df0..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.native.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type {ParamListBase, StackActionHelpers, StackNavigationState} from '@react-navigation/native'; -import {createNavigatorFactory, useNavigationBuilder} from '@react-navigation/native'; -import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; -import {StackView} from '@react-navigation/stack'; -import CustomFullScreenRouter from './CustomFullScreenRouter'; -import type {FullScreenNavigatorProps, FullScreenNavigatorRouterOptions} from './types'; - -function CustomFullScreenNavigator(props: FullScreenNavigatorProps) { - const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder< - StackNavigationState, - FullScreenNavigatorRouterOptions, - StackActionHelpers, - StackNavigationOptions, - StackNavigationEventMap - >(CustomFullScreenRouter, { - children: props.children, - screenOptions: props.screenOptions, - initialRouteName: props.initialRouteName, - }); - - return ( - - - - ); -} - -CustomFullScreenNavigator.displayName = 'CustomFullScreenNavigator'; - -export default createNavigatorFactory, StackNavigationOptions, StackNavigationEventMap, typeof CustomFullScreenNavigator>(CustomFullScreenNavigator); diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx index ee8dd54c920d..204a9780e7d5 100644 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx @@ -1,50 +1,19 @@ -import type {ParamListBase, StackActionHelpers, StackNavigationState} from '@react-navigation/native'; -import {createNavigatorFactory, useNavigationBuilder} from '@react-navigation/native'; -import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; -import {StackView} from '@react-navigation/stack'; -import React, {useEffect} from 'react'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import navigationRef from '@libs/Navigation/navigationRef'; +import type {ParamListBase} from '@react-navigation/native'; +import {createNavigatorFactory} from '@react-navigation/native'; +import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange'; +import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent'; +import type {PlatformStackNavigationEventMap, PlatformStackNavigationOptions, PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; import CustomFullScreenRouter from './CustomFullScreenRouter'; -import type {FullScreenNavigatorProps, FullScreenNavigatorRouterOptions} from './types'; -function CustomFullScreenNavigator(props: FullScreenNavigatorProps) { - const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder< - StackNavigationState, - FullScreenNavigatorRouterOptions, - StackActionHelpers, - StackNavigationOptions, - StackNavigationEventMap - >(CustomFullScreenRouter, { - children: props.children, - screenOptions: props.screenOptions, - initialRouteName: props.initialRouteName, - }); +const CustomFullScreenNavigatorComponent = createPlatformStackNavigatorComponent('CustomFullScreenNavigator', { + createRouter: CustomFullScreenRouter, + useCustomEffects: useNavigationResetOnLayoutChange, +}); - const {shouldUseNarrowLayout} = useResponsiveLayout(); - - useEffect(() => { - if (!navigationRef.isReady()) { - return; - } - // We need to separately reset state of this navigator to trigger getRehydratedState. - navigation.reset(navigation.getState()); - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [shouldUseNarrowLayout]); - - return ( - - - - ); +function createCustomFullScreenNavigator() { + return createNavigatorFactory, PlatformStackNavigationOptions, PlatformStackNavigationEventMap, typeof CustomFullScreenNavigatorComponent>( + CustomFullScreenNavigatorComponent, + )(); } -CustomFullScreenNavigator.displayName = 'CustomFullScreenNavigator'; - -export default createNavigatorFactory, StackNavigationOptions, StackNavigationEventMap, typeof CustomFullScreenNavigator>(CustomFullScreenNavigator); +export default createCustomFullScreenNavigator; diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts deleted file mode 100644 index 7e7808c003d7..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRouterOptions} from '@react-navigation/native'; -import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; - -type FullScreenNavigatorRouterOptions = StackRouterOptions; - -type FullScreenNavigatorProps = DefaultNavigatorOptions, StackNavigationOptions, StackNavigationEventMap>; - -export type {FullScreenNavigatorProps, FullScreenNavigatorRouterOptions}; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts deleted file mode 100644 index 8156425fa904..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ /dev/null @@ -1,144 +0,0 @@ -import type {CommonActions, RouterConfigOptions, StackActionType, StackNavigationState} from '@react-navigation/native'; -import {findFocusedRoute, getPathFromState, StackRouter} from '@react-navigation/native'; -import type {ParamListBase} from '@react-navigation/routers'; -import getIsNarrowLayout from '@libs/getIsNarrowLayout'; -import * as Localize from '@libs/Localize'; -import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'; -import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; -import linkingConfig from '@libs/Navigation/linkingConfig'; -import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath'; -import type {NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; -import {isCentralPaneName, isOnboardingFlowName} from '@libs/NavigationUtils'; -import * as Welcome from '@userActions/Welcome'; -import CONST from '@src/CONST'; -import NAVIGATORS from '@src/NAVIGATORS'; -import SCREENS from '@src/SCREENS'; -import syncBrowserHistory from './syncBrowserHistory'; -import type {ResponsiveStackNavigatorRouterOptions} from './types'; - -function insertRootRoute(state: State, routeToInsert: NavigationPartialRoute) { - const nonModalRoutes = state.routes.filter( - (route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR, - ); - const modalRoutes = state.routes.filter( - (route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR || route.name === NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR, - ); - - // It's safe to modify this state before returning in getRehydratedState. - - // @ts-expect-error Updating read only property - // noinspection JSConstantReassignment - state.routes = [...nonModalRoutes, routeToInsert, ...modalRoutes]; // eslint-disable-line - - // @ts-expect-error Updating read only property - // noinspection JSConstantReassignment - state.index = state.routes.length - 1; // eslint-disable-line - - // @ts-expect-error Updating read only property - // noinspection JSConstantReassignment - state.stale = true; // eslint-disable-line -} - -function compareAndAdaptState(state: StackNavigationState) { - // If the state of the last path is not defined the getPathFromState won't work correctly. - if (!state?.routes.at(-1)?.state) { - return; - } - - // We need to be sure that the bottom tab state is defined. - const topmostBottomTabRoute = getTopmostBottomTabRoute(state); - const isNarrowLayout = getIsNarrowLayout(); - - // This solutions is heuristics and will work for our cases. We may need to improve it in the future if we will have more cases to handle. - if (topmostBottomTabRoute && !isNarrowLayout) { - const fullScreenRoute = state.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR); - - // If there is fullScreenRoute we don't need to add anything. - if (fullScreenRoute) { - return; - } - - // We will generate a template state and compare the current state with it. - // If there is a difference in the screens that should be visible under the overlay, we will add the screen from templateState to the current state. - const pathFromCurrentState = getPathFromState(state, linkingConfig.config); - const {adaptedState: templateState} = getAdaptedStateFromPath(pathFromCurrentState, linkingConfig.config); - - if (!templateState) { - return; - } - - const templateFullScreenRoute = templateState.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR); - - // If templateFullScreenRoute is defined, and full screen route is not in the state, we need to add it. - if (templateFullScreenRoute) { - insertRootRoute(state, templateFullScreenRoute); - return; - } - - const topmostCentralPaneRoute = state.routes.filter((route) => isCentralPaneName(route.name)).at(-1); - const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneName(route.name)); - - const topmostCentralPaneRouteExtracted = getTopmostCentralPaneRoute(state); - const templateCentralPaneRouteExtracted = getTopmostCentralPaneRoute(templateState as State); - - // If there is no templateCentralPaneRoute, we don't have anything to add. - if (!templateCentralPaneRoute) { - return; - } - - // If there is no topmostCentralPaneRoute in the state and template state has one, we need to add it. - if (!topmostCentralPaneRoute) { - insertRootRoute(state, templateCentralPaneRoute); - return; - } - - // If there is central pane route in state and template state has one, we need to check if they are the same. - if (topmostCentralPaneRouteExtracted && templateCentralPaneRouteExtracted && topmostCentralPaneRouteExtracted.name !== templateCentralPaneRouteExtracted.name) { - // Not every RHP screen has matching central pane defined. In that case we use the REPORT screen as default for initial screen. - // But we don't want to override the central pane for those screens as they may be opened with different central panes under the overlay. - // e.g. i-know-a-teacher may be opened with different central panes under the overlay - if (templateCentralPaneRouteExtracted.name === SCREENS.REPORT) { - return; - } - insertRootRoute(state, templateCentralPaneRoute); - } - } -} - -function shouldPreventReset(state: StackNavigationState, action: CommonActions.Action | StackActionType) { - if (action.type !== CONST.NAVIGATION_ACTIONS.RESET || !action?.payload) { - return false; - } - const currentFocusedRoute = findFocusedRoute(state); - const targetFocusedRoute = findFocusedRoute(action?.payload); - - // We want to prevent the user from navigating back to a non-onboarding screen if they are currently on an onboarding screen - if (isOnboardingFlowName(currentFocusedRoute?.name) && !isOnboardingFlowName(targetFocusedRoute?.name)) { - Welcome.setOnboardingErrorMessage(Localize.translateLocal('onboarding.purpose.errorBackButton')); - return true; - } - - return false; -} - -function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) { - const stackRouter = StackRouter(options); - - return { - ...stackRouter, - getRehydratedState(partialState: StackNavigationState, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): StackNavigationState { - compareAndAdaptState(partialState); - const state = stackRouter.getRehydratedState(partialState, {routeNames, routeParamList, routeGetIdList}); - return state; - }, - getStateForAction(state: StackNavigationState, action: CommonActions.Action | StackActionType, configOptions: RouterConfigOptions) { - if (shouldPreventReset(state, action)) { - syncBrowserHistory(state); - return state; - } - return stackRouter.getStateForAction(state, action, configOptions); - }, - }; -} - -export default CustomRouter; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx deleted file mode 100644 index 6c153b1b159e..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import type {ParamListBase, RouteProp, StackActionHelpers, StackNavigationState} from '@react-navigation/native'; -import {createNavigatorFactory, useNavigationBuilder} from '@react-navigation/native'; -import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; -import {StackView} from '@react-navigation/stack'; -import React, {useEffect, useMemo} from 'react'; -import {View} from 'react-native'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useThemeStyles from '@hooks/useThemeStyles'; -import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; -import navigationRef from '@libs/Navigation/navigationRef'; -import type {RootStackParamList, State} from '@libs/Navigation/types'; -import {isCentralPaneName} from '@libs/NavigationUtils'; -import SCREENS from '@src/SCREENS'; -import CustomRouter from './CustomRouter'; -import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types'; - -type Routes = StackNavigationState['routes']; -function reduceCentralPaneRoutes(routes: Routes): Routes { - const result: Routes = []; - let count = 0; - const reverseRoutes = [...routes].reverse(); - - reverseRoutes.forEach((route) => { - if (isCentralPaneName(route.name)) { - // Remove all central pane routes except the last 3. This will improve performance. - if (count < 3) { - result.push(route); - count++; - } - } else { - result.push(route); - } - }); - - return result.reverse(); -} - -function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { - const {shouldUseNarrowLayout} = useResponsiveLayout(); - const styles = useThemeStyles(); - - const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder< - StackNavigationState, - ResponsiveStackNavigatorRouterOptions, - StackActionHelpers, - StackNavigationOptions, - StackNavigationEventMap - >(CustomRouter, { - children: props.children, - screenOptions: props.screenOptions, - initialRouteName: props.initialRouteName, - }); - - useEffect(() => { - if (!navigationRef.isReady()) { - return; - } - navigationRef.resetRoot(navigationRef.getRootState()); - }, [shouldUseNarrowLayout]); - - const {stateToRender, searchRoute} = useMemo(() => { - const routes = reduceCentralPaneRoutes(state.routes); - - if (shouldUseNarrowLayout) { - const isSearchCentralPane = (route: RouteProp) => getTopmostCentralPaneRoute({routes: [route]} as State)?.name === SCREENS.SEARCH.CENTRAL_PANE; - - const lastRoute = routes.at(-1); - const lastSearchCentralPane = lastRoute && isSearchCentralPane(lastRoute) ? lastRoute : undefined; - const filteredRoutes = routes.filter((route) => !isSearchCentralPane(route)); - - // On narrow layout, if we are on /search route we want to hide all central pane routes and show only the bottom tab navigator. - if (lastSearchCentralPane) { - const filteredRoute = filteredRoutes.at(0); - if (filteredRoute) { - return { - stateToRender: { - ...state, - index: 0, - routes: [filteredRoute], - }, - searchRoute: lastSearchCentralPane, - }; - } - } - - return { - stateToRender: { - ...state, - index: filteredRoutes.length - 1, - routes: filteredRoutes, - }, - searchRoute: undefined, - }; - } - - return { - stateToRender: { - ...state, - index: routes.length - 1, - routes: [...routes], - }, - searchRoute: undefined, - }; - }, [state, shouldUseNarrowLayout]); - - return ( - - - {searchRoute && {descriptors[searchRoute.key].render()}} - - ); -} - -ResponsiveStackNavigator.displayName = 'ResponsiveStackNavigator'; - -export default createNavigatorFactory, StackNavigationOptions, StackNavigationEventMap, typeof ResponsiveStackNavigator>(ResponsiveStackNavigator); diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts deleted file mode 100644 index 09d35e2a1680..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRouterOptions} from '@react-navigation/native'; -import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; - -type ResponsiveStackNavigatorConfig = { - isSmallScreenWidth: boolean; -}; - -type ResponsiveStackNavigatorRouterOptions = StackRouterOptions; - -type ResponsiveStackNavigatorProps = DefaultNavigatorOptions, StackNavigationOptions, StackNavigationEventMap> & - ResponsiveStackNavigatorConfig; - -export type {ResponsiveStackNavigatorRouterOptions, ResponsiveStackNavigatorProps, ResponsiveStackNavigatorConfig}; diff --git a/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts deleted file mode 100644 index 21911ebb56e2..000000000000 --- a/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts +++ /dev/null @@ -1,49 +0,0 @@ -import type {StackCardInterpolatedStyle, StackCardInterpolationProps} from '@react-navigation/stack'; -import {Animated} from 'react-native'; -import type {StyleUtilsType} from '@styles/utils'; -import variables from '@styles/variables'; - -type ModalCardStyleInterpolator = ( - isSmallScreenWidth: boolean, - isFullScreenModal: boolean, - shouldUseNarrowLayout: boolean, - stackCardInterpolationProps: StackCardInterpolationProps, - outputRangeMultiplier?: number, -) => StackCardInterpolatedStyle; -type CreateModalCardStyleInterpolator = (StyleUtils: StyleUtilsType) => ModalCardStyleInterpolator; - -const createModalCardStyleInterpolator: CreateModalCardStyleInterpolator = - (StyleUtils) => - (isSmallScreenWidth, isFullScreenModal, shouldUseNarrowLayout, {current: {progress}, inverted, layouts: {screen}}, outputRangeMultiplier = 1) => { - if (shouldUseNarrowLayout) { - return { - cardStyle: { - opacity: progress, - }, - }; - } - - const translateX = Animated.multiply( - progress.interpolate({ - inputRange: [0, 1], - outputRange: [outputRangeMultiplier * (isSmallScreenWidth ? screen.width : variables.sideBarWidth), 0], - extrapolate: 'clamp', - }), - inverted, - ); - - const cardStyle = StyleUtils.getCardStyles(screen.width); - - if (!isFullScreenModal || isSmallScreenWidth) { - cardStyle.transform = [{translateX}]; - } - - return { - containerStyle: { - overflow: 'hidden', - }, - cardStyle, - }; - }; - -export default createModalCardStyleInterpolator; diff --git a/src/libs/Navigation/AppNavigator/defaultScreenOptions.ts b/src/libs/Navigation/AppNavigator/defaultScreenOptions.ts index 4015c43c679e..8d941799a81a 100644 --- a/src/libs/Navigation/AppNavigator/defaultScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/defaultScreenOptions.ts @@ -1,12 +1,14 @@ -import type {StackNavigationOptions} from '@react-navigation/stack'; +import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; -const defaultScreenOptions: StackNavigationOptions = { - cardStyle: { - overflow: 'visible', - flex: 1, - }, +const defaultScreenOptions: PlatformStackNavigationOptions = { headerShown: false, animationTypeForReplace: 'push', + web: { + cardStyle: { + overflow: 'visible', + flex: 1, + }, + }, }; export default defaultScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts deleted file mode 100644 index e09f85936385..000000000000 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ /dev/null @@ -1,141 +0,0 @@ -import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack'; -import type {ThemeStyles} from '@styles/index'; -import type {StyleUtilsType} from '@styles/utils'; -import variables from '@styles/variables'; -import CONFIG from '@src/CONFIG'; -import createModalCardStyleInterpolator from './createModalCardStyleInterpolator'; -import getModalPresentationStyle from './getModalPresentationStyle'; - -type GetOnboardingModalNavigatorOptions = (shouldUseNarrowLayout: boolean) => StackNavigationOptions; - -type ScreenOptions = { - rightModalNavigator: StackNavigationOptions; - onboardingModalNavigator: GetOnboardingModalNavigatorOptions; - leftModalNavigator: StackNavigationOptions; - homeScreen: StackNavigationOptions; - fullScreen: StackNavigationOptions; - centralPaneNavigator: StackNavigationOptions; - bottomTab: StackNavigationOptions; -}; - -const commonScreenOptions: StackNavigationOptions = { - headerShown: false, - gestureDirection: 'horizontal', - animationEnabled: true, - cardOverlayEnabled: true, - animationTypeForReplace: 'push', -}; - -type GetRootNavigatorScreenOptions = (isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType) => ScreenOptions; - -const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScreenWidth, themeStyles, StyleUtils) => { - const modalCardStyleInterpolator = createModalCardStyleInterpolator(StyleUtils); - - return { - rightModalNavigator: { - ...commonScreenOptions, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props), - presentation: getModalPresentationStyle(), - - // We want pop in RHP since there are some flows that would work weird otherwise - animationTypeForReplace: 'pop', - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - - // This is necessary to cover translated sidebar with overlay. - width: isSmallScreenWidth ? '100%' : '200%', - // Excess space should be on the left so we need to position from right. - right: 0, - }, - }, - onboardingModalNavigator: (shouldUseNarrowLayout: boolean) => ({ - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, shouldUseNarrowLayout, props), - headerShown: false, - animationEnabled: true, - cardOverlayEnabled: false, - presentation: 'transparentModal', - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - backgroundColor: 'transparent', - width: '100%', - top: 0, - left: 0, - position: 'fixed', - }, - }), - leftModalNavigator: { - ...commonScreenOptions, - cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props), - presentation: getModalPresentationStyle(), - gestureDirection: 'horizontal-inverted', - - // We want pop in LHP since there are some flows that would work weird otherwise - animationTypeForReplace: 'pop', - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - - // This is necessary to cover translated sidebar with overlay. - width: isSmallScreenWidth ? '100%' : '200%', - - // LHP should be displayed in place of the sidebar - left: isSmallScreenWidth ? 0 : -variables.sideBarWidth, - }, - }, - homeScreen: { - title: CONFIG.SITE_TITLE, - ...commonScreenOptions, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props), - - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, - - // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable. - marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, - ...(isSmallScreenWidth ? {} : themeStyles.borderRight), - }, - }, - - fullScreen: { - ...commonScreenOptions, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, false, props), - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - - // This is necessary to cover whole screen. Including translated sidebar. - marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, - }, - - // We need to turn off animation for the full screen to avoid delay when closing screens. - animationEnabled: isSmallScreenWidth, - }, - - centralPaneNavigator: { - title: CONFIG.SITE_TITLE, - ...commonScreenOptions, - animationEnabled: isSmallScreenWidth, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, false, props), - - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth, - }, - }, - - bottomTab: { - ...commonScreenOptions, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props), - - cardStyle: { - ...StyleUtils.getNavigationModalCardStyle(), - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, - - // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable. - marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, - ...(isSmallScreenWidth ? {} : themeStyles.borderRight), - }, - }, - }; -}; - -export default getRootNavigatorScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts new file mode 100644 index 000000000000..f4f6179782cc --- /dev/null +++ b/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts @@ -0,0 +1,66 @@ +import type {StackCardInterpolatedStyle, StackCardInterpolationProps} from '@react-navigation/stack'; +import {Animated} from 'react-native'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; +import variables from '@styles/variables'; + +type ModalCardStyleInterpolatorProps = { + isOnboardingModal?: boolean; + isFullScreenModal?: boolean; + shouldFadeScreen?: boolean; + props: StackCardInterpolationProps; + outputRangeMultiplier?: number; +}; + +type ModalCardStyleInterpolator = (props: ModalCardStyleInterpolatorProps) => StackCardInterpolatedStyle; + +const useModalCardStyleInterpolator = (): ModalCardStyleInterpolator => { + const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout(); + const StyleUtils = useStyleUtils(); + + const modalCardStyleInterpolator: ModalCardStyleInterpolator = ({ + props: { + current: {progress}, + inverted, + layouts: {screen}, + }, + isOnboardingModal = false, + isFullScreenModal = false, + shouldFadeScreen = false, + outputRangeMultiplier = 1, + }) => { + if (isOnboardingModal ? onboardingIsMediumOrLargerScreenWidth : shouldFadeScreen) { + return { + cardStyle: { + opacity: progress, + }, + }; + } + + const translateX = Animated.multiply( + progress.interpolate({ + inputRange: [0, 1], + outputRange: [outputRangeMultiplier * (shouldUseNarrowLayout ? screen.width : variables.sideBarWidth), 0], + extrapolate: 'clamp', + }), + inverted, + ); + + const cardStyle = StyleUtils.getCardStyles(screen.width); + + if (!isFullScreenModal || shouldUseNarrowLayout) { + cardStyle.transform = [{translateX}]; + } + + return { + containerStyle: { + overflow: 'hidden', + }, + cardStyle, + }; + }; + + return modalCardStyleInterpolator; +}; + +export default useModalCardStyleInterpolator; diff --git a/src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts b/src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts new file mode 100644 index 000000000000..2102d247b079 --- /dev/null +++ b/src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts @@ -0,0 +1,35 @@ +import {CardStyleInterpolators} from '@react-navigation/stack'; +import type {GestureDirection} from '@react-navigation/stack/lib/typescript/src/types'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; +import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; + +/** + * Modal stack navigator screen options generator function + * @param gestureDirection - The gesture direction of dismissing the modal + * @returns The screen options object + */ +const useModalNavigatorOptions = (gestureDirection: GestureDirection = 'horizontal'): PlatformStackNavigationOptions => { + const themeStyles = useThemeStyles(); + + let universalGestureDirection: PlatformStackNavigationOptions['gestureDirection'] | undefined; + let webGestureDirection: GestureDirection | undefined; + if (gestureDirection === 'horizontal' || gestureDirection === 'vertical') { + universalGestureDirection = gestureDirection; + } else { + webGestureDirection = gestureDirection; + } + + return { + headerShown: false, + animation: Animations.SLIDE_FROM_RIGHT, + gestureDirection: universalGestureDirection, + web: { + cardStyle: themeStyles.navigationScreenCardStyle, + cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, + ...(webGestureDirection && {gestureDirection: webGestureDirection}), + }, + }; +}; + +export default useModalNavigatorOptions; diff --git a/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts b/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts new file mode 100644 index 000000000000..4490cffa1e2f --- /dev/null +++ b/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts @@ -0,0 +1,155 @@ +import type {StackCardInterpolationProps} from '@react-navigation/stack'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; +import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; +import variables from '@styles/variables'; +import CONFIG from '@src/CONFIG'; +import hideKeyboardOnSwipe from './hideKeyboardOnSwipe'; +import useModalCardStyleInterpolator from './useModalCardStyleInterpolator'; + +type RootNavigatorOptions = { + rightModalNavigator: PlatformStackNavigationOptions; + onboardingModalNavigator: PlatformStackNavigationOptions; + leftModalNavigator: PlatformStackNavigationOptions; + homeScreen: PlatformStackNavigationOptions; + fullScreen: PlatformStackNavigationOptions; + centralPaneNavigator: PlatformStackNavigationOptions; + bottomTab: PlatformStackNavigationOptions; +}; + +const commonScreenOptions: PlatformStackNavigationOptions = { + web: { + cardOverlayEnabled: true, + }, +}; + +const useRootNavigatorOptions = () => { + const themeStyles = useThemeStyles(); + const StyleUtils = useStyleUtils(); + const {isSmallScreenWidth} = useResponsiveLayout(); + const modalCardStyleInterpolator = useModalCardStyleInterpolator(); + + return { + rightModalNavigator: { + ...commonScreenOptions, + ...hideKeyboardOnSwipe, + animation: Animations.SLIDE_FROM_RIGHT, + // We want pop in RHP since there are some flows that would work weird otherwise + animationTypeForReplace: 'pop', + web: { + presentation: 'transparentModal', + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + // This is necessary to cover translated sidebar with overlay. + width: isSmallScreenWidth ? '100%' : '200%', + // Excess space should be on the left so we need to position from right. + right: 0, + }, + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props}), + }, + }, + onboardingModalNavigator: { + web: { + presentation: 'transparentModal', + cardOverlayEnabled: false, + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + backgroundColor: 'transparent', + width: '100%', + top: 0, + left: 0, + position: 'fixed', + }, + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isOnboardingModal: true}), + }, + }, + leftModalNavigator: { + ...commonScreenOptions, + animation: Animations.SLIDE_FROM_LEFT, + animationTypeForReplace: 'pop', + native: { + customAnimationOnGesture: true, + }, + web: { + presentation: 'transparentModal', + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props}), + // We want pop in LHP since there are some flows that would work weird otherwise + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + + // This is necessary to cover translated sidebar with overlay. + width: isSmallScreenWidth ? '100%' : '200%', + + // LHP should be displayed in place of the sidebar + left: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + }, + }, + }, + homeScreen: { + ...commonScreenOptions, + title: CONFIG.SITE_TITLE, + headerShown: false, + web: { + // Note: The card* properties won't be applied on mobile platforms, as they use the native defaults. + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props}), + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + + // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable. + marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + ...(isSmallScreenWidth ? {} : themeStyles.borderRight), + }, + }, + }, + + fullScreen: { + ...commonScreenOptions, + // We need to turn off animation for the full screen to avoid delay when closing screens. + animation: isSmallScreenWidth ? Animations.SLIDE_FROM_RIGHT : Animations.NONE, + web: { + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isFullScreenModal: true}), + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + + // This is necessary to cover whole screen. Including translated sidebar. + marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + }, + }, + }, + + centralPaneNavigator: { + ...commonScreenOptions, + ...hideKeyboardOnSwipe, + headerShown: false, + title: CONFIG.SITE_TITLE, + animation: isSmallScreenWidth ? undefined : Animations.NONE, + web: { + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isFullScreenModal: true}), + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth, + }, + }, + }, + + bottomTab: { + ...commonScreenOptions, + web: { + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props}), + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + + // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable. + marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + ...(isSmallScreenWidth ? {} : themeStyles.borderRight), + }, + }, + }, + } satisfies RootNavigatorOptions; +}; + +export default useRootNavigatorOptions; diff --git a/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts b/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts index f7c2140b1117..d31c3693d495 100644 --- a/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts +++ b/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts @@ -1,13 +1,13 @@ import {findFocusedRoute, StackActions} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import {BackHandler, NativeModules} from 'react-native'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import getTopmostCentralPaneRoute from '@navigation/getTopmostCentralPaneRoute'; import navigationRef from '@navigation/navigationRef'; import type {BottomTabNavigatorParamList, RootStackParamList, State} from '@navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; -type SearchPageProps = StackScreenProps; +type SearchPageProps = PlatformStackScreenProps; // We need to do some custom handling for the back button on Android for actions related to the search page. function setupCustomAndroidBackHandler() { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index ae1621f700d9..99fcc4d0c631 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -17,7 +17,7 @@ import type {SaveSearchParams} from '@libs/API/parameters'; import type CONST from '@src/CONST'; import type {Country, IOUAction, IOUType} from '@src/CONST'; import type NAVIGATORS from '@src/NAVIGATORS'; -import type {HybridAppRoute, Route as Routes} from '@src/ROUTES'; +import type {Route as ExpensifyRoute, HybridAppRoute, Route as Routes} from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type EXIT_SURVEY_REASON_FORM_INPUT_IDS from '@src/types/form/ExitSurveyReasonForm'; import type {ConnectionName, SageIntacctMappingName} from '@src/types/onyx/Policy'; @@ -1130,6 +1130,18 @@ type MoneyRequestNavigatorParamList = { backTo?: Routes; currency?: string; }; + [SCREENS.MONEY_REQUEST.HOLD]: { + /** ID of the transaction the page was opened for */ + transactionID: string; + + /** ID of the report that user is providing hold reason to */ + reportID: string; + + /** Link to previous page */ + backTo: ExpensifyRoute; + + searchHash?: number; + }; }; type NewTaskNavigatorParamList = { @@ -1538,6 +1550,18 @@ type SearchReportParamList = { reportID: string; reportActionID?: string; }; + [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: { + /** ID of the transaction the page was opened for */ + transactionID: string; + + /** ID of the report that user is providing hold reason to */ + reportID: string; + + /** Link to previous page */ + backTo: ExpensifyRoute; + + searchHash?: number; + }; }; type SearchAdvancedFiltersParamList = { diff --git a/src/pages/ConciergePage.tsx b/src/pages/ConciergePage.tsx index 46f17e76c083..897d1c429799 100644 --- a/src/pages/ConciergePage.tsx +++ b/src/pages/ConciergePage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useRef} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -10,6 +9,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as App from '@userActions/App'; import * as Report from '@userActions/Report'; @@ -22,7 +22,7 @@ type ConciergePageOnyxProps = { session: OnyxEntry; }; -type ConciergePageProps = ConciergePageOnyxProps & StackScreenProps; +type ConciergePageProps = ConciergePageOnyxProps & PlatformStackScreenProps; /* * This is a "utility page", that does this: diff --git a/src/pages/Debug/DebugDetailsConstantPickerPage.tsx b/src/pages/Debug/DebugDetailsConstantPickerPage.tsx index a98ef9963542..e195351cc0a4 100644 --- a/src/pages/Debug/DebugDetailsConstantPickerPage.tsx +++ b/src/pages/Debug/DebugDetailsConstantPickerPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import isObject from 'lodash/isObject'; import React, {useMemo, useState} from 'react'; import {View} from 'react-native'; @@ -10,12 +9,13 @@ import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {DebugParamList} from '@libs/Navigation/types'; import {appendParam} from '@libs/Url'; import type SCREENS from '@src/SCREENS'; import {DETAILS_CONSTANT_OPTIONS} from './const'; -type DebugDetailsConstantPickerPageProps = StackScreenProps; +type DebugDetailsConstantPickerPageProps = PlatformStackScreenProps; function DebugDetailsConstantPickerPage({ route: { diff --git a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx b/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx index 920b5b52076c..b2be1429ee5b 100644 --- a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx +++ b/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {format} from 'date-fns'; import React, {useState} from 'react'; import {View} from 'react-native'; @@ -12,11 +11,12 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {DebugParamList} from '@libs/Navigation/types'; import {appendParam} from '@libs/Url'; import type SCREENS from '@src/SCREENS'; -type DebugDetailsDateTimePickerPageProps = StackScreenProps; +type DebugDetailsDateTimePickerPageProps = PlatformStackScreenProps; function DebugDetailsDateTimePickerPage({ route: { diff --git a/src/pages/Debug/Report/DebugReportPage.tsx b/src/pages/Debug/Report/DebugReportPage.tsx index 28f4ddf3dc34..136eba8d7ef1 100644 --- a/src/pages/Debug/Report/DebugReportPage.tsx +++ b/src/pages/Debug/Report/DebugReportPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import DebugUtils from '@libs/DebugUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {DebugParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import SidebarUtils from '@libs/SidebarUtils'; @@ -27,7 +27,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import DebugReportActions from './DebugReportActions'; -type DebugReportPageProps = StackScreenProps; +type DebugReportPageProps = PlatformStackScreenProps; type Metadata = { title: string; diff --git a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx index 0b260a8bc93e..429f42b58dda 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx +++ b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import DateUtils from '@libs/DateUtils'; import DebugUtils from '@libs/DebugUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {DebugParamList} from '@libs/Navigation/types'; import * as NumberUtils from '@libs/NumberUtils'; import ReportActionItem from '@pages/home/report/ReportActionItem'; @@ -26,7 +26,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {PersonalDetailsList, ReportAction, Session} from '@src/types/onyx'; -type DebugReportActionCreatePageProps = StackScreenProps; +type DebugReportActionCreatePageProps = PlatformStackScreenProps; const getInitialReportAction = (reportID: string, session: OnyxEntry, personalDetailsList: OnyxEntry) => DebugUtils.stringifyJSON({ diff --git a/src/pages/Debug/ReportAction/DebugReportActionPage.tsx b/src/pages/Debug/ReportAction/DebugReportActionPage.tsx index 89377310571e..621e77360358 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionPage.tsx +++ b/src/pages/Debug/ReportAction/DebugReportActionPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -11,6 +10,7 @@ import DebugUtils from '@libs/DebugUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {DebugParamList} from '@libs/Navigation/types'; import DebugDetails from '@pages/Debug/DebugDetails'; import DebugJSON from '@pages/Debug/DebugJSON'; @@ -20,7 +20,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import DebugReportActionPreview from './DebugReportActionPreview'; -type DebugReportActionPageProps = StackScreenProps; +type DebugReportActionPageProps = PlatformStackScreenProps; function DebugReportActionPage({ route: { diff --git a/src/pages/EditReportFieldPage.tsx b/src/pages/EditReportFieldPage.tsx index d7d359d289f4..25023badbd1e 100644 --- a/src/pages/EditReportFieldPage.tsx +++ b/src/pages/EditReportFieldPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useState} from 'react'; import {useOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import isSearchTopmostCentralPane from '@libs/Navigation/isSearchTopmostCentralPane'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {EditRequestNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; @@ -25,7 +25,7 @@ import EditReportFieldDate from './EditReportFieldDate'; import EditReportFieldDropdown from './EditReportFieldDropdown'; import EditReportFieldText from './EditReportFieldText'; -type EditReportFieldPageProps = StackScreenProps; +type EditReportFieldPageProps = PlatformStackScreenProps; function EditReportFieldPage({route}: EditReportFieldPageProps) { const {windowWidth} = useWindowDimensions(); diff --git a/src/pages/FlagCommentPage.tsx b/src/pages/FlagCommentPage.tsx index 49045c66c72b..fbedd5fc6c39 100644 --- a/src/pages/FlagCommentPage.tsx +++ b/src/pages/FlagCommentPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import type {SvgProps} from 'react-native-svg'; @@ -13,6 +12,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FlagCommentNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as Report from '@userActions/Report'; @@ -22,7 +22,7 @@ import type SCREENS from '@src/SCREENS'; import withReportAndReportActionOrNotFound from './home/report/withReportAndReportActionOrNotFound'; import type {WithReportAndReportActionOrNotFoundProps} from './home/report/withReportAndReportActionOrNotFound'; -type FlagCommentPageNavigationProps = StackScreenProps; +type FlagCommentPageNavigationProps = PlatformStackScreenProps; type FlagCommentPageProps = WithReportAndReportActionOrNotFoundProps & FlagCommentPageNavigationProps; diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index 90b7ccbb28d8..aecb78b76a76 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; @@ -29,7 +29,7 @@ type GetAssistanceOnyxProps = { account: OnyxEntry; }; -type GetAssistancePageProps = GetAssistanceOnyxProps & StackScreenProps; +type GetAssistancePageProps = GetAssistanceOnyxProps & PlatformStackScreenProps; function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/GroupChatNameEditPage.tsx b/src/pages/GroupChatNameEditPage.tsx index 425e8a421cb2..100efb69cae1 100644 --- a/src/pages/GroupChatNameEditPage.tsx +++ b/src/pages/GroupChatNameEditPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; @@ -12,6 +11,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewChatNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; @@ -30,7 +30,7 @@ type GroupChatNameEditPageOnyxProps = { }; type GroupChatNameEditPageProps = GroupChatNameEditPageOnyxProps & - Partial> & { + Partial> & { report?: ReportOnyxType; }; diff --git a/src/pages/InviteReportParticipantsPage.tsx b/src/pages/InviteReportParticipantsPage.tsx index 6a5bf6832fd6..b639d984a132 100644 --- a/src/pages/InviteReportParticipantsPage.tsx +++ b/src/pages/InviteReportParticipantsPage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; @@ -20,6 +19,7 @@ import * as UserSearchPhraseActions from '@libs/actions/RoomMembersUserSearchPhr import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ParticipantsNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -44,7 +44,7 @@ type InviteReportParticipantsPageProps = InviteReportParticipantsPageOnyxProps & type Sections = Array>>; function InviteReportParticipantsPage({betas, personalDetails, report, didScreenTransitionEnd}: InviteReportParticipantsPageProps) { - const route = useRoute>(); + const route = useRoute>(); const {options, areOptionsInitialized} = useOptionsList({ shouldInitialize: didScreenTransitionEnd, }); diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.tsx b/src/pages/LogInWithShortLivedAuthTokenPage.tsx index fcbeadaa4a47..9dcd65537353 100644 --- a/src/pages/LogInWithShortLivedAuthTokenPage.tsx +++ b/src/pages/LogInWithShortLivedAuthTokenPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {NativeModules} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -6,6 +5,7 @@ import {withOnyx} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {PublicScreensParamList} from '@libs/Navigation/types'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; @@ -21,7 +21,7 @@ type LogInWithShortLivedAuthTokenPageOnyxProps = { account: OnyxEntry; }; -type LogInWithShortLivedAuthTokenPageProps = LogInWithShortLivedAuthTokenPageOnyxProps & StackScreenProps; +type LogInWithShortLivedAuthTokenPageProps = LogInWithShortLivedAuthTokenPageOnyxProps & PlatformStackScreenProps; function LogInWithShortLivedAuthTokenPage({route, account}: LogInWithShortLivedAuthTokenPageProps) { const {email = '', shortLivedAuthToken = '', shortLivedToken = '', authTokenType, exitTo, error} = route?.params ?? {}; diff --git a/src/pages/LogOutPreviousUserPage.tsx b/src/pages/LogOutPreviousUserPage.tsx index deb95a576c3d..bb381bb156ed 100644 --- a/src/pages/LogOutPreviousUserPage.tsx +++ b/src/pages/LogOutPreviousUserPage.tsx @@ -1,10 +1,10 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useContext, useEffect} from 'react'; import {NativeModules} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import {InitialURLContext} from '@components/InitialURLContextProvider'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as SessionUtils from '@libs/SessionUtils'; import Navigation from '@navigation/Navigation'; import type {AuthScreensParamList} from '@navigation/types'; @@ -24,7 +24,7 @@ type LogOutPreviousUserPageOnyxProps = { isAccountLoading: boolean; }; -type LogOutPreviousUserPageProps = LogOutPreviousUserPageOnyxProps & StackScreenProps; +type LogOutPreviousUserPageProps = LogOutPreviousUserPageOnyxProps & PlatformStackScreenProps; // This page is responsible for handling transitions from OldDot. Specifically, it logs the current user // out if the transition is for another user. diff --git a/src/pages/OnboardingEmployees/types.ts b/src/pages/OnboardingEmployees/types.ts index b4cdafced839..84d93e6152a4 100644 --- a/src/pages/OnboardingEmployees/types.ts +++ b/src/pages/OnboardingEmployees/types.ts @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; -type OnboardingEmployeesProps = StackScreenProps; +type OnboardingEmployeesProps = PlatformStackScreenProps; type BaseOnboardingEmployeesProps = OnboardingEmployeesProps & { /* Whether to use native styles tailored for native devices */ diff --git a/src/pages/OnboardingPersonalDetails/types.ts b/src/pages/OnboardingPersonalDetails/types.ts index 79aca4af4639..e8b99d949fa7 100644 --- a/src/pages/OnboardingPersonalDetails/types.ts +++ b/src/pages/OnboardingPersonalDetails/types.ts @@ -1,16 +1,14 @@ -import type {RouteProp} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; -type OnboardingPersonalDetailsProps = Record & StackScreenProps; +type OnboardingPersonalDetailsProps = Record & PlatformStackScreenProps; -type BaseOnboardingPersonalDetailsProps = WithCurrentUserPersonalDetailsProps & { - /* Whether to use native styles tailored for native devices */ - shouldUseNativeStyles: boolean; - - route: RouteProp; -}; +type BaseOnboardingPersonalDetailsProps = WithCurrentUserPersonalDetailsProps & + PlatformStackScreenProps & { + /* Whether to use native styles tailored for native devices */ + shouldUseNativeStyles: boolean; + }; export type {OnboardingPersonalDetailsProps, BaseOnboardingPersonalDetailsProps}; diff --git a/src/pages/OnboardingPurpose/types.ts b/src/pages/OnboardingPurpose/types.ts index 7a61196fd328..8f2f99b97e56 100644 --- a/src/pages/OnboardingPurpose/types.ts +++ b/src/pages/OnboardingPurpose/types.ts @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; -type OnboardingPurposeProps = Record & StackScreenProps; +type OnboardingPurposeProps = Record & PlatformStackScreenProps; type BaseOnboardingPurposeProps = OnboardingPurposeProps & { /* Whether to use native styles tailored for native devices */ diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index ac8eb7f862b6..5dd4275e5fa1 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import lodashDebounce from 'lodash/debounce'; import React, {useCallback, useMemo, useRef, useState} from 'react'; @@ -18,6 +17,7 @@ import useHtmlPaste from '@hooks/useHtmlPaste'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {PrivateNotesNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as ReportUtils from '@libs/ReportUtils'; @@ -41,7 +41,7 @@ type PrivateNotesEditPageOnyxProps = { type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps & PrivateNotesEditPageOnyxProps & - StackScreenProps & { + PlatformStackScreenProps & { /** The report currently being looked at */ report: Report; }; diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.tsx b/src/pages/PrivateNotes/PrivateNotesListPage.tsx index 424cc3e14683..534907a0a79c 100644 --- a/src/pages/PrivateNotes/PrivateNotesListPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesListPage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; @@ -12,6 +11,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {PrivateNotesNavigatorParamList} from '@libs/Navigation/types'; import type {WithReportAndPrivateNotesOrNotFoundProps} from '@pages/home/report/withReportAndPrivateNotesOrNotFound'; import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound'; @@ -37,7 +37,7 @@ type NoteListItem = { }; function PrivateNotesListPage({report, session}: PrivateNotesListPageProps) { - const route = useRoute>(); + const route = useRoute>(); const backTo = route.params.backTo; const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const styles = useThemeStyles(); diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index f54a9c6ec601..c65da331c966 100755 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; @@ -24,6 +23,7 @@ import UserDetailsTooltip from '@components/UserDetailsTooltip'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import {parsePhoneNumber} from '@libs/PhoneNumber'; import * as ReportUtils from '@libs/ReportUtils'; @@ -43,7 +43,7 @@ import type {PersonalDetails, Report} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import mapOnyxCollectionItems from '@src/utils/mapOnyxCollectionItems'; -type ProfilePageProps = StackScreenProps; +type ProfilePageProps = PlatformStackScreenProps; /** * Gets the phone number to display for SMS logins diff --git a/src/pages/ReferralDetailsPage.tsx b/src/pages/ReferralDetailsPage.tsx index d8a27e171933..76dac1aca1a8 100644 --- a/src/pages/ReferralDetailsPage.tsx +++ b/src/pages/ReferralDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useRef} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Clipboard from '@libs/Clipboard'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReferralDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; @@ -29,7 +29,7 @@ type ReferralDetailsPageOnyxProps = { account: OnyxEntry; }; -type ReferralDetailsPageProps = ReferralDetailsPageOnyxProps & StackScreenProps; +type ReferralDetailsPageProps = ReferralDetailsPageOnyxProps & PlatformStackScreenProps; function ReferralDetailsPage({route, account}: ReferralDetailsPageProps) { const theme = useTheme(); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 11820cd2c471..4169851dfc3c 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -1,5 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import lodashPick from 'lodash/pick'; import React, {useEffect, useRef, useState} from 'react'; @@ -19,6 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import BankAccount from '@libs/models/BankAccount'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import shouldReopenOnfido from '@libs/shouldReopenOnfido'; @@ -41,7 +40,7 @@ import ContinueBankAccountSetup from './ContinueBankAccountSetup'; import EnableBankAccount from './EnableBankAccount/EnableBankAccount'; import RequestorStep from './RequestorStep'; -type ReimbursementAccountPageProps = WithPolicyOnyxProps & StackScreenProps; +type ReimbursementAccountPageProps = WithPolicyOnyxProps & PlatformStackScreenProps; const ROUTE_NAMES = { COMPANY: 'company', @@ -57,7 +56,7 @@ const ROUTE_NAMES = { * We can pass stepToOpen in the URL to force which step to show. * Mainly needed when user finished the flow in verifying state, and Ops ask them to modify some fields from a specific step. */ -function getStepToOpenFromRouteParams(route: RouteProp): TBankAccountStep | '' { +function getStepToOpenFromRouteParams(route: PlatformStackRouteProp): TBankAccountStep | '' { switch (route.params.stepToOpen) { case ROUTE_NAMES.NEW: return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx index b9a91705a401..ac139e58a9ff 100644 --- a/src/pages/ReportAvatar.tsx +++ b/src/pages/ReportAvatar.tsx @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; @@ -10,7 +10,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ReportAvatarProps = StackScreenProps; +type ReportAvatarProps = PlatformStackScreenProps; function ReportAvatar({route}: ReportAvatarProps) { const reportIDFromRoute = route.params?.reportID ?? '-1'; diff --git a/src/pages/ReportDescriptionPage.tsx b/src/pages/ReportDescriptionPage.tsx index 6062ef748f36..0aabe5ad5d58 100644 --- a/src/pages/ReportDescriptionPage.tsx +++ b/src/pages/ReportDescriptionPage.tsx @@ -1,5 +1,5 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type {ReportDescriptionNavigatorParamList} from '@navigation/types'; import type SCREENS from '@src/SCREENS'; @@ -8,7 +8,7 @@ import withReportOrNotFound from './home/report/withReportOrNotFound'; import RoomDescriptionPage from './RoomDescriptionPage'; import TaskDescriptionPage from './tasks/TaskDescriptionPage'; -type ReportDescriptionPageProps = WithReportOrNotFoundProps & StackScreenProps; +type ReportDescriptionPageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function ReportDescriptionPage(props: ReportDescriptionPageProps) { const isTask = ReportUtils.isTaskReport(props.report); diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 6bc3a25f28ef..3f7f36bb92a5 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; @@ -30,6 +29,7 @@ import useNetwork from '@hooks/useNetwork'; import usePaginatedReportActions from '@hooks/usePaginatedReportActions'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -65,7 +65,7 @@ type ReportDetailsPageMenuItem = { shouldShowRightIcon?: boolean; }; -type ReportDetailsPageProps = WithReportOrNotFoundProps & StackScreenProps; +type ReportDetailsPageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; const CASES = { DEFAULT: 'default', diff --git a/src/pages/ReportParticipantDetailsPage.tsx b/src/pages/ReportParticipantDetailsPage.tsx index db978b70cad8..342449ae2bef 100644 --- a/src/pages/ReportParticipantDetailsPage.tsx +++ b/src/pages/ReportParticipantDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -18,6 +17,7 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import Navigation from '@navigation/Navigation'; @@ -37,7 +37,7 @@ type ReportParticipantDetailsOnyxProps = { }; type ReportParticipantDetailsPageProps = WithReportOrNotFoundProps & - StackScreenProps & + PlatformStackScreenProps & ReportParticipantDetailsOnyxProps; function ReportParticipantDetails({personalDetails, report, route}: ReportParticipantDetailsPageProps) { diff --git a/src/pages/ReportParticipantRoleSelectionPage.tsx b/src/pages/ReportParticipantRoleSelectionPage.tsx index 17b84e8903ea..95b3f88e9e37 100644 --- a/src/pages/ReportParticipantRoleSelectionPage.tsx +++ b/src/pages/ReportParticipantRoleSelectionPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; @@ -10,6 +9,7 @@ import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import Navigation from '@navigation/Navigation'; import type {ParticipantsNavigatorParamList} from '@navigation/types'; import CONST from '@src/CONST'; @@ -19,7 +19,7 @@ import NotFoundPage from './ErrorPage/NotFoundPage'; import withReportOrNotFound from './home/report/withReportOrNotFound'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; -type ReportParticipantRoleSelectionPageProps = WithReportOrNotFoundProps & StackScreenProps; +type ReportParticipantRoleSelectionPageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; type ListItemType = ListItem & { value: ValueOf; diff --git a/src/pages/ReportParticipantsPage.tsx b/src/pages/ReportParticipantsPage.tsx index b4eebb9b76f7..f6d35660fc40 100755 --- a/src/pages/ReportParticipantsPage.tsx +++ b/src/pages/ReportParticipantsPage.tsx @@ -1,5 +1,4 @@ import {useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; import type {TextInput} from 'react-native'; @@ -29,6 +28,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as Report from '@libs/actions/Report'; import * as UserSearchPhraseActions from '@libs/actions/RoomMembersUserSearchPhrase'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ParticipantsNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -42,7 +42,7 @@ import withReportOrNotFound from './home/report/withReportOrNotFound'; type MemberOption = Omit & {accountID: number}; -type ReportParticipantsPageProps = WithReportOrNotFoundProps & StackScreenProps; +type ReportParticipantsPageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) { const backTo = route.params.backTo; const [selectedMembers, setSelectedMembers] = useState([]); diff --git a/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx b/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx index a9cee3236ad0..bcb46c781262 100644 --- a/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx +++ b/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx @@ -1,7 +1,7 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; import usePolicy from '@hooks/usePolicy'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {RestrictedActionParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -11,7 +11,7 @@ import WorkspaceAdminRestrictedAction from './WorkspaceAdminRestrictedAction'; import WorkspaceOwnerRestrictedAction from './WorkspaceOwnerRestrictedAction'; import WorkspaceUserRestrictedAction from './WorkspaceUserRestrictedAction'; -type WorkspaceRestrictedActionPageProps = StackScreenProps; +type WorkspaceRestrictedActionPageProps = PlatformStackScreenProps; function WorkspaceRestrictedActionPage({ route: { diff --git a/src/pages/RoomDescriptionPage.tsx b/src/pages/RoomDescriptionPage.tsx index a70f17d1468c..c5f8e8d01421 100644 --- a/src/pages/RoomDescriptionPage.tsx +++ b/src/pages/RoomDescriptionPage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useFocusEffect, useRoute} from '@react-navigation/native'; import React, {useCallback, useRef, useState} from 'react'; import {View} from 'react-native'; @@ -15,6 +14,7 @@ import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportDescriptionNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as ReportUtils from '@libs/ReportUtils'; @@ -37,7 +37,7 @@ type RoomDescriptionPageProps = { }; function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) { - const route = useRoute>(); + const route = useRoute>(); const backTo = route.params.backTo; const styles = useThemeStyles(); const [description, setDescription] = useState(() => Parser.htmlToMarkdown(report?.description ?? '')); diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index c833fdb68ae6..b943ceec9a36 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; @@ -24,6 +23,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import HttpUtils from '@libs/HttpUtils'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {RoomMembersNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -40,7 +40,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; import withReportOrNotFound from './home/report/withReportOrNotFound'; -type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps & StackScreenProps; +type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps & PlatformStackScreenProps; type Sections = Array>>; function RoomInvitePage({ diff --git a/src/pages/RoomMemberDetailsPage.tsx b/src/pages/RoomMemberDetailsPage.tsx index 475cf37a8847..ae0c8ffa1cdc 100644 --- a/src/pages/RoomMemberDetailsPage.tsx +++ b/src/pages/RoomMemberDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {RoomMembersNavigatorParamList} from '@libs/Navigation/types'; import Navigation from '@navigation/Navigation'; import CONST from '@src/CONST'; @@ -26,7 +26,7 @@ import NotFoundPage from './ErrorPage/NotFoundPage'; import withReportOrNotFound from './home/report/withReportOrNotFound'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; -type RoomMemberDetailsPagePageProps = WithReportOrNotFoundProps & StackScreenProps; +type RoomMemberDetailsPagePageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function RoomMemberDetailsPage({report, route}: RoomMemberDetailsPagePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index b5d424b7fc57..292e7dab6851 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -1,6 +1,4 @@ -import type {RouteProp} from '@react-navigation/native'; import {useIsFocused, useRoute} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -29,6 +27,7 @@ import * as UserSearchPhraseActions from '@libs/actions/RoomMembersUserSearchPhr import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {RoomMembersNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -44,10 +43,10 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; import withReportOrNotFound from './home/report/withReportOrNotFound'; -type RoomMembersPageProps = WithReportOrNotFoundProps & WithCurrentUserPersonalDetailsProps & StackScreenProps; +type RoomMembersPageProps = WithReportOrNotFoundProps & WithCurrentUserPersonalDetailsProps & PlatformStackScreenProps; function RoomMembersPage({report, policies}: RoomMembersPageProps) { - const route = useRoute>(); + const route = useRoute>(); const styles = useThemeStyles(); const [session] = useOnyx(ONYXKEYS.SESSION); const currentUserAccountID = Number(session?.accountID); diff --git a/src/pages/Search/SearchHoldReasonPage.tsx b/src/pages/Search/SearchHoldReasonPage.tsx index edd85e78cec2..229f7d7e6994 100644 --- a/src/pages/Search/SearchHoldReasonPage.tsx +++ b/src/pages/Search/SearchHoldReasonPage.tsx @@ -1,9 +1,9 @@ -import type {RouteProp} from '@react-navigation/native'; import React, {useCallback, useEffect} from 'react'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import {useSearchContext} from '@components/Search/SearchContext'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ValidationUtils from '@libs/ValidationUtils'; import HoldReasonFormView from '@pages/iou/HoldReasonFormView'; import * as FormActions from '@userActions/FormActions'; @@ -19,7 +19,7 @@ type SearchHoldReasonPageRouteParams = { type SearchHoldReasonPageProps = { /** Navigation route context info provided by react navigation */ - route: RouteProp<{params?: SearchHoldReasonPageRouteParams}>; + route: PlatformStackRouteProp<{params?: SearchHoldReasonPageRouteParams}>; }; function SearchHoldReasonPage({route}: SearchHoldReasonPageProps) { diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index 82c502febaf8..a1bd04a7e71b 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -8,12 +7,13 @@ import SearchStatusBar from '@components/Search/SearchStatusBar'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as SearchUtils from '@libs/SearchUtils'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type SearchPageProps = StackScreenProps; +type SearchPageProps = PlatformStackScreenProps; function SearchPage({route}: SearchPageProps) { const {shouldUseNarrowLayout} = useResponsiveLayout(); diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx index 87748a9697a7..12e3360c7ff8 100644 --- a/src/pages/TransactionDuplicate/Confirmation.tsx +++ b/src/pages/TransactionDuplicate/Confirmation.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; @@ -19,6 +18,7 @@ import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import variables from '@styles/variables'; import * as IOU from '@src/libs/actions/IOU'; @@ -35,7 +35,7 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; function Confirmation() { const styles = useThemeStyles(); const {translate} = useLocalize(); - const route = useRoute>(); + const route = useRoute>(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [reviewDuplicates, reviewDuplicatesResult] = useOnyx(ONYXKEYS.REVIEW_DUPLICATES); const transaction = useMemo(() => TransactionUtils.buildNewTransactionAfterReviewingDuplicates(reviewDuplicates), [reviewDuplicates]); diff --git a/src/pages/TransactionDuplicate/Review.tsx b/src/pages/TransactionDuplicate/Review.tsx index e61f9382b895..cb27ecfcbb3c 100644 --- a/src/pages/TransactionDuplicate/Review.tsx +++ b/src/pages/TransactionDuplicate/Review.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import {View} from 'react-native'; @@ -12,6 +11,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -25,7 +25,7 @@ import DuplicateTransactionsList from './DuplicateTransactionsList'; function TransactionDuplicateReview() { const styles = useThemeStyles(); const {translate} = useLocalize(); - const route = useRoute>(); + const route = useRoute>(); const currentPersonalDetails = useCurrentUserPersonalDetails(); const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`); const reportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '-1', report?.parentReportActionID ?? '-1'); diff --git a/src/pages/TransactionDuplicate/ReviewBillable.tsx b/src/pages/TransactionDuplicate/ReviewBillable.tsx index 666741daf303..2473c18a5551 100644 --- a/src/pages/TransactionDuplicate/ReviewBillable.tsx +++ b/src/pages/TransactionDuplicate/ReviewBillable.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as TransactionUtils from '@libs/TransactionUtils'; import type SCREENS from '@src/SCREENS'; @@ -13,7 +13,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewBillable() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID ?? ''); const compareResult = TransactionUtils.compareDuplicateTransactionFields(transactionID); diff --git a/src/pages/TransactionDuplicate/ReviewCategory.tsx b/src/pages/TransactionDuplicate/ReviewCategory.tsx index 09cbdcd28327..05e90733d6bd 100644 --- a/src/pages/TransactionDuplicate/ReviewCategory.tsx +++ b/src/pages/TransactionDuplicate/ReviewCategory.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as TransactionUtils from '@libs/TransactionUtils'; import type SCREENS from '@src/SCREENS'; @@ -13,7 +13,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewCategory() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID ?? ''); const compareResult = TransactionUtils.compareDuplicateTransactionFields(transactionID); diff --git a/src/pages/TransactionDuplicate/ReviewDescription.tsx b/src/pages/TransactionDuplicate/ReviewDescription.tsx index 3d74d8cc36e1..cc4648acd667 100644 --- a/src/pages/TransactionDuplicate/ReviewDescription.tsx +++ b/src/pages/TransactionDuplicate/ReviewDescription.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as TransactionUtils from '@libs/TransactionUtils'; import type SCREENS from '@src/SCREENS'; @@ -13,7 +13,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewDescription() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID ?? ''); const compareResult = TransactionUtils.compareDuplicateTransactionFields(transactionID); diff --git a/src/pages/TransactionDuplicate/ReviewMerchant.tsx b/src/pages/TransactionDuplicate/ReviewMerchant.tsx index 47dd43d1d334..657bbae7ce86 100644 --- a/src/pages/TransactionDuplicate/ReviewMerchant.tsx +++ b/src/pages/TransactionDuplicate/ReviewMerchant.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as TransactionUtils from '@libs/TransactionUtils'; import type SCREENS from '@src/SCREENS'; @@ -13,7 +13,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewMerchant() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID ?? ''); const compareResult = TransactionUtils.compareDuplicateTransactionFields(transactionID); diff --git a/src/pages/TransactionDuplicate/ReviewReimbursable.tsx b/src/pages/TransactionDuplicate/ReviewReimbursable.tsx index 0b932e8085db..922f35d4e861 100644 --- a/src/pages/TransactionDuplicate/ReviewReimbursable.tsx +++ b/src/pages/TransactionDuplicate/ReviewReimbursable.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as TransactionUtils from '@libs/TransactionUtils'; import type SCREENS from '@src/SCREENS'; @@ -13,7 +13,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewReimbursable() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID ?? ''); const compareResult = TransactionUtils.compareDuplicateTransactionFields(transactionID); diff --git a/src/pages/TransactionDuplicate/ReviewTag.tsx b/src/pages/TransactionDuplicate/ReviewTag.tsx index 03fb627abd8e..5d8fe2192e89 100644 --- a/src/pages/TransactionDuplicate/ReviewTag.tsx +++ b/src/pages/TransactionDuplicate/ReviewTag.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; @@ -14,7 +14,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewTag() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID ?? ''); diff --git a/src/pages/TransactionDuplicate/ReviewTaxCode.tsx b/src/pages/TransactionDuplicate/ReviewTaxCode.tsx index 78b7c1934715..109b0d96665c 100644 --- a/src/pages/TransactionDuplicate/ReviewTaxCode.tsx +++ b/src/pages/TransactionDuplicate/ReviewTaxCode.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; @@ -8,6 +7,7 @@ import useLocalize from '@hooks/useLocalize'; import useReviewDuplicatesNavigation from '@hooks/useReviewDuplicatesNavigation'; import {setReviewDuplicatesKey} from '@libs/actions/Transaction'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; @@ -18,7 +18,7 @@ import type {FieldItemType} from './ReviewFields'; import ReviewFields from './ReviewFields'; function ReviewTaxRate() { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`); const policy = PolicyUtils.getPolicy(report?.policyID ?? ''); diff --git a/src/pages/TransactionReceiptPage.tsx b/src/pages/TransactionReceiptPage.tsx index c05d90a180e1..a933842d7ebe 100644 --- a/src/pages/TransactionReceiptPage.tsx +++ b/src/pages/TransactionReceiptPage.tsx @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, RootStackParamList, State} from '@libs/Navigation/types'; import * as ReceiptUtils from '@libs/ReceiptUtils'; import * as ReportActionUtils from '@libs/ReportActionsUtils'; @@ -16,7 +16,7 @@ import NAVIGATORS from '@src/NAVIGATORS'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -type TransactionReceiptProps = StackScreenProps; +type TransactionReceiptProps = PlatformStackScreenProps; function TransactionReceipt({route}: TransactionReceiptProps) { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`); diff --git a/src/pages/UnlinkLoginPage.tsx b/src/pages/UnlinkLoginPage.tsx index 9869e4a70e68..8ef7c9a19979 100644 --- a/src/pages/UnlinkLoginPage.tsx +++ b/src/pages/UnlinkLoginPage.tsx @@ -1,10 +1,10 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import usePrevious from '@hooks/usePrevious'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {PublicScreensParamList} from '@navigation/types'; import * as Session from '@userActions/Session'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -16,7 +16,7 @@ type UnlinkLoginPageOnyxProps = { account: OnyxEntry; }; -type UnlinkLoginPageProps = UnlinkLoginPageOnyxProps & StackScreenProps; +type UnlinkLoginPageProps = UnlinkLoginPageOnyxProps & PlatformStackScreenProps; function UnlinkLoginPage({route, account}: UnlinkLoginPageProps) { const accountID = route.params.accountID ?? -1; diff --git a/src/pages/ValidateLoginPage/types.ts b/src/pages/ValidateLoginPage/types.ts index a42eec7131db..f6f057ba66aa 100644 --- a/src/pages/ValidateLoginPage/types.ts +++ b/src/pages/ValidateLoginPage/types.ts @@ -1,7 +1,7 @@ -import type {StackScreenProps} from '@react-navigation/stack'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {PublicScreensParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; -type ValidateLoginPageProps = StackScreenProps; +type ValidateLoginPageProps = PlatformStackScreenProps; export default ValidateLoginPageProps; diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 4a87d51e3c82..ed23c15ce496 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -1,6 +1,5 @@ import {PortalHost} from '@gorhom/portal'; import {useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import lodashIsEqual from 'lodash/isEqual'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {FlatList, ViewStyle} from 'react-native'; @@ -32,6 +31,7 @@ import useViewportOffsetTop from '@hooks/useViewportOffsetTop'; import Timing from '@libs/actions/Timing'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import clearReportNotifications from '@libs/Notification/clearReportNotifications'; import Performance from '@libs/Performance'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -56,7 +56,7 @@ import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; import {ActionListContext, ReactionListContext} from './ReportScreenContext'; -type ReportScreenNavigationProps = StackScreenProps; +type ReportScreenNavigationProps = PlatformStackScreenProps; type ReportScreenProps = CurrentReportIDContextValue & ReportScreenNavigationProps; diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx index 2850ed0538db..47177d60b743 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx @@ -242,4 +242,4 @@ export default withOnyx, Su key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, selector: EmojiUtils.getPreferredSkinToneIndex, }, -})(forwardRef(SuggestionEmoji)); +})(forwardRef(SuggestionEmoji)); \ No newline at end of file diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 76ba6426929b..e3612cbc8d60 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -1,6 +1,5 @@ import type {ListRenderItemInfo} from '@react-native/virtualized-lists/Lists/VirtualizedList'; import {useIsFocused, useRoute} from '@react-navigation/native'; -import type {RouteProp} from '@react-navigation/native'; // eslint-disable-next-line lodash/import-scope import type {DebouncedFunc} from 'lodash'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; @@ -20,6 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import Visibility from '@libs/Visibility'; @@ -162,7 +162,7 @@ function ReportActionsList({ const {isInNarrowPaneModal, shouldUseNarrowLayout} = useResponsiveLayout(); const {isOffline} = useNetwork(); - const route = useRoute>(); + const route = useRoute>(); const reportScrollManager = useReportScrollManager(); const userActiveSince = useRef(DateUtils.getDBTime()); const lastMessageTime = useRef(null); diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index 8896611905ca..d857608e278c 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useIsFocused, useRoute} from '@react-navigation/native'; import lodashIsEqual from 'lodash/isEqual'; import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; @@ -12,6 +11,7 @@ import usePrevious from '@hooks/usePrevious'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import DateUtils from '@libs/DateUtils'; import getIsReportFullyVisible from '@libs/getIsReportFullyVisible'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as NumberUtils from '@libs/NumberUtils'; import {generateNewRandomInt} from '@libs/NumberUtils'; @@ -87,7 +87,7 @@ function ReportActionsView({ }: ReportActionsViewProps) { useCopySelectionHelper(); const reactionListRef = useContext(ReactionListContext); - const route = useRoute>(); + const route = useRoute>(); const [session] = useOnyx(ONYXKEYS.SESSION); const [transactionThreadReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID ?? -1}`, { selector: (reportActions: OnyxEntry) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true), diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx index d30d8e9aabc1..97a4a6615260 100644 --- a/src/pages/home/report/ReportAttachments.tsx +++ b/src/pages/home/report/ReportAttachments.tsx @@ -1,17 +1,17 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {useOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import type {Attachment} from '@components/Attachments/types'; import ComposerFocusManager from '@libs/ComposerFocusManager'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ReportAttachmentsProps = StackScreenProps; +type ReportAttachmentsProps = PlatformStackScreenProps; function ReportAttachments({route}: ReportAttachmentsProps) { const reportID = route.params.reportID; diff --git a/src/pages/home/report/ReportDetailsExportPage.tsx b/src/pages/home/report/ReportDetailsExportPage.tsx index 0da9a7c1bb8e..b7b66a356a86 100644 --- a/src/pages/home/report/ReportDetailsExportPage.tsx +++ b/src/pages/home/report/ReportDetailsExportPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -13,6 +12,7 @@ import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import * as ReportActions from '@libs/actions/Report'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; @@ -20,7 +20,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ReportDetailsExportPageProps = StackScreenProps; +type ReportDetailsExportPageProps = PlatformStackScreenProps; type ExportType = ValueOf; diff --git a/src/pages/home/report/ReportDetailsShareCodePage.tsx b/src/pages/home/report/ReportDetailsShareCodePage.tsx index 4caa29209fa9..2f95572067c3 100644 --- a/src/pages/home/report/ReportDetailsShareCodePage.tsx +++ b/src/pages/home/report/ReportDetailsShareCodePage.tsx @@ -1,7 +1,7 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -18,7 +18,7 @@ type ReportDetailsShareCodePageOnyxProps = { type ReportDetailsShareCodePageProps = ReportDetailsShareCodePageOnyxProps & WithReportOrNotFoundProps & - StackScreenProps; + PlatformStackScreenProps; function ReportDetailsShareCodePage({report, policy, route}: ReportDetailsShareCodePageProps) { if (ReportUtils.isSelfDM(report)) { diff --git a/src/pages/home/report/UserTypingEventListener.tsx b/src/pages/home/report/UserTypingEventListener.tsx index fa0eed4d57c5..73062902f63e 100644 --- a/src/pages/home/report/UserTypingEventListener.tsx +++ b/src/pages/home/report/UserTypingEventListener.tsx @@ -1,9 +1,9 @@ -import type {RouteProp} from '@react-navigation/native'; import {useIsFocused, useRoute} from '@react-navigation/native'; import {useEffect, useRef} from 'react'; import {InteractionManager} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as Report from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -19,7 +19,7 @@ function UserTypingEventListener({report}: UserTypingEventListenerProps) { const didSubscribeToReportTypingEvents = useRef(false); const reportID = report.reportID; const isFocused = useIsFocused(); - const route = useRoute>(); + const route = useRoute>(); useEffect( () => () => { diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index f291d71c75e8..24bdb8f49960 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -1,5 +1,4 @@ /* eslint-disable rulesdir/no-negated-variables */ -import type {StackScreenProps} from '@react-navigation/stack'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect, useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; @@ -15,8 +14,9 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; -type WithReportAndReportActionOrNotFoundProps = StackScreenProps< +type WithReportAndReportActionOrNotFoundProps = PlatformStackScreenProps< FlagCommentNavigatorParamList & SplitDetailsNavigatorParamList, typeof SCREENS.FLAG_COMMENT_ROOT | typeof SCREENS.SPLIT_DETAILS.ROOT > & { @@ -35,7 +35,7 @@ type WithReportAndReportActionOrNotFoundProps = StackScreenProps< export default function ( WrappedComponent: ComponentType>, -): ComponentType> { +): ComponentType, keyof OnyxProps>> { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`); diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index 8c0f4acbbe39..b5608d281778 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -1,11 +1,11 @@ /* eslint-disable rulesdir/no-negated-variables */ -import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; -import {useOnyx} from 'react-native-onyx'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type { ParticipantsNavigatorParamList, @@ -22,20 +22,9 @@ import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type WithReportOrNotFoundProps = { - route: - | RouteProp - | RouteProp - | RouteProp - | RouteProp - | RouteProp - | RouteProp - | RouteProp - | RouteProp - | RouteProp; - +type WithReportOrNotFoundOnyxProps = { /** The report currently being looked at */ - report: OnyxTypes.Report; + report: OnyxEntry; /** Metadata of the report currently being looked at */ reportMetadata: OnyxEntry; @@ -50,9 +39,30 @@ type WithReportOrNotFoundProps = { isLoadingReportData: OnyxEntry; }; +type ScreenProps = + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps + | PlatformStackScreenProps; + +type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { + /** The report currently being looked at */ + report: OnyxTypes.Report; + + route: ScreenProps['route']; + navigation: ScreenProps['navigation']; +}; + export default function ( shouldRequireReportID = true, -): (WrappedComponent: React.ComponentType>) => React.ComponentType> { +): ( + WrappedComponent: React.ComponentType>, +) => React.ComponentType, keyof WithReportOrNotFoundOnyxProps>> { return function (WrappedComponent: ComponentType>) { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { const [betas] = useOnyx(ONYXKEYS.BETAS); diff --git a/src/pages/iou/HoldReasonPage.tsx b/src/pages/iou/HoldReasonPage.tsx index 7523a0932c42..61bf7399889a 100644 --- a/src/pages/iou/HoldReasonPage.tsx +++ b/src/pages/iou/HoldReasonPage.tsx @@ -1,37 +1,24 @@ -import type {RouteProp} from '@react-navigation/native'; import React, {useCallback, useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import useLocalize from '@hooks/useLocalize'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import type {MoneyRequestNavigatorParamList, SearchReportParamList} from '@libs/Navigation/types'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as FormActions from '@userActions/FormActions'; import * as IOU from '@userActions/IOU'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Route} from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/MoneyRequestHoldReasonForm'; import HoldReasonFormView from './HoldReasonFormView'; -type HoldReasonPageRouteParams = { - /** ID of the transaction the page was opened for */ - transactionID: string; - - /** ID of the report that user is providing hold reason to */ - reportID: string; - - /** Link to previous page */ - backTo: Route; - - searchHash?: number; -}; - -type HoldReasonPageProps = { - /** Navigation route context info provided by react navigation */ - route: RouteProp<{params: HoldReasonPageRouteParams}>; -}; +type HoldReasonPageProps = + | PlatformStackScreenProps + | PlatformStackScreenProps; function HoldReasonPage({route}: HoldReasonPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index bb464e521407..889c5f1515bf 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -13,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SplitDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; @@ -28,7 +28,7 @@ import type SCREENS from '@src/SCREENS'; import type {Participant} from '@src/types/onyx/IOU'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps & StackScreenProps; +type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps & PlatformStackScreenProps; function SplitBillDetailsPage({route, report, reportAction}: SplitBillDetailsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx index 09fe67ab882f..7a0047d182ac 100644 --- a/src/pages/iou/request/IOURequestStartPage.tsx +++ b/src/pages/iou/request/IOURequestStartPage.tsx @@ -35,6 +35,7 @@ function IOURequestStartPage({ route: { params: {iouType, reportID}, }, + navigation, }: IOURequestStartPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -148,6 +149,7 @@ function IOURequestStartPage({ )} @@ -155,7 +157,10 @@ function IOURequestStartPage({ {() => ( - + )} @@ -163,7 +168,10 @@ function IOURequestStartPage({ {() => ( - + )} @@ -176,6 +184,7 @@ function IOURequestStartPage({ > diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx index 66736dc80b52..9b90471d8d1b 100644 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useIsFocused} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef} from 'react'; @@ -7,6 +6,7 @@ import {withOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as IOUUtils from '@libs/IOUUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -38,9 +38,8 @@ type MoneyRequestRouteName = | typeof SCREENS.MONEY_REQUEST.STEP_SEND_FROM | typeof SCREENS.MONEY_REQUEST.STEP_COMPANY_INFO; -type Route = RouteProp; - -type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & {route: Route}; +type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & + PlatformStackScreenProps; export default function , TRef>(WrappedComponent: ComponentType>) { // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 2361d58dc2be..f4fa34c406aa 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/core'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef, useEffect} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; @@ -6,6 +5,7 @@ import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as ReportActions from '@userActions/Report'; @@ -42,9 +42,7 @@ type MoneyRequestRouteName = | typeof SCREENS.MONEY_REQUEST.STEP_SEND_FROM | typeof SCREENS.MONEY_REQUEST.STEP_COMPANY_INFO; -type Route = RouteProp; - -type WithWritableReportOrNotFoundProps = WithWritableReportOrNotFoundOnyxProps & {route: Route}; +type WithWritableReportOrNotFoundProps = WithWritableReportOrNotFoundOnyxProps & PlatformStackScreenProps; export default function , TRef>( WrappedComponent: ComponentType>, diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx index b156a6c7b2f1..be0fcf2f3021 100644 --- a/src/pages/settings/AboutPage/ConsolePage.tsx +++ b/src/pages/settings/AboutPage/ConsolePage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import {format} from 'date-fns'; import React, {useCallback, useMemo, useRef, useState} from 'react'; @@ -26,6 +25,7 @@ import type {Log} from '@libs/Console'; import localFileCreate from '@libs/localFileCreate'; import localFileDownload from '@libs/localFileDownload'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -50,7 +50,7 @@ function ConsolePage() { const styles = useThemeStyles(); const theme = useTheme(); const {windowWidth} = useWindowDimensions(); - const route = useRoute>(); + const route = useRoute>(); const menuItems: PopoverMenuItem[] = useMemo( () => [ diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx index 8f0623f99d32..ad4006b06e03 100644 --- a/src/pages/settings/AboutPage/ShareLogPage.tsx +++ b/src/pages/settings/AboutPage/ShareLogPage.tsx @@ -1,10 +1,10 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; import ShareLogList from './ShareLogList'; -type ShareLogPageProps = StackScreenProps; +type ShareLogPageProps = PlatformStackScreenProps; function ShareLogPage({route}: ShareLogPageProps) { return ; diff --git a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx index 2e567fe82974..135d50a4c89f 100644 --- a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx +++ b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -13,6 +12,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import variables from '@styles/variables'; @@ -30,7 +30,7 @@ type ExitSurveyConfirmPageOnyxProps = { exitReason?: ExitReason | null; }; -type ExitSurveyConfirmPageProps = ExitSurveyConfirmPageOnyxProps & StackScreenProps; +type ExitSurveyConfirmPageProps = ExitSurveyConfirmPageOnyxProps & PlatformStackScreenProps; function ExitSurveyConfirmPage({exitReason, route, navigation}: ExitSurveyConfirmPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx index 1fb7cfbc94ab..87d29aba0e88 100644 --- a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx +++ b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -17,6 +16,7 @@ import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import StatusBar from '@libs/StatusBar'; import updateMultilineInputRange from '@libs/updateMultilineInputRange'; import Navigation from '@navigation/Navigation'; @@ -31,7 +31,7 @@ import INPUT_IDS from '@src/types/form/ExitSurveyResponseForm'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import ExitSurveyOffline from './ExitSurveyOffline'; -type ExitSurveyResponsePageProps = StackScreenProps; +type ExitSurveyResponsePageProps = PlatformStackScreenProps; function ExitSurveyResponsePage({route, navigation}: ExitSurveyResponsePageProps) { const [draftResponse = ''] = useOnyx(ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM_DRAFT, {selector: (value) => value?.[INPUT_IDS.RESPONSE]}); diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx index 9fcc28f51912..d609355c10e5 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {InteractionManager, Keyboard, View} from 'react-native'; @@ -22,6 +21,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; @@ -33,7 +33,7 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import ValidateCodeForm from './ValidateCodeForm'; import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm'; -type ContactMethodDetailsPageProps = StackScreenProps; +type ContactMethodDetailsPageProps = PlatformStackScreenProps; function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { const [loginList, loginListResult] = useOnyx(ONYXKEYS.LOGIN_LIST); diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx index 893a54c5ccfd..a49eb140626a 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; @@ -18,6 +17,7 @@ import useDelegateUserDetails from '@hooks/useDelegateUserDetails'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; @@ -35,7 +35,7 @@ type ContactMethodsPageOnyxProps = { session: OnyxEntry; }; -type ContactMethodsPageProps = ContactMethodsPageOnyxProps & StackScreenProps; +type ContactMethodsPageProps = ContactMethodsPageOnyxProps & PlatformStackScreenProps; function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx index 42ab49e2ed50..9b9746045c36 100644 --- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx +++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; @@ -18,21 +17,23 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as UserUtils from '@libs/UserUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; +import ROUTES from '@src/ROUTES';å import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/NewContactMethodForm'; import type {Errors} from '@src/types/onyx/OnyxCommon'; -type NewContactMethodPageProps = StackScreenProps; +type NewContactMethodPageProps = PlatformStackScreenProps; function NewContactMethodPage({route}: NewContactMethodPageProps) { - const contactMethod = UserUtils.getContactMethod(); + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + const contactMethod = account?.primaryLogin ?? ''; const styles = useThemeStyles(); const {translate} = useLocalize(); const loginInputRef = useRef(null); diff --git a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx index a8afffe32d33..0af04b1dfd2a 100644 --- a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -6,6 +5,7 @@ import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import type {CountryData} from '@libs/searchCountryOptions'; import searchCountryOptions from '@libs/searchCountryOptions'; @@ -16,7 +16,7 @@ import type {TranslationPaths} from '@src/languages/types'; import type {Route} from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type CountrySelectionPageProps = StackScreenProps; +type CountrySelectionPageProps = PlatformStackScreenProps; function CountrySelectionPage({route, navigation}: CountrySelectionPageProps) { const [searchValue, setSearchValue] = useState(''); diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx b/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx index 3e5287c82a42..668081242996 100644 --- a/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import AddressPage from '@pages/AddressPage'; @@ -19,7 +19,7 @@ type PersonalAddressPageOnyxProps = { isLoadingApp: OnyxEntry; }; -type PersonalAddressPageProps = StackScreenProps & PersonalAddressPageOnyxProps; +type PersonalAddressPageProps = PlatformStackScreenProps & PersonalAddressPageOnyxProps; /** * Submit form to update user's first and last legal name diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 977719f63879..a80db51580ba 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -1,9 +1,9 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as UserUtils from '@libs/UserUtils'; @@ -19,7 +19,7 @@ type ProfileAvatarOnyxProps = { isLoadingApp: OnyxEntry; }; -type ProfileAvatarProps = ProfileAvatarOnyxProps & StackScreenProps; +type ProfileAvatarProps = ProfileAvatarOnyxProps & PlatformStackScreenProps; function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadingApp = true}: ProfileAvatarProps) { const personalDetail = personalDetails?.[route.params.accountID]; diff --git a/src/pages/settings/Report/NamePage.tsx b/src/pages/settings/Report/NamePage.tsx index de73e59bb7da..f8ee44ccaa5f 100644 --- a/src/pages/settings/Report/NamePage.tsx +++ b/src/pages/settings/Report/NamePage.tsx @@ -1,5 +1,5 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type {ReportSettingsNavigatorParamList} from '@navigation/types'; import GroupChatNameEditPage from '@pages/GroupChatNameEditPage'; @@ -8,7 +8,7 @@ import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNot import type SCREENS from '@src/SCREENS'; import RoomNamePage from './RoomNamePage'; -type NamePageProps = WithReportOrNotFoundProps & StackScreenProps; +type NamePageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function NamePage({report}: NamePageProps) { if (ReportUtils.isGroupChat(report)) { diff --git a/src/pages/settings/Report/NotificationPreferencePage.tsx b/src/pages/settings/Report/NotificationPreferencePage.tsx index 416d710d4966..50d445015f45 100644 --- a/src/pages/settings/Report/NotificationPreferencePage.tsx +++ b/src/pages/settings/Report/NotificationPreferencePage.tsx @@ -1,6 +1,4 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -10,6 +8,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; +import type {PlatformStackRouteProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type {ReportSettingsNavigatorParamList} from '@navigation/types'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; @@ -19,10 +18,10 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -type NotificationPreferencePageProps = WithReportOrNotFoundProps & StackScreenProps; +type NotificationPreferencePageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function NotificationPreferencePage({report}: NotificationPreferencePageProps) { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report.reportID || -1}`); const isMoneyRequestReport = ReportUtils.isMoneyRequestReport(report); diff --git a/src/pages/settings/Report/ReportSettingsPage.tsx b/src/pages/settings/Report/ReportSettingsPage.tsx index c407788dce65..e943bc7b84a1 100644 --- a/src/pages/settings/Report/ReportSettingsPage.tsx +++ b/src/pages/settings/Report/ReportSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -11,6 +10,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type {ReportSettingsNavigatorParamList} from '@navigation/types'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; @@ -21,7 +21,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type ReportSettingsPageProps = WithReportOrNotFoundProps & StackScreenProps; +type ReportSettingsPageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function ReportSettingsPage({report, policies, route}: ReportSettingsPageProps) { const backTo = route.params.backTo; diff --git a/src/pages/settings/Report/RoomNamePage.tsx b/src/pages/settings/Report/RoomNamePage.tsx index a497d793f465..ac23f455c635 100644 --- a/src/pages/settings/Report/RoomNamePage.tsx +++ b/src/pages/settings/Report/RoomNamePage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useIsFocused, useRoute} from '@react-navigation/native'; import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; @@ -16,6 +15,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportSettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; @@ -37,7 +37,7 @@ type RoomNamePageProps = RoomNamePageOnyxProps & { }; function RoomNamePage({report, reports}: RoomNamePageProps) { - const route = useRoute>(); + const route = useRoute>(); const styles = useThemeStyles(); const roomNameInputRef = useRef(null); const isFocused = useIsFocused(); diff --git a/src/pages/settings/Report/VisibilityPage.tsx b/src/pages/settings/Report/VisibilityPage.tsx index 07c05d1b8de1..a1ddc3d5fe48 100644 --- a/src/pages/settings/Report/VisibilityPage.tsx +++ b/src/pages/settings/Report/VisibilityPage.tsx @@ -1,6 +1,4 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useRef, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -10,6 +8,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; +import type {PlatformStackRouteProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportSettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNotFound'; @@ -20,10 +19,10 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type {RoomVisibility} from '@src/types/onyx/Report'; -type VisibilityProps = WithReportOrNotFoundProps & StackScreenProps; +type VisibilityProps = WithReportOrNotFoundProps & PlatformStackScreenProps; function VisibilityPage({report}: VisibilityProps) { - const route = useRoute>(); + const route = useRoute>(); const [showConfirmModal, setShowConfirmModal] = useState(false); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || -1}`); const shouldGoBackToDetailsPage = useRef(false); diff --git a/src/pages/settings/Report/WriteCapabilityPage.tsx b/src/pages/settings/Report/WriteCapabilityPage.tsx index 888c15295dc2..2f6fb9b485a7 100644 --- a/src/pages/settings/Report/WriteCapabilityPage.tsx +++ b/src/pages/settings/Report/WriteCapabilityPage.tsx @@ -1,6 +1,4 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -12,6 +10,7 @@ import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import type {ReportSettingsNavigatorParamList} from '@navigation/types'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; @@ -30,10 +29,10 @@ type WriteCapabilityPageOnyxProps = { type WriteCapabilityPageProps = WriteCapabilityPageOnyxProps & WithReportOrNotFoundProps & - StackScreenProps; + PlatformStackScreenProps; function WriteCapabilityPage({report, policy}: WriteCapabilityPageProps) { - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const writeCapabilityOptions = Object.values(CONST.REPORT.WRITE_CAPABILITIES).map((value) => ({ value, diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index 2c60aef482a8..047d80ee92fa 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import type {ValueOf} from 'type-fest'; import Button from '@components/Button'; @@ -13,13 +12,14 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {requestValidationCode} from '@libs/actions/Delegate'; import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ConfirmDelegatePageProps = StackScreenProps; +type ConfirmDelegatePageProps = PlatformStackScreenProps; function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { const {translate} = useLocalize(); diff --git a/src/pages/settings/Security/AddDelegate/DelegateMagicCodePage.tsx b/src/pages/settings/Security/AddDelegate/DelegateMagicCodePage.tsx index 9497507f041a..941cc2992121 100644 --- a/src/pages/settings/Security/AddDelegate/DelegateMagicCodePage.tsx +++ b/src/pages/settings/Security/AddDelegate/DelegateMagicCodePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useRef} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -8,6 +7,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import type CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -16,7 +16,7 @@ import type SCREENS from '@src/SCREENS'; import ValidateCodeForm from './ValidateCodeForm'; import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm'; -type DelegateMagicCodePageProps = StackScreenProps; +type DelegateMagicCodePageProps = PlatformStackScreenProps; function DelegateMagicCodePage({route}: DelegateMagicCodePageProps) { const {translate} = useLocalize(); diff --git a/src/pages/settings/Security/AddDelegate/SelectDelegateRolePage.tsx b/src/pages/settings/Security/AddDelegate/SelectDelegateRolePage.tsx index 4270441775cd..7a52efb6cfd8 100644 --- a/src/pages/settings/Security/AddDelegate/SelectDelegateRolePage.tsx +++ b/src/pages/settings/Security/AddDelegate/SelectDelegateRolePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -9,12 +8,13 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type SelectDelegateRolePageProps = StackScreenProps; +type SelectDelegateRolePageProps = PlatformStackScreenProps; function SelectDelegateRolePage({route}: SelectDelegateRolePageProps) { const {translate} = useLocalize(); diff --git a/src/pages/settings/Security/CloseAccountPage.tsx b/src/pages/settings/Security/CloseAccountPage.tsx index 1da4436ca810..214b38ee3620 100644 --- a/src/pages/settings/Security/CloseAccountPage.tsx +++ b/src/pages/settings/Security/CloseAccountPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; @@ -15,6 +14,7 @@ import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ValidationUtils from '@libs/ValidationUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import variables from '@styles/variables'; @@ -31,7 +31,7 @@ type CloseAccountPageOnyxProps = { session: OnyxEntry; }; -type CloseAccountPageProps = CloseAccountPageOnyxProps & StackScreenProps; +type CloseAccountPageProps = CloseAccountPageOnyxProps & PlatformStackScreenProps; function CloseAccountPage({session}: CloseAccountPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx index dd3d3b87a12f..5ae593971f8e 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; @@ -19,6 +18,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Clipboard from '@libs/Clipboard'; import localFileDownload from '@libs/localFileDownload'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {BackToParams, SettingsNavigatorParamList} from '@libs/Navigation/types'; import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper'; import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth'; @@ -39,7 +39,7 @@ function CodesStep({account, user, backTo}: CodesStepProps) { const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const [error, setError] = useState(''); const isUserValidated = user?.validated; - const route = useRoute>(); + const route = useRoute>(); const {setStep} = useTwoFactorAuthContext(); diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx index c49b88c2ac0e..9c70371e76a3 100644 --- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx @@ -1,9 +1,9 @@ import {useRoute} from '@react-navigation/native'; -import type {RouteProp} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext'; import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions'; import CONST from '@src/CONST'; @@ -22,7 +22,7 @@ import type {BaseTwoFactorAuthFormOnyxProps} from './TwoFactorAuthForm/types'; type TwoFactorAuthStepProps = BaseTwoFactorAuthFormOnyxProps; function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) { - const route = useRoute>(); + const route = useRoute>(); const backTo = route.params?.backTo ?? ''; const forwardTo = route.params?.forwardTo ?? ''; diff --git a/src/pages/settings/Subscription/SubscriptionSize/index.tsx b/src/pages/settings/Subscription/SubscriptionSize/index.tsx index 84cd86c60bca..94c6fd5dffd8 100644 --- a/src/pages/settings/Subscription/SubscriptionSize/index.tsx +++ b/src/pages/settings/Subscription/SubscriptionSize/index.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -7,6 +6,7 @@ import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import * as FormActions from '@userActions/FormActions'; import * as Subscription from '@userActions/Subscription'; @@ -18,7 +18,7 @@ import Size from './substeps/Size'; const bodyContent: Array> = [Size, Confirmation]; -type SubscriptionSizePageProps = StackScreenProps; +type SubscriptionSizePageProps = PlatformStackScreenProps; function SubscriptionSizePage({route}: SubscriptionSizePageProps) { const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION); diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx index 23b694fe0d40..bdc8928f362b 100644 --- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx +++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -18,6 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import * as CardSettings from '@userActions/Card'; @@ -33,7 +33,7 @@ type ActivatePhysicalCardPageOnyxProps = { cardList: OnyxEntry>; }; -type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & StackScreenProps; +type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & PlatformStackScreenProps; const LAST_FOUR_DIGITS_LENGTH = 4; const MAGIC_INPUT_MIN_HEIGHT = 86; diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx index 69ba24585e2e..ef85b09ac2a6 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx @@ -1,10 +1,10 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import AddressForm from '@components/AddressForm'; import useLocalize from '@hooks/useLocalize'; import * as FormActions from '@libs/actions/FormActions'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import type {Country} from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -21,7 +21,7 @@ type GetPhysicalCardAddressOnyxProps = { draftValues: OnyxEntry; }; -type GetPhysicalCardAddressProps = GetPhysicalCardAddressOnyxProps & StackScreenProps; +type GetPhysicalCardAddressProps = GetPhysicalCardAddressOnyxProps & PlatformStackScreenProps; function GetPhysicalCardAddress({ draftValues, diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.tsx index 15354c3cdfb8..1023064c0d39 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -8,6 +7,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import CONST from '@src/CONST'; @@ -34,7 +34,7 @@ type GetPhysicalCardConfirmOnyxProps = { draftValues: OnyxEntry; }; -type GetPhysicalCardConfirmProps = GetPhysicalCardConfirmOnyxProps & StackScreenProps; +type GetPhysicalCardConfirmProps = GetPhysicalCardConfirmOnyxProps & PlatformStackScreenProps; function GetPhysicalCardConfirm({ draftValues, diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardName.tsx index deaa05350c7f..0a804d1df470 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardName.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardName.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -6,6 +5,7 @@ import InputWrapper from '@components/Form/InputWrapper'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ValidationUtils from '@libs/ValidationUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import CONST from '@src/CONST'; @@ -26,7 +26,7 @@ type GetPhysicalCardNameOnyxProps = { draftValues: OnyxEntry; }; -type GetPhysicalCardNameProps = GetPhysicalCardNameOnyxProps & StackScreenProps; +type GetPhysicalCardNameProps = GetPhysicalCardNameOnyxProps & PlatformStackScreenProps; function GetPhysicalCardName({ draftValues, diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx index 56d5a29a3203..c7676db26067 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -6,6 +5,7 @@ import InputWrapper from '@components/Form/InputWrapper'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; import * as LoginUtils from '@libs/LoginUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -24,7 +24,7 @@ type GetPhysicalCardPhoneOnyxProps = { draftValues: OnyxEntry; }; -type GetPhysicalCardPhoneProps = GetPhysicalCardPhoneOnyxProps & StackScreenProps; +type GetPhysicalCardPhoneProps = GetPhysicalCardPhoneOnyxProps & PlatformStackScreenProps; function GetPhysicalCardPhone({ route: { diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.tsx b/src/pages/settings/Wallet/ExpensifyCardPage.tsx index 1146f876860e..89c3cd668622 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.tsx +++ b/src/pages/settings/Wallet/ExpensifyCardPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -22,6 +21,7 @@ import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import * as Card from '@userActions/Card'; @@ -51,7 +51,7 @@ type ExpensifyCardPageOnyxProps = { loginList: OnyxEntry; }; -type ExpensifyCardPageProps = ExpensifyCardPageOnyxProps & StackScreenProps; +type ExpensifyCardPageProps = ExpensifyCardPageOnyxProps & PlatformStackScreenProps; type PossibleTitles = 'cardPage.smartLimit.title' | 'cardPage.monthlyLimit.title' | 'cardPage.fixedLimit.title'; diff --git a/src/pages/settings/Wallet/ReportCardLostPage.tsx b/src/pages/settings/Wallet/ReportCardLostPage.tsx index 35b5bc9cd19a..5850be921b23 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.tsx +++ b/src/pages/settings/Wallet/ReportCardLostPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import usePrevious from '@hooks/usePrevious'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -61,7 +61,7 @@ type ReportCardLostPageOnyxProps = { cardList: OnyxEntry>; }; -type ReportCardLostPageProps = ReportCardLostPageOnyxProps & StackScreenProps; +type ReportCardLostPageProps = ReportCardLostPageOnyxProps & PlatformStackScreenProps; function ReportCardLostPage({ privatePersonalDetails = { diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx index 373314df08ac..f4a2c861868c 100644 --- a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx +++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -11,6 +10,7 @@ import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import * as Card from '@userActions/Card'; @@ -19,7 +19,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type ReportVirtualCardFraudPageProps = StackScreenProps; +type ReportVirtualCardFraudPageProps = PlatformStackScreenProps; function ReportVirtualCardFraudPage({ route: { diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index e375f03ba58c..0e8d48f05854 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -12,13 +11,14 @@ import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type VerifyAccountPageProps = StackScreenProps; +type VerifyAccountPageProps = PlatformStackScreenProps; function VerifyAccountPage({route}: VerifyAccountPageProps) { const [account] = useOnyx(ONYXKEYS.ACCOUNT); diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx index 0132442b5978..fb7e7b9f4617 100644 --- a/src/pages/tasks/NewTaskDescriptionPage.tsx +++ b/src/pages/tasks/NewTaskDescriptionPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as ReportUtils from '@libs/ReportUtils'; @@ -32,7 +32,7 @@ type NewTaskDescriptionPageOnyxProps = { task: OnyxEntry; }; -type NewTaskDescriptionPageProps = NewTaskDescriptionPageOnyxProps & StackScreenProps; +type NewTaskDescriptionPageProps = NewTaskDescriptionPageOnyxProps & PlatformStackScreenProps; function NewTaskDescriptionPage({task, route}: NewTaskDescriptionPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx index f0ff4d0fb409..245a3a9893b7 100644 --- a/src/pages/tasks/NewTaskDetailsPage.tsx +++ b/src/pages/tasks/NewTaskDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as ReportUtils from '@libs/ReportUtils'; @@ -32,7 +32,7 @@ type NewTaskDetailsPageOnyxProps = { task: OnyxEntry; }; -type NewTaskDetailsPageProps = NewTaskDetailsPageOnyxProps & StackScreenProps; +type NewTaskDetailsPageProps = NewTaskDetailsPageOnyxProps & PlatformStackScreenProps; function NewTaskDetailsPage({task, route}: NewTaskDetailsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/tasks/NewTaskPage.tsx b/src/pages/tasks/NewTaskPage.tsx index faf45df8b51d..1ac6c1b31356 100644 --- a/src/pages/tasks/NewTaskPage.tsx +++ b/src/pages/tasks/NewTaskPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; @@ -18,6 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -41,7 +41,7 @@ type NewTaskPageOnyxProps = { reports: OnyxCollection; }; -type NewTaskPageProps = NewTaskPageOnyxProps & StackScreenProps; +type NewTaskPageProps = NewTaskPageOnyxProps & PlatformStackScreenProps; function NewTaskPage({task, reports, personalDetails, route}: NewTaskPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/tasks/NewTaskTitlePage.tsx b/src/pages/tasks/NewTaskTitlePage.tsx index 5afd919cac57..55e23f258762 100644 --- a/src/pages/tasks/NewTaskTitlePage.tsx +++ b/src/pages/tasks/NewTaskTitlePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import * as TaskActions from '@userActions/Task'; import CONST from '@src/CONST'; @@ -27,7 +27,7 @@ type NewTaskTitlePageOnyxProps = { /** Task Creation Data */ task: OnyxEntry; }; -type NewTaskTitlePageProps = NewTaskTitlePageOnyxProps & StackScreenProps; +type NewTaskTitlePageProps = NewTaskTitlePageOnyxProps & PlatformStackScreenProps; function NewTaskTitlePage({task, route}: NewTaskTitlePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.tsx b/src/pages/tasks/TaskAssigneeSelectorModal.tsx index 3f44882e2fd0..00d8ace8b7c4 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.tsx +++ b/src/pages/tasks/TaskAssigneeSelectorModal.tsx @@ -1,5 +1,4 @@ /* eslint-disable es/no-optional-chaining */ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {InteractionManager, View} from 'react-native'; @@ -23,6 +22,7 @@ import * as ReportActions from '@libs/actions/Report'; import {READ_COMMANDS} from '@libs/API/types'; import HttpUtils from '@libs/HttpUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import type {TaskDetailsNavigatorParamList} from '@navigation/types'; @@ -101,7 +101,7 @@ function useOptions() { function TaskAssigneeSelectorModal() { const styles = useThemeStyles(); - const route = useRoute>(); + const route = useRoute>(); const {translate} = useLocalize(); const session = useSession(); const backTo = route.params?.backTo; diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx index acd1329b26ec..97c5cf7f7e16 100644 --- a/src/pages/tasks/TaskDescriptionPage.tsx +++ b/src/pages/tasks/TaskDescriptionPage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useFocusEffect, useRoute} from '@react-navigation/native'; import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; @@ -16,6 +15,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportDescriptionNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as ReportUtils from '@libs/ReportUtils'; @@ -33,7 +33,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; type TaskDescriptionPageProps = WithReportOrNotFoundProps & WithCurrentUserPersonalDetailsProps; function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescriptionPageProps) { - const route = useRoute>(); + const route = useRoute>(); const styles = useThemeStyles(); const {translate} = useLocalize(); diff --git a/src/pages/tasks/TaskTitlePage.tsx b/src/pages/tasks/TaskTitlePage.tsx index 900809256c45..e6c429a44674 100644 --- a/src/pages/tasks/TaskTitlePage.tsx +++ b/src/pages/tasks/TaskTitlePage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; @@ -16,6 +15,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {TaskDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; @@ -30,7 +30,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; type TaskTitlePageProps = WithReportOrNotFoundProps & WithCurrentUserPersonalDetailsProps; function TaskTitlePage({report, currentUserPersonalDetails}: TaskTitlePageProps) { - const route = useRoute>(); + const route = useRoute>(); const styles = useThemeStyles(); const {translate} = useLocalize(); diff --git a/src/pages/wallet/WalletStatementPage.tsx b/src/pages/wallet/WalletStatementPage.tsx index 54b601a00350..4319eb09e071 100644 --- a/src/pages/wallet/WalletStatementPage.tsx +++ b/src/pages/wallet/WalletStatementPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {format, getMonth, getYear} from 'date-fns'; import {Str} from 'expensify-common'; import React, {useEffect} from 'react'; @@ -15,6 +14,7 @@ import DateUtils from '@libs/DateUtils'; import fileDownload from '@libs/fileDownload'; import Growl from '@libs/Growl'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {WalletStatementNavigatorParamList} from '@navigation/types'; import * as User from '@userActions/User'; import CONFIG from '@src/CONFIG'; @@ -27,7 +27,7 @@ type WalletStatementOnyxProps = { walletStatement: OnyxEntry; }; -type WalletStatementPageProps = WalletStatementOnyxProps & StackScreenProps; +type WalletStatementPageProps = WalletStatementOnyxProps & PlatformStackScreenProps; function WalletStatementPage({walletStatement, route}: WalletStatementPageProps) { const themePreference = useThemePreference(); diff --git a/src/pages/workspace/WorkspaceAvatar.tsx b/src/pages/workspace/WorkspaceAvatar.tsx index dfe79feb7755..79fc432a82a8 100644 --- a/src/pages/workspace/WorkspaceAvatar.tsx +++ b/src/pages/workspace/WorkspaceAvatar.tsx @@ -1,9 +1,9 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; @@ -16,7 +16,7 @@ type WorkspaceAvatarOnyxProps = { isLoadingApp: OnyxEntry; }; -type WorkspaceAvatarProps = WorkspaceAvatarOnyxProps & StackScreenProps; +type WorkspaceAvatarProps = WorkspaceAvatarOnyxProps & PlatformStackScreenProps; function WorkspaceAvatar({policy, isLoadingApp = true}: WorkspaceAvatarProps) { const avatarURL = policy?.avatarURL ?? '' ? policy?.avatarURL ?? '' : ReportUtils.getDefaultWorkspaceAvatar(policy?.name ?? ''); diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 3db7623bfad1..575cb8a0e75e 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect, useNavigationState} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -24,6 +23,7 @@ import {isConnectionInProgress} from '@libs/actions/connections'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils'; import type {FullScreenNavigatorParamList} from '@navigation/types'; @@ -66,7 +66,7 @@ type WorkspaceMenuItem = { badgeText?: string; }; -type WorkspaceInitialPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceInitialPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; type PolicyFeatureStates = Record; diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.tsx b/src/pages/workspace/WorkspaceInviteMessagePage.tsx index 65776deb7f9a..a79cf537a814 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.tsx +++ b/src/pages/workspace/WorkspaceInviteMessagePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import lodashDebounce from 'lodash/debounce'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {Keyboard, View} from 'react-native'; @@ -20,6 +19,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Parser from '@libs/Parser'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -41,7 +41,7 @@ import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscree type WorkspaceInviteMessagePageProps = WithPolicyAndFullscreenLoadingProps & WithCurrentUserPersonalDetailsProps & - StackScreenProps; + PlatformStackScreenProps; function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}: WorkspaceInviteMessagePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index ad48d15aa9df..edd7374bf8c3 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {SectionListData} from 'react-native'; import {useOnyx, withOnyx} from 'react-native-onyx'; @@ -22,6 +21,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import HttpUtils from '@libs/HttpUtils'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import type {MemberForList} from '@libs/OptionsListUtils'; import * as PhoneNumber from '@libs/PhoneNumber'; @@ -54,7 +54,7 @@ type WorkspaceInvitePageOnyxProps = { type WorkspaceInvitePageProps = WithPolicyAndFullscreenLoadingProps & WithNavigationTransitionEndProps & WorkspaceInvitePageOnyxProps & - StackScreenProps; + PlatformStackScreenProps; function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, policy}: WorkspaceInvitePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/WorkspaceJoinUserPage.tsx b/src/pages/workspace/WorkspaceJoinUserPage.tsx index d73dab51c4fe..cf1225d89fbf 100644 --- a/src/pages/workspace/WorkspaceJoinUserPage.tsx +++ b/src/pages/workspace/WorkspaceJoinUserPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useRef} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -6,6 +5,7 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import ScreenWrapper from '@components/ScreenWrapper'; import useThemeStyles from '@hooks/useThemeStyles'; import navigateAfterJoinRequest from '@libs/navigateAfterJoinRequest'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {AuthScreensParamList} from '@navigation/types'; @@ -21,7 +21,7 @@ type WorkspaceJoinUserPageOnyxProps = { policy: OnyxEntry; }; -type WorkspaceJoinUserPageRoute = {route: StackScreenProps['route']}; +type WorkspaceJoinUserPageRoute = {route: PlatformStackScreenProps['route']}; type WorkspaceJoinUserPageProps = WorkspaceJoinUserPageRoute & WorkspaceJoinUserPageOnyxProps; let isJoinLinkUsed = false; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 027a7509ec0d..e226f6068718 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -1,5 +1,4 @@ import {useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import lodashIsEqual from 'lodash/isEqual'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {TextInput} from 'react-native'; @@ -34,6 +33,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -53,7 +53,9 @@ import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscree import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import WorkspacePageWithSections from './WorkspacePageWithSections'; -type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps & WithCurrentUserPersonalDetailsProps & StackScreenProps; +type WorkspaceMembersPageProps = WithPolicyAndFullscreenLoadingProps & + WithCurrentUserPersonalDetailsProps & + PlatformStackScreenProps; /** * Inverts an object, equivalent of _.invert diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index 54d8401a99f8..4f342d91bbc1 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -17,6 +16,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import {isControlPolicy} from '@libs/PolicyUtils'; import * as Category from '@userActions/Policy/Category'; @@ -37,7 +37,7 @@ import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscree import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import ToggleSettingOptionRow from './workflows/ToggleSettingsOptionRow'; -type WorkspaceMoreFeaturesPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceMoreFeaturesPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; type Item = { icon: IconAsset; diff --git a/src/pages/workspace/WorkspaceProfileAddressPage.tsx b/src/pages/workspace/WorkspaceProfileAddressPage.tsx index 321471db4c69..57f55e468b1f 100644 --- a/src/pages/workspace/WorkspaceProfileAddressPage.tsx +++ b/src/pages/workspace/WorkspaceProfileAddressPage.tsx @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import type {FormOnyxValues} from '@components/Form/types'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AddressPage from '@pages/AddressPage'; import {updateAddress} from '@userActions/Policy/Policy'; @@ -14,7 +14,7 @@ import withPolicy from './withPolicy'; type WorkspaceProfileAddressPagePolicyProps = WithPolicyProps; -type WorkspaceProfileAddressPageProps = StackScreenProps & WorkspaceProfileAddressPagePolicyProps; +type WorkspaceProfileAddressPageProps = PlatformStackScreenProps & WorkspaceProfileAddressPagePolicyProps; function WorkspaceProfileAddressPage({policy, route}: WorkspaceProfileAddressPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index 1413ad968069..74b62159b7e1 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import type {ImageStyle, StyleProp} from 'react-native'; import {Image, StyleSheet, View} from 'react-native'; @@ -22,6 +21,7 @@ import useThemeIllustrations from '@hooks/useThemeIllustrations'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -38,7 +38,7 @@ import type {WithPolicyProps} from './withPolicy'; import withPolicy from './withPolicy'; import WorkspacePageWithSections from './WorkspacePageWithSections'; -type WorkspaceProfilePageProps = WithPolicyProps & StackScreenProps; +type WorkspaceProfilePageProps = WithPolicyProps & PlatformStackScreenProps; function WorkspaceProfilePage({policyDraft, policy: policyProp, route}: WorkspaceProfilePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/accounting/intacct/EnterSageIntacctCredentialsPage.tsx b/src/pages/workspace/accounting/intacct/EnterSageIntacctCredentialsPage.tsx index 9814e5cef996..d7eee7648a69 100644 --- a/src/pages/workspace/accounting/intacct/EnterSageIntacctCredentialsPage.tsx +++ b/src/pages/workspace/accounting/intacct/EnterSageIntacctCredentialsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -13,13 +12,14 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {connectToSageIntacct} from '@libs/actions/connections/SageIntacct'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/SageIntactCredentialsForm'; -type SageIntacctPrerequisitesPageProps = StackScreenProps; +type SageIntacctPrerequisitesPageProps = PlatformStackScreenProps; function EnterSageIntacctCredentialsPage({route}: SageIntacctPrerequisitesPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/accounting/intacct/ExistingConnectionsPage.tsx b/src/pages/workspace/accounting/intacct/ExistingConnectionsPage.tsx index a034699454ed..9829fc569f53 100644 --- a/src/pages/workspace/accounting/intacct/ExistingConnectionsPage.tsx +++ b/src/pages/workspace/accounting/intacct/ExistingConnectionsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -9,12 +8,13 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {copyExistingPolicyConnection} from '@libs/actions/connections'; import {getAdminPoliciesConnectedToSageIntacct} from '@libs/actions/Policy/Policy'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; -type ExistingConnectionsPageProps = StackScreenProps; +type ExistingConnectionsPageProps = PlatformStackScreenProps; function ExistingConnectionsPage({route}: ExistingConnectionsPageProps) { const {translate, datetimeToRelative} = useLocalize(); diff --git a/src/pages/workspace/accounting/intacct/SageIntacctPrerequisitesPage.tsx b/src/pages/workspace/accounting/intacct/SageIntacctPrerequisitesPage.tsx index 1c60065a08c8..56f11640ea7c 100644 --- a/src/pages/workspace/accounting/intacct/SageIntacctPrerequisitesPage.tsx +++ b/src/pages/workspace/accounting/intacct/SageIntacctPrerequisitesPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo, useRef} from 'react'; import {View} from 'react-native'; // eslint-disable-next-line no-restricted-imports @@ -16,6 +15,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import fileDownload from '@libs/fileDownload'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import * as Link from '@userActions/Link'; @@ -23,7 +23,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type SageIntacctPrerequisitesPageProps = StackScreenProps; +type SageIntacctPrerequisitesPageProps = PlatformStackScreenProps; function SageIntacctPrerequisitesPage({route}: SageIntacctPrerequisitesPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx index 213f561fb4e9..4ca7d5d349ec 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; @@ -12,6 +11,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import {getSageIntacctNonReimbursableActiveDefaultVendor, getSageIntacctVendors, settingsPendingAction} from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import variables from '@styles/variables'; @@ -22,7 +22,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Connections} from '@src/types/onyx/Policy'; -type SageIntacctDefaultVendorPageProps = StackScreenProps; +type SageIntacctDefaultVendorPageProps = PlatformStackScreenProps; function SageIntacctDefaultVendorPage({route}: SageIntacctDefaultVendorPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/accounting/intacct/import/SageIntacctEditUserDimensionsPage.tsx b/src/pages/workspace/accounting/intacct/import/SageIntacctEditUserDimensionsPage.tsx index cd10e270d7d2..8c92aee4722c 100644 --- a/src/pages/workspace/accounting/intacct/import/SageIntacctEditUserDimensionsPage.tsx +++ b/src/pages/workspace/accounting/intacct/import/SageIntacctEditUserDimensionsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import ConfirmModal from '@components/ConfirmModal'; @@ -22,6 +21,7 @@ import { } from '@libs/actions/connections/SageIntacct'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {settingsPendingAction} from '@libs/PolicyUtils'; import CONST from '@src/CONST'; @@ -31,7 +31,7 @@ import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/SageIntacctDimensionsForm'; import DimensionTypeSelector from './DimensionTypeSelector'; -type SageIntacctEditUserDimensionsPageProps = StackScreenProps; +type SageIntacctEditUserDimensionsPageProps = PlatformStackScreenProps; function SageIntacctEditUserDimensionsPage({route}: SageIntacctEditUserDimensionsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx b/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx index 73f35cc7bfdb..7e181cdb65c6 100644 --- a/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx +++ b/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import RadioListItem from '@components/SelectionList/RadioListItem'; import SelectionScreen from '@components/SelectionScreen'; @@ -9,6 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {updateSageIntacctMappingValue} from '@libs/actions/connections/SageIntacct'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {settingsPendingAction} from '@libs/PolicyUtils'; import * as Policy from '@userActions/Policy/Policy'; @@ -17,7 +17,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {SageIntacctMappingName, SageIntacctMappingValue} from '@src/types/onyx/Policy'; -type SageIntacctMappingsTypePageProps = StackScreenProps; +type SageIntacctMappingsTypePageProps = PlatformStackScreenProps; function SageIntacctMappingsTypePage({route}: SageIntacctMappingsTypePageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/accounting/intacct/import/SageIntacctToggleMappingsPage.tsx b/src/pages/workspace/accounting/intacct/import/SageIntacctToggleMappingsPage.tsx index 82757d8d9ae1..af85a65a39c9 100644 --- a/src/pages/workspace/accounting/intacct/import/SageIntacctToggleMappingsPage.tsx +++ b/src/pages/workspace/accounting/intacct/import/SageIntacctToggleMappingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React from 'react'; import ConnectionLayout from '@components/ConnectionLayout'; @@ -11,6 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {clearSageIntacctErrorField, updateSageIntacctMappingValue} from '@libs/actions/connections/SageIntacct'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {areSettingsInErrorFields, settingsPendingAction} from '@libs/PolicyUtils'; import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow'; @@ -20,7 +20,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {SageIntacctMappingName, SageIntacctMappingValue} from '@src/types/onyx/Policy'; -type SageIntacctToggleMappingsPageProps = StackScreenProps; +type SageIntacctToggleMappingsPageProps = PlatformStackScreenProps; type DisplayTypeTranslationKeys = { titleKey: TranslationPaths; diff --git a/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/NetSuiteExistingConnectionsPage.tsx b/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/NetSuiteExistingConnectionsPage.tsx index a83a5dab716e..77b01ed43689 100644 --- a/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/NetSuiteExistingConnectionsPage.tsx +++ b/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/NetSuiteExistingConnectionsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import ConnectionLayout from '@components/ConnectionLayout'; @@ -8,13 +7,14 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {copyExistingPolicyConnection} from '@libs/actions/connections'; import {getAdminPoliciesConnectedToNetSuite} from '@libs/actions/Policy/Policy'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ExistingConnectionsPageProps = StackScreenProps; +type ExistingConnectionsPageProps = PlatformStackScreenProps; function NetSuiteExistingConnectionsPage({route}: ExistingConnectionsPageProps) { const {translate, datetimeToRelative} = useLocalize(); diff --git a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx index abc98f1c4d42..a39a9aeb4206 100644 --- a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx +++ b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import Computer from '@assets/images/laptop-with-second-screen-sync.svg'; @@ -17,8 +16,9 @@ import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import LoadingPage from '@pages/LoadingPage'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; -type RequireQuickBooksDesktopModalProps = StackScreenProps; +type RequireQuickBooksDesktopModalProps = PlatformStackScreenProps; function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx b/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx index 8fe390075d8d..b7f06b12f28d 100644 --- a/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx +++ b/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import Computer from '@assets/images/laptop-with-second-screen-x.svg'; @@ -14,8 +13,9 @@ import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; -type RequireQuickBooksDesktopModalProps = StackScreenProps; +type RequireQuickBooksDesktopModalProps = PlatformStackScreenProps; function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx b/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx index c907095c4301..86fc05054cc5 100644 --- a/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx +++ b/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -10,6 +9,7 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as AccountingUtils from '@libs/AccountingUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -23,7 +23,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {ConnectionName} from '@src/types/onyx/Policy'; -type CardReconciliationPageProps = WithPolicyConnectionsProps & StackScreenProps; +type CardReconciliationPageProps = WithPolicyConnectionsProps & PlatformStackScreenProps; function CardReconciliationPage({policy, route}: CardReconciliationPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx b/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx index f79b7920f77b..e2d6aef05450 100644 --- a/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx +++ b/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import ConnectionLayout from '@components/ConnectionLayout'; @@ -11,6 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as AccountingUtils from '@libs/AccountingUtils'; import {getLastFourDigits} from '@libs/BankAccountUtils'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -21,7 +21,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type ReconciliationAccountSettingsPageProps = StackScreenProps; +type ReconciliationAccountSettingsPageProps = PlatformStackScreenProps; function ReconciliationAccountSettingsPage({route}: ReconciliationAccountSettingsPageProps) { const {policyID, connection} = route.params; diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index bb49c5212fb2..adcf515719a8 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; @@ -12,6 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as Xero from '@libs/actions/connections/Xero'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {findCurrentXeroOrganization, getXeroTenants} from '@libs/PolicyUtils'; import withPolicy from '@pages/workspace/withPolicy'; @@ -22,7 +22,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type XeroOrganizationConfigurationPageProps = WithPolicyProps & StackScreenProps; +type XeroOrganizationConfigurationPageProps = WithPolicyProps & PlatformStackScreenProps; function XeroOrganizationConfigurationPage({ policy, route: { diff --git a/src/pages/workspace/categories/CategoryApproverPage.tsx b/src/pages/workspace/categories/CategoryApproverPage.tsx index 649681db6155..78f5f579bf93 100644 --- a/src/pages/workspace/categories/CategoryApproverPage.tsx +++ b/src/pages/workspace/categories/CategoryApproverPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -8,6 +7,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CategoryUtils from '@libs/CategoryUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -15,7 +15,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function CategoryApproverPage({ route: { diff --git a/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx b/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx index 16ea5b9bd2a7..a87dae907aea 100644 --- a/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx +++ b/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -10,6 +9,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CategoryUtils from '@libs/CategoryUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -18,7 +18,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {TaxRate} from '@src/types/onyx'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function CategoryDefaultTaxRatePage({ route: { diff --git a/src/pages/workspace/categories/CategoryDescriptionHintPage.tsx b/src/pages/workspace/categories/CategoryDescriptionHintPage.tsx index d16d66ce3ea3..26bd66833929 100644 --- a/src/pages/workspace/categories/CategoryDescriptionHintPage.tsx +++ b/src/pages/workspace/categories/CategoryDescriptionHintPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -12,6 +11,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -21,7 +21,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceCategoryDescriptionHintForm'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function CategoryDescriptionHintPage({ route: { diff --git a/src/pages/workspace/categories/CategoryFlagAmountsOverPage.tsx b/src/pages/workspace/categories/CategoryFlagAmountsOverPage.tsx index 6b675f740785..dbd491197d37 100644 --- a/src/pages/workspace/categories/CategoryFlagAmountsOverPage.tsx +++ b/src/pages/workspace/categories/CategoryFlagAmountsOverPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -25,7 +25,7 @@ import INPUT_IDS from '@src/types/form/WorkspaceCategoryFlagAmountsOverForm'; import type {PolicyCategoryExpenseLimitType} from '@src/types/onyx/PolicyCategory'; import ExpenseLimitTypeSelector from './ExpenseLimitTypeSelector/ExpenseLimitTypeSelector'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function CategoryFlagAmountsOverPage({ route: { diff --git a/src/pages/workspace/categories/CategoryGLCodePage.tsx b/src/pages/workspace/categories/CategoryGLCodePage.tsx index 131f17a14242..8e95eeae51d4 100644 --- a/src/pages/workspace/categories/CategoryGLCodePage.tsx +++ b/src/pages/workspace/categories/CategoryGLCodePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -11,6 +10,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -20,7 +20,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceCategoryForm'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function CategoryGLCodePage({route}: EditCategoryPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/categories/CategoryPayrollCodePage.tsx b/src/pages/workspace/categories/CategoryPayrollCodePage.tsx index df5ba802a566..43014547b6f5 100644 --- a/src/pages/workspace/categories/CategoryPayrollCodePage.tsx +++ b/src/pages/workspace/categories/CategoryPayrollCodePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -11,6 +10,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -20,7 +20,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceCategoryForm'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function CategoryPayrollCodePage({route}: EditCategoryPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/categories/CategoryRequireReceiptsOverPage.tsx b/src/pages/workspace/categories/CategoryRequireReceiptsOverPage.tsx index 7d526ede42b5..4c57a8b9ab2e 100644 --- a/src/pages/workspace/categories/CategoryRequireReceiptsOverPage.tsx +++ b/src/pages/workspace/categories/CategoryRequireReceiptsOverPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -11,6 +10,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -19,7 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type EditCategoryPageProps = StackScreenProps; +type EditCategoryPageProps = PlatformStackScreenProps; function getInitiallyFocusedOptionKey(isAlwaysSelected: boolean, isNeverSelected: boolean): ValueOf { if (isAlwaysSelected) { diff --git a/src/pages/workspace/categories/CategorySettingsPage.tsx b/src/pages/workspace/categories/CategorySettingsPage.tsx index 137d32fb0b78..b6726abceeae 100644 --- a/src/pages/workspace/categories/CategorySettingsPage.tsx +++ b/src/pages/workspace/categories/CategorySettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -21,6 +20,7 @@ import * as CategoryUtils from '@libs/CategoryUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import {isControlPolicy} from '@libs/PolicyUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -33,7 +33,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type CategorySettingsPageProps = StackScreenProps; +type CategorySettingsPageProps = PlatformStackScreenProps; function CategorySettingsPage({ route: { diff --git a/src/pages/workspace/categories/CreateCategoryPage.tsx b/src/pages/workspace/categories/CreateCategoryPage.tsx index 472cba1215af..0b431cef46b8 100644 --- a/src/pages/workspace/categories/CreateCategoryPage.tsx +++ b/src/pages/workspace/categories/CreateCategoryPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -8,6 +7,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -23,7 +23,7 @@ type WorkspaceCreateCategoryPageOnyxProps = { policyCategories: OnyxEntry; }; -type CreateCategoryPageProps = WorkspaceCreateCategoryPageOnyxProps & StackScreenProps; +type CreateCategoryPageProps = WorkspaceCreateCategoryPageOnyxProps & PlatformStackScreenProps; function CreateCategoryPage({route, policyCategories}: CreateCategoryPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/categories/EditCategoryPage.tsx b/src/pages/workspace/categories/EditCategoryPage.tsx index 224233fff318..4a7047ce82de 100644 --- a/src/pages/workspace/categories/EditCategoryPage.tsx +++ b/src/pages/workspace/categories/EditCategoryPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -8,6 +7,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Category from '@userActions/Policy/Category'; @@ -23,7 +23,7 @@ type WorkspaceEditCategoryPageOnyxProps = { policyCategories: OnyxEntry; }; -type EditCategoryPageProps = WorkspaceEditCategoryPageOnyxProps & StackScreenProps; +type EditCategoryPageProps = WorkspaceEditCategoryPageOnyxProps & PlatformStackScreenProps; function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/categories/ImportCategoriesPage.tsx b/src/pages/workspace/categories/ImportCategoriesPage.tsx index d0eecc54ab9c..cdb0cae964b1 100644 --- a/src/pages/workspace/categories/ImportCategoriesPage.tsx +++ b/src/pages/workspace/categories/ImportCategoriesPage.tsx @@ -1,14 +1,14 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import ImportSpreedsheet from '@components/ImportSpreadsheet'; import usePolicy from '@hooks/usePolicy'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ImportCategoriesPageProps = StackScreenProps; +type ImportCategoriesPageProps = PlatformStackScreenProps; function ImportCategoriesPage({route}: ImportCategoriesPageProps) { const policyID = route.params.policyID; diff --git a/src/pages/workspace/categories/ImportedCategoriesPage.tsx b/src/pages/workspace/categories/ImportedCategoriesPage.tsx index 041e2b77c91e..05db9a7ce0f6 100644 --- a/src/pages/workspace/categories/ImportedCategoriesPage.tsx +++ b/src/pages/workspace/categories/ImportedCategoriesPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import ConfirmModal from '@components/ConfirmModal'; @@ -12,6 +11,7 @@ import {closeImportPage} from '@libs/actions/ImportSpreadsheet'; import {importPolicyCategories} from '@libs/actions/Policy/Category'; import {findDuplicate, generateColumnNames} from '@libs/importSpreadsheetUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {isControlPolicy} from '@libs/PolicyUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -22,7 +22,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Errors} from '@src/types/onyx/OnyxCommon'; -type ImportedCategoriesPageProps = StackScreenProps; +type ImportedCategoriesPageProps = PlatformStackScreenProps; function ImportedCategoriesPage({route}: ImportedCategoriesPageProps) { const {translate} = useLocalize(); const [spreadsheet] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET); diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 1286d504d3ec..6afe13c388ff 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; @@ -36,6 +35,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -54,7 +54,7 @@ type PolicyOption = ListItem & { keyForList: string; }; -type WorkspaceCategoriesPageProps = StackScreenProps; +type WorkspaceCategoriesPageProps = PlatformStackScreenProps; function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx index 3df8598fde2d..4a7555f4a91f 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -13,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Policy from '@libs/actions/Policy/Policy'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -23,7 +23,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {getExportMenuItem} from './utils'; -type WorkspaceCompanyCardAccountSelectCardProps = StackScreenProps; +type WorkspaceCompanyCardAccountSelectCardProps = PlatformStackScreenProps; function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCardAccountSelectCardProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index df4e9635e851..d460daa15a05 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {format} from 'date-fns'; import React, {useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; @@ -20,6 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as Policy from '@libs/actions/Policy/Policy'; import * as CardUtils from '@libs/CardUtils'; import * as ErrorUtils from '@libs/ErrorUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -33,7 +33,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {getExportMenuItem} from './utils'; -type WorkspaceCompanyCardDetailsPageProps = StackScreenProps; +type WorkspaceCompanyCardDetailsPageProps = PlatformStackScreenProps; function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPageProps) { const {policyID, cardID, backTo, bank} = route.params; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx index c55d575838a8..d5baa5c9f711 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -11,6 +10,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Policy from '@libs/actions/Policy/Policy'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; @@ -22,7 +22,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/EditExpensifyCardNameForm'; -type WorkspaceCompanyCardEditCardNamePageProps = StackScreenProps; +type WorkspaceCompanyCardEditCardNamePageProps = PlatformStackScreenProps; function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditCardNamePageProps) { const {policyID, cardID, bank} = route.params; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx index 767f08068f95..8c1bc3fde81d 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -12,6 +11,7 @@ import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import Navigation from '@navigation/Navigation'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -46,7 +46,7 @@ const mockedData: CardFeeds = { }, }; -type WorkspaceCompanyCardFeedSelectorPageProps = StackScreenProps; +type WorkspaceCompanyCardFeedSelectorPageProps = PlatformStackScreenProps; function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedSelectorPageProps) { const {policyID} = route.params; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx index 25f1487381ab..8b5fb143cb53 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {ActivityIndicator} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -7,6 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -112,7 +112,7 @@ const mockedCards = { }, } as unknown as WorkspaceCardsList; -type WorkspaceCompanyCardPageProps = StackScreenProps; +type WorkspaceCompanyCardPageProps = PlatformStackScreenProps; function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx index bacc82331331..d8282816fe09 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Policy from '@libs/actions/Policy/Policy'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ValidationUtils from '@libs/ValidationUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -25,7 +25,7 @@ import type SCREENS from '@src/SCREENS'; import type {WorkspaceCompanyCardFeedName} from '@src/types/form/WorkspaceCompanyCardFeedName'; import INPUT_IDS from '@src/types/form/WorkspaceTaxCustomName'; -type WorkspaceCompanyCardsSettingsFeedNamePageProps = StackScreenProps; +type WorkspaceCompanyCardsSettingsFeedNamePageProps = PlatformStackScreenProps; function WorkspaceCompanyCardsSettingsFeedNamePage({ route: { diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx index 42f89c44ee8b..e79e605f9770 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Policy from '@libs/actions/Policy/Policy'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow'; @@ -23,7 +23,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceCompanyCardsSettingsPageProps = StackScreenProps; +type WorkspaceCompanyCardsSettingsPageProps = PlatformStackScreenProps; function WorkspaceCompanyCardsSettingsPage({ route: { diff --git a/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx b/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx index 7566f458fcff..58545d244ffc 100644 --- a/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx +++ b/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import AmountForm from '@components/AmountForm'; @@ -12,6 +11,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import {getOptimisticRateName, validateRateValue} from '@libs/PolicyDistanceRatesUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -24,7 +24,7 @@ import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/PolicyCreateDistanceRateForm'; import type {Rate} from '@src/types/onyx/Policy'; -type CreateDistanceRatePageProps = StackScreenProps; +type CreateDistanceRatePageProps = PlatformStackScreenProps; function CreateDistanceRatePage({route}: CreateDistanceRatePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx index 0b7d925f2ee2..10501a569449 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -17,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -27,7 +27,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Rate, TaxRateAttributes} from '@src/types/onyx/Policy'; -type PolicyDistanceRateDetailsPageProps = StackScreenProps; +type PolicyDistanceRateDetailsPageProps = PlatformStackScreenProps; function PolicyDistanceRateDetailsPage({route}: PolicyDistanceRateDetailsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx index 30ab4b40d958..df301ae9b1e1 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRateEditPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {Keyboard} from 'react-native'; import AmountForm from '@components/AmountForm'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import {validateRateValue} from '@libs/PolicyDistanceRatesUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -22,7 +22,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/PolicyDistanceRateEditForm'; -type PolicyDistanceRateEditPageProps = StackScreenProps; +type PolicyDistanceRateEditPageProps = PlatformStackScreenProps; function PolicyDistanceRateEditPage({route}: PolicyDistanceRateEditPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx index 9fe090222691..4e9d03008f17 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxRateEditPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -6,6 +5,7 @@ import TaxPicker from '@components/TaxPicker'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type * as OptionsListUtils from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -17,7 +17,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type PolicyDistanceRateTaxRateEditPageProps = WithPolicyOnyxProps & StackScreenProps; +type PolicyDistanceRateTaxRateEditPageProps = WithPolicyOnyxProps & PlatformStackScreenProps; function PolicyDistanceRateTaxRateEditPage({route, policy}: PolicyDistanceRateTaxRateEditPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxReclaimableEditPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxReclaimableEditPage.tsx index f20272dd2f5c..91495572cbe0 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRateTaxReclaimableEditPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRateTaxReclaimableEditPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import AmountForm from '@components/AmountForm'; import FormProvider from '@components/Form/FormProvider'; @@ -10,6 +9,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import {validateTaxClaimableValue} from '@libs/PolicyDistanceRatesUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -21,7 +21,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/PolicyDistanceRateTaxReclaimableOnEditForm'; -type PolicyDistanceRateTaxReclaimableEditPageProps = WithPolicyOnyxProps & StackScreenProps; +type PolicyDistanceRateTaxReclaimableEditPageProps = WithPolicyOnyxProps & + PlatformStackScreenProps; function PolicyDistanceRateTaxReclaimableEditPage({route, policy}: PolicyDistanceRateTaxReclaimableEditPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx index 661388a1657d..1dc03f328bce 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import Button from '@components/Button'; @@ -25,6 +24,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as DistanceRate from '@userActions/Policy/DistanceRate'; @@ -36,7 +36,7 @@ import type {CustomUnit, Rate} from '@src/types/onyx/Policy'; type RateForList = ListItem & {value: string}; -type PolicyDistanceRatesPageProps = StackScreenProps; +type PolicyDistanceRatesPageProps = PlatformStackScreenProps; function PolicyDistanceRatesPage({ route: { diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx index e7199e61c2dd..c9de7ab4ca6c 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -16,6 +15,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -30,7 +30,7 @@ import type {CustomUnit} from '@src/types/onyx/Policy'; import CategorySelector from './CategorySelector'; import UnitSelector from './UnitSelector'; -type PolicyDistanceRatesSettingsPageProps = StackScreenProps; +type PolicyDistanceRatesSettingsPageProps = PlatformStackScreenProps; function PolicyDistanceRatesSettingsPage({route}: PolicyDistanceRatesSettingsPageProps) { const policyID = route.params.policyID; diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx index b34397cc43e3..2458e5033ab2 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -11,6 +10,7 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {getLastFourDigits} from '@libs/BankAccountUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -20,7 +20,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceCardSettingsPageProps = StackScreenProps; +type WorkspaceCardSettingsPageProps = PlatformStackScreenProps; function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx index f1075d85cfd8..a1ca4ce22e10 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; @@ -19,6 +18,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import getClickedTargetLocation from '@libs/getClickedTargetLocation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {FullScreenNavigatorParamList} from '@navigation/types'; import variables from '@styles/variables'; @@ -40,7 +40,7 @@ type WorkspaceCardsListLabelProps = { }; function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelProps) { - const route = useRoute>(); + const route = useRoute>(); const policy = usePolicy(route.params.policyID); const styles = useThemeStyles(); const {windowWidth} = useWindowDimensions(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitPage.tsx index bb8515fe85d3..d2e96abd2fe0 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import AmountForm from '@components/AmountForm'; @@ -12,6 +11,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; @@ -26,7 +26,7 @@ import INPUT_IDS from '@src/types/form/EditExpensifyCardLimitForm'; type ConfirmationWarningTranslationPaths = 'workspace.expensifyCard.smartLimitWarning' | 'workspace.expensifyCard.monthlyLimitWarning' | 'workspace.expensifyCard.fixedLimitWarning'; -type WorkspaceEditCardLimitPageProps = StackScreenProps; +type WorkspaceEditCardLimitPageProps = PlatformStackScreenProps; function WorkspaceEditCardLimitPage({route}: WorkspaceEditCardLimitPageProps) { const {policyID, cardID} = route.params; diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx index 94a1382b4454..a75e7272b089 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; @@ -13,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -24,7 +24,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceEditCardLimitTypePageProps = StackScreenProps; +type WorkspaceEditCardLimitTypePageProps = PlatformStackScreenProps; function WorkspaceEditCardLimitTypePage({route}: WorkspaceEditCardLimitTypePageProps) { const {policyID, cardID} = route.params; diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx index c5eb8a53930a..74128fdd05ae 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -10,6 +9,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; @@ -22,7 +22,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/EditExpensifyCardNameForm'; -type WorkspaceEditCardNamePageProps = StackScreenProps; +type WorkspaceEditCardNamePageProps = PlatformStackScreenProps; function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) { const {policyID, cardID} = route.params; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index b8b8776df048..8d38219c6c79 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {getLastFourDigits} from '@libs/BankAccountUtils'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -24,7 +24,7 @@ import type SCREENS from '@src/SCREENS'; import type {BankName} from '@src/types/onyx/Bank'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type WorkspaceExpensifyCardBankAccountsProps = StackScreenProps; +type WorkspaceExpensifyCardBankAccountsProps = PlatformStackScreenProps; function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankAccountsProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index 03b489d93402..cd0b9ff21ce6 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -21,6 +20,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -33,7 +33,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceExpensifyCardDetailsPageProps = StackScreenProps; +type WorkspaceExpensifyCardDetailsPageProps = PlatformStackScreenProps; function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetailsPageProps) { const {policyID, cardID, backTo} = route.params; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index ef38cb509e78..cd36077f5ca2 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import type {ListRenderItemInfo} from 'react-native'; import {FlatList, View} from 'react-native'; @@ -16,6 +15,7 @@ import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {FullScreenNavigatorParamList} from '@navigation/types'; @@ -32,7 +32,7 @@ import WorkspaceCardListRow from './WorkspaceCardListRow'; type WorkspaceExpensifyCardListPageProps = { /** Route from navigation */ - route: RouteProp; + route: PlatformStackRouteProp; /** List of Expensify cards */ cardsList: OnyxEntry; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx index bc29918fe450..4fd741be7684 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx @@ -1,11 +1,11 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {ActivityIndicator} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -16,7 +16,7 @@ import type SCREENS from '@src/SCREENS'; import WorkspaceExpensifyCardListPage from './WorkspaceExpensifyCardListPage'; import WorkspaceExpensifyCardPageEmptyState from './WorkspaceExpensifyCardPageEmptyState'; -type WorkspaceExpensifyCardPageProps = StackScreenProps; +type WorkspaceExpensifyCardPageProps = PlatformStackScreenProps; function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) { const policyID = route.params.policyID ?? '-1'; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 7dc6293e23ea..95491a3196ca 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -12,6 +11,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import Navigation from '@navigation/Navigation'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; @@ -40,7 +40,7 @@ const expensifyCardFeatures: FeatureListItem[] = [ ]; type WorkspaceExpensifyCardPageEmptyStateProps = { - route: StackScreenProps['route']; + route: PlatformStackScreenProps['route']; } & WithPolicyAndFullscreenLoadingProps; function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensifyCardPageEmptyStateProps) { diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx index 369973485499..4d49a86a410a 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as AccountingUtils from '@libs/AccountingUtils'; import {getLastFourDigits} from '@libs/BankAccountUtils'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -27,7 +27,7 @@ import type SCREENS from '@src/SCREENS'; import type {BankName} from '@src/types/onyx/Bank'; import type {ConnectionName} from '@src/types/onyx/Policy'; -type WorkspaceSettlementAccountPageProps = StackScreenProps; +type WorkspaceSettlementAccountPageProps = PlatformStackScreenProps; function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx index 62db3af81da6..3ff957b75d46 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -9,17 +8,15 @@ import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as PolicyUtils from '@libs/PolicyUtils'; -import Navigation from '@navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; -import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceSettlementFrequencyPageProps = StackScreenProps; +type WorkspaceSettlementFrequencyPageProps = PlatformStackScreenProps; function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx index 3b777765c7b8..d3dad7e94fdc 100644 --- a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx @@ -1,6 +1,6 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; @@ -16,7 +16,7 @@ import ConfirmationStep from './ConfirmationStep'; import LimitStep from './LimitStep'; import LimitTypeStep from './LimitTypeStep'; -type IssueNewCardPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type IssueNewCardPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx index b269d93df098..02496ed9e228 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx @@ -1,9 +1,9 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; @@ -14,7 +14,7 @@ import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView'; import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView'; import WorkspaceInvoiceVBASection from './WorkspaceInvoiceVBASection'; -type WorkspaceInvoicesPageProps = StackScreenProps; +type WorkspaceInvoicesPageProps = PlatformStackScreenProps; function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); diff --git a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx index 80f323431baa..c7f4bd3b504a 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import CONST from '@src/CONST'; @@ -19,7 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceInvoicesCompanyNameForm'; -type WorkspaceInvoicingDetailsNameProps = StackScreenProps; +type WorkspaceInvoicingDetailsNameProps = PlatformStackScreenProps; function WorkspaceInvoicingDetailsName({route}: WorkspaceInvoicingDetailsNameProps) { const {policyID} = route.params; diff --git a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite.tsx b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite.tsx index 0427aef81db3..5c62cb8c4d9b 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React from 'react'; import {useOnyx} from 'react-native-onyx'; @@ -11,6 +10,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as Url from '@libs/Url'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; @@ -21,7 +21,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceInvoicesCompanyWebsiteForm'; -type WorkspaceInvoicingDetailsWebsiteProps = StackScreenProps; +type WorkspaceInvoicingDetailsWebsiteProps = PlatformStackScreenProps; function WorkspaceInvoicingDetailsWebsite({route}: WorkspaceInvoicingDetailsWebsiteProps) { const {policyID} = route.params; diff --git a/src/pages/workspace/members/ImportMembersPage.tsx b/src/pages/workspace/members/ImportMembersPage.tsx index 6fff3085b472..05c153356fee 100644 --- a/src/pages/workspace/members/ImportMembersPage.tsx +++ b/src/pages/workspace/members/ImportMembersPage.tsx @@ -1,11 +1,11 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import ImportSpreedsheet from '@components/ImportSpreadsheet'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ImportMembersPageProps = StackScreenProps; +type ImportMembersPageProps = PlatformStackScreenProps; function ImportMembersPage({route}: ImportMembersPageProps) { const policyID = route.params.policyID; diff --git a/src/pages/workspace/members/ImportedMembersPage.tsx b/src/pages/workspace/members/ImportedMembersPage.tsx index 468c64818dba..e0204e40f4fa 100644 --- a/src/pages/workspace/members/ImportedMembersPage.tsx +++ b/src/pages/workspace/members/ImportedMembersPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import ConfirmModal from '@components/ConfirmModal'; @@ -11,13 +10,14 @@ import {closeImportPage} from '@libs/actions/ImportSpreadsheet'; import {importPolicyMembers} from '@libs/actions/Policy/Member'; import {findDuplicate, generateColumnNames} from '@libs/importSpreadsheetUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ImportedMembersPageProps = StackScreenProps; +type ImportedMembersPageProps = PlatformStackScreenProps; function ImportedMembersPage({route}: ImportedMembersPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 52814f5da23d..cc3b63d084c3 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -24,6 +23,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import shouldRenderTransferOwnerButton from '@libs/shouldRenderTransferOwnerButton'; import Navigation from '@navigation/Navigation'; @@ -50,7 +50,7 @@ type WorkspacePolicyOnyxProps = { type WorkspaceMemberDetailsPageProps = Omit & WorkspacePolicyOnyxProps & - StackScreenProps; + PlatformStackScreenProps; function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceMemberDetailsPageProps) { const policyID = route.params.policyID; diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index 2c1bb1f66e2d..c93e84f96d61 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import ExpensifyCardImage from '@assets/images/expensify-card.svg'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; @@ -11,6 +10,7 @@ import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; @@ -49,7 +49,7 @@ const mockedData: CardFeeds = { }, }; -type WorkspaceMemberNewCardPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceMemberNewCardPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNewCardPageProps) { const {policyID} = route.params; diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeErrorPage.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeErrorPage.tsx index b24a2a53d0ef..82ec34fd152f 100644 --- a/src/pages/workspace/members/WorkspaceOwnerChangeErrorPage.tsx +++ b/src/pages/workspace/members/WorkspaceOwnerChangeErrorPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import Button from '@components/Button'; @@ -11,6 +10,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -19,7 +19,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceOwnerChangeSuccessPageProps = StackScreenProps; +type WorkspaceOwnerChangeSuccessPageProps = PlatformStackScreenProps; function WorkspaceOwnerChangeErrorPage({route}: WorkspaceOwnerChangeSuccessPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeSuccessPage.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeSuccessPage.tsx index f5c9dd398bf6..fc2f919370e2 100644 --- a/src/pages/workspace/members/WorkspaceOwnerChangeSuccessPage.tsx +++ b/src/pages/workspace/members/WorkspaceOwnerChangeSuccessPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import ConfirmationPage from '@components/ConfirmationPage'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,6 +5,7 @@ import LottieAnimations from '@components/LottieAnimations'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -14,7 +14,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceOwnerChangeSuccessPageProps = StackScreenProps; +type WorkspaceOwnerChangeSuccessPageProps = PlatformStackScreenProps; function WorkspaceOwnerChangeSuccessPage({route}: WorkspaceOwnerChangeSuccessPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx index 325e1112ab4b..caea1e4d4eba 100644 --- a/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx +++ b/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -8,6 +7,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import CardAuthenticationModal from '@pages/settings/Subscription/CardAuthenticationModal'; @@ -22,7 +22,7 @@ import type SCREENS from '@src/SCREENS'; import WorkspaceOwnerChangeCheck from './WorkspaceOwnerChangeCheck'; import WorkspaceOwnerPaymentCardForm from './WorkspaceOwnerPaymentCardForm'; -type WorkspaceOwnerChangeWrapperPageProps = WithPolicyOnyxProps & StackScreenProps; +type WorkspaceOwnerChangeWrapperPageProps = WithPolicyOnyxProps & PlatformStackScreenProps; function WorkspaceOwnerChangeWrapperPage({route, policy}: WorkspaceOwnerChangeWrapperPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/reportFields/CreateReportFieldsPage.tsx b/src/pages/workspace/reportFields/CreateReportFieldsPage.tsx index 8dbd90c9e929..f0b1319196c6 100644 --- a/src/pages/workspace/reportFields/CreateReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/CreateReportFieldsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import * as ReportField from '@libs/actions/Policy/ReportField'; import DateUtils from '@libs/DateUtils'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -30,7 +30,7 @@ import INPUT_IDS from '@src/types/form/WorkspaceReportFieldForm'; import InitialListValueSelector from './InitialListValueSelector'; import TypeSelector from './TypeSelector'; -type CreateReportFieldsPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type CreateReportFieldsPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; const defaultDate = DateUtils.extractDate(new Date().toString()); diff --git a/src/pages/workspace/reportFields/ReportFieldsAddListValuePage.tsx b/src/pages/workspace/reportFields/ReportFieldsAddListValuePage.tsx index f404a6fbae4f..dd483b466d63 100644 --- a/src/pages/workspace/reportFields/ReportFieldsAddListValuePage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsAddListValuePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import {Keyboard} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -13,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportField from '@libs/actions/Policy/ReportField'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as WorkspaceReportFieldUtils from '@libs/WorkspaceReportFieldUtils'; @@ -25,7 +25,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceReportFieldForm'; -type ReportFieldsAddListValuePageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ReportFieldsAddListValuePageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function ReportFieldsAddListValuePage({ policy, diff --git a/src/pages/workspace/reportFields/ReportFieldsEditValuePage.tsx b/src/pages/workspace/reportFields/ReportFieldsEditValuePage.tsx index bfc885000c98..5ce2461bab16 100644 --- a/src/pages/workspace/reportFields/ReportFieldsEditValuePage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsEditValuePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {Keyboard} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -13,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportField from '@libs/actions/Policy/ReportField'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as WorkspaceReportFieldUtils from '@libs/WorkspaceReportFieldUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -24,7 +24,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceReportFieldForm'; -type ReportFieldsEditValuePageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ReportFieldsEditValuePageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function ReportFieldsEditValuePage({ policy, diff --git a/src/pages/workspace/reportFields/ReportFieldsInitialValuePage.tsx b/src/pages/workspace/reportFields/ReportFieldsInitialValuePage.tsx index 74ed854a0495..13b1afb7e3d7 100644 --- a/src/pages/workspace/reportFields/ReportFieldsInitialValuePage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsInitialValuePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -13,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportField from '@libs/actions/Policy/ReportField'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -29,7 +29,8 @@ import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceReportFieldForm'; import ReportFieldsInitialListValuePicker from './InitialListValueSelector/ReportFieldsInitialListValuePicker'; -type ReportFieldsInitialValuePageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ReportFieldsInitialValuePageProps = WithPolicyAndFullscreenLoadingProps & + PlatformStackScreenProps; function ReportFieldsInitialValuePage({ policy, route: { diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index 3cc647b4d681..31057bf41f20 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -26,6 +25,7 @@ import * as ReportField from '@libs/actions/Policy/ReportField'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -49,7 +49,7 @@ type ValueListItem = ListItem & { orderWeight?: number; }; -type ReportFieldsListValuesPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ReportFieldsListValuesPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function ReportFieldsListValuesPage({ policy, diff --git a/src/pages/workspace/reportFields/ReportFieldsSettingsPage.tsx b/src/pages/workspace/reportFields/ReportFieldsSettingsPage.tsx index cc6460d20641..34e3da1e6453 100644 --- a/src/pages/workspace/reportFields/ReportFieldsSettingsPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useState} from 'react'; import {View} from 'react-native'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as WorkspaceReportFieldUtils from '@libs/WorkspaceReportFieldUtils'; @@ -25,7 +25,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ReportFieldsSettingsPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ReportFieldsSettingsPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function ReportFieldsSettingsPage({ policy, diff --git a/src/pages/workspace/reportFields/ReportFieldsValueSettingsPage.tsx b/src/pages/workspace/reportFields/ReportFieldsValueSettingsPage.tsx index 0886f2cd683c..08b94fcc4aee 100644 --- a/src/pages/workspace/reportFields/ReportFieldsValueSettingsPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsValueSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportField from '@libs/actions/Policy/ReportField'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -27,7 +27,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ReportFieldsValueSettingsPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ReportFieldsValueSettingsPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function ReportFieldsValueSettingsPage({ policy, diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx index 603e610b6f5d..ac5cc704a77a 100644 --- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; @@ -33,6 +32,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -51,7 +51,7 @@ type ReportFieldForList = ListItem & { orderWeight?: number; }; -type WorkspaceReportFieldsPageProps = StackScreenProps; +type WorkspaceReportFieldsPageProps = PlatformStackScreenProps; function WorkspaceReportFieldsPage({ route: { diff --git a/src/pages/workspace/rules/PolicyRulesPage.tsx b/src/pages/workspace/rules/PolicyRulesPage.tsx index 1fce2fb7bfcf..747a98660037 100644 --- a/src/pages/workspace/rules/PolicyRulesPage.tsx +++ b/src/pages/workspace/rules/PolicyRulesPage.tsx @@ -1,10 +1,10 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; @@ -14,7 +14,7 @@ import type SCREENS from '@src/SCREENS'; import ExpenseReportRulesSection from './ExpenseReportRulesSection'; import IndividualExpenseRulesSection from './IndividualExpenseRulesSection'; -type PolicyRulesPageProps = StackScreenProps; +type PolicyRulesPageProps = PlatformStackScreenProps; function PolicyRulesPage({route}: PolicyRulesPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/rules/RulesAutoApproveReportsUnderPage.tsx b/src/pages/workspace/rules/RulesAutoApproveReportsUnderPage.tsx index 679c8489cd29..c628a3ad135d 100644 --- a/src/pages/workspace/rules/RulesAutoApproveReportsUnderPage.tsx +++ b/src/pages/workspace/rules/RulesAutoApproveReportsUnderPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import AmountForm from '@components/AmountForm'; @@ -13,6 +12,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -22,7 +22,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesAutoApproveReportsUnderModalForm'; -type RulesAutoApproveReportsUnderPageProps = StackScreenProps; +type RulesAutoApproveReportsUnderPageProps = PlatformStackScreenProps; function RulesAutoApproveReportsUnderPage({route}: RulesAutoApproveReportsUnderPageProps) { const {policyID} = route.params; diff --git a/src/pages/workspace/rules/RulesAutoPayReportsUnderPage.tsx b/src/pages/workspace/rules/RulesAutoPayReportsUnderPage.tsx index b21ad1f4a1f3..8a63f2e303ec 100644 --- a/src/pages/workspace/rules/RulesAutoPayReportsUnderPage.tsx +++ b/src/pages/workspace/rules/RulesAutoPayReportsUnderPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import AmountForm from '@components/AmountForm'; @@ -14,6 +13,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as PolicyActions from '@userActions/Policy/Policy'; @@ -22,7 +22,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesAutoPayReportsUnderModalForm'; -type RulesAutoPayReportsUnderPageProps = StackScreenProps; +type RulesAutoPayReportsUnderPageProps = PlatformStackScreenProps; function RulesAutoPayReportsUnderPage({route}: RulesAutoPayReportsUnderPageProps) { const policyID = route?.params?.policyID ?? '-1'; diff --git a/src/pages/workspace/rules/RulesBillableDefaultPage.tsx b/src/pages/workspace/rules/RulesBillableDefaultPage.tsx index 900007f9a573..2b9d42ed748c 100644 --- a/src/pages/workspace/rules/RulesBillableDefaultPage.tsx +++ b/src/pages/workspace/rules/RulesBillableDefaultPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -10,6 +9,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Policy from '@userActions/Policy/Policy'; @@ -17,7 +17,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type RulesBillableDefaultPageProps = StackScreenProps; +type RulesBillableDefaultPageProps = PlatformStackScreenProps; function RulesBillableDefaultPage({ route: { diff --git a/src/pages/workspace/rules/RulesCustomNamePage.tsx b/src/pages/workspace/rules/RulesCustomNamePage.tsx index 4be433651a78..394960ef80fb 100644 --- a/src/pages/workspace/rules/RulesCustomNamePage.tsx +++ b/src/pages/workspace/rules/RulesCustomNamePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import BulletList from '@components/BulletList'; @@ -15,6 +14,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as PolicyActions from '@userActions/Policy/Policy'; @@ -23,7 +23,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesCustomNameModalForm'; -type RulesCustomNamePageProps = StackScreenProps; +type RulesCustomNamePageProps = PlatformStackScreenProps; function RulesCustomNamePage({route}: RulesCustomNamePageProps) { const policyID = route?.params?.policyID ?? '-1'; diff --git a/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx b/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx index 2424a14c08f5..345bf96d94a6 100644 --- a/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx +++ b/src/pages/workspace/rules/RulesMaxExpenseAgePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as PolicyActions from '@userActions/Policy/Policy'; @@ -20,7 +20,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesMaxExpenseAgeForm'; -type RulesMaxExpenseAgePageProps = StackScreenProps; +type RulesMaxExpenseAgePageProps = PlatformStackScreenProps; function RulesMaxExpenseAgePage({ route: { diff --git a/src/pages/workspace/rules/RulesMaxExpenseAmountPage.tsx b/src/pages/workspace/rules/RulesMaxExpenseAmountPage.tsx index 79ae647ae224..3d59833db9d8 100644 --- a/src/pages/workspace/rules/RulesMaxExpenseAmountPage.tsx +++ b/src/pages/workspace/rules/RulesMaxExpenseAmountPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import AmountForm from '@components/AmountForm'; @@ -13,6 +12,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as PolicyActions from '@userActions/Policy/Policy'; @@ -21,7 +21,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesMaxExpenseAmountForm'; -type RulesMaxExpenseAmountPageProps = StackScreenProps; +type RulesMaxExpenseAmountPageProps = PlatformStackScreenProps; function RulesMaxExpenseAmountPage({ route: { diff --git a/src/pages/workspace/rules/RulesRandomReportAuditPage.tsx b/src/pages/workspace/rules/RulesRandomReportAuditPage.tsx index dcc9a58e65e9..19e9d79ba8e6 100644 --- a/src/pages/workspace/rules/RulesRandomReportAuditPage.tsx +++ b/src/pages/workspace/rules/RulesRandomReportAuditPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -21,7 +21,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesRandomReportAuditModalForm'; -type RulesRandomReportAuditPageProps = StackScreenProps; +type RulesRandomReportAuditPageProps = PlatformStackScreenProps; function RulesRandomReportAuditPage({route}: RulesRandomReportAuditPageProps) { const policyID = route?.params?.policyID ?? '-1'; diff --git a/src/pages/workspace/rules/RulesReceiptRequiredAmountPage.tsx b/src/pages/workspace/rules/RulesReceiptRequiredAmountPage.tsx index 96e6be6eeb95..27df41c4c371 100644 --- a/src/pages/workspace/rules/RulesReceiptRequiredAmountPage.tsx +++ b/src/pages/workspace/rules/RulesReceiptRequiredAmountPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import AmountForm from '@components/AmountForm'; @@ -13,6 +12,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as PolicyActions from '@userActions/Policy/Policy'; @@ -21,7 +21,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RulesRequiredReceiptAmountForm'; -type RulesReceiptRequiredAmountPageProps = StackScreenProps; +type RulesReceiptRequiredAmountPageProps = PlatformStackScreenProps; function RulesReceiptRequiredAmountPage({ route: { diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx index c8cef174dbdb..d79225ce665c 100644 --- a/src/pages/workspace/tags/EditTagPage.tsx +++ b/src/pages/workspace/tags/EditTagPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {Keyboard} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -13,6 +12,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -29,7 +29,7 @@ type EditTagPageOnyxProps = { policyTags: OnyxEntry; }; -type EditTagPageProps = EditTagPageOnyxProps & StackScreenProps; +type EditTagPageProps = EditTagPageOnyxProps & PlatformStackScreenProps; function EditTagPage({route, policyTags}: EditTagPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/tags/ImportTagsPage.tsx b/src/pages/workspace/tags/ImportTagsPage.tsx index 0dd7c01f0af3..9f7e1af0a9e5 100644 --- a/src/pages/workspace/tags/ImportTagsPage.tsx +++ b/src/pages/workspace/tags/ImportTagsPage.tsx @@ -1,11 +1,11 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import ImportSpreedsheet from '@components/ImportSpreadsheet'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type ImportTagsPageProps = StackScreenProps; +type ImportTagsPageProps = PlatformStackScreenProps; function ImportTagsPage({route}: ImportTagsPageProps) { const policyID = route.params.policyID; diff --git a/src/pages/workspace/tags/ImportedTagsPage.tsx b/src/pages/workspace/tags/ImportedTagsPage.tsx index b2e95edc43a4..dd68f8f7e5f9 100644 --- a/src/pages/workspace/tags/ImportedTagsPage.tsx +++ b/src/pages/workspace/tags/ImportedTagsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import ConfirmModal from '@components/ConfirmModal'; @@ -12,6 +11,7 @@ import {closeImportPage} from '@libs/actions/ImportSpreadsheet'; import {importPolicyTags} from '@libs/actions/Policy/Tag'; import {findDuplicate, generateColumnNames} from '@libs/importSpreadsheetUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import {isControlPolicy} from '@libs/PolicyUtils'; @@ -21,7 +21,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Errors} from '@src/types/onyx/OnyxCommon'; -type ImportedTagsPageProps = StackScreenProps; +type ImportedTagsPageProps = PlatformStackScreenProps; function ImportedTagsPage({route}: ImportedTagsPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/workspace/tags/TagApproverPage.tsx b/src/pages/workspace/tags/TagApproverPage.tsx index 874754b2cf4b..b6ea97c4d1be 100644 --- a/src/pages/workspace/tags/TagApproverPage.tsx +++ b/src/pages/workspace/tags/TagApproverPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -6,6 +5,7 @@ import WorkspaceMembersSelectionList from '@components/WorkspaceMembersSelection import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -13,7 +13,7 @@ import * as Tag from '@userActions/Policy/Tag'; import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; -type TagApproverPageProps = StackScreenProps; +type TagApproverPageProps = PlatformStackScreenProps; function TagApproverPage({route}: TagApproverPageProps) { const {policyID, tagName} = route.params; diff --git a/src/pages/workspace/tags/TagGLCodePage.tsx b/src/pages/workspace/tags/TagGLCodePage.tsx index 8360108be362..3bd20f7dbc69 100644 --- a/src/pages/workspace/tags/TagGLCodePage.tsx +++ b/src/pages/workspace/tags/TagGLCodePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -22,7 +22,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceTagForm'; -type EditTagGLCodePageProps = StackScreenProps; +type EditTagGLCodePageProps = PlatformStackScreenProps; function TagGLCodePage({route}: EditTagGLCodePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/tags/TagSettingsPage.tsx b/src/pages/workspace/tags/TagSettingsPage.tsx index aedd7e36a274..68d833441438 100644 --- a/src/pages/workspace/tags/TagSettingsPage.tsx +++ b/src/pages/workspace/tags/TagSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -18,6 +17,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -29,7 +29,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type TagSettingsPageProps = StackScreenProps; +type TagSettingsPageProps = PlatformStackScreenProps; function TagSettingsPage({route, navigation}: TagSettingsPageProps) { const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`); diff --git a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx index cde6a55c5258..b3c9ac10cf2c 100644 --- a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx +++ b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {Keyboard} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -30,7 +30,7 @@ type WorkspaceCreateTagPageOnyxProps = { policyTags: OnyxEntry; }; -type CreateTagPageProps = WorkspaceCreateTagPageOnyxProps & StackScreenProps; +type CreateTagPageProps = WorkspaceCreateTagPageOnyxProps & PlatformStackScreenProps; function CreateTagPage({route, policyTags}: CreateTagPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx b/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx index d63799169ca8..019f840f9ab5 100644 --- a/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -14,6 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Tag from '@libs/actions/Policy/Tag'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -28,7 +28,7 @@ type WorkspaceEditTagsPageOnyxProps = { policyTags: OnyxEntry; }; -type WorkspaceEditTagsPageProps = WorkspaceEditTagsPageOnyxProps & StackScreenProps; +type WorkspaceEditTagsPageProps = WorkspaceEditTagsPageOnyxProps & PlatformStackScreenProps; function WorkspaceEditTagsPage({route, policyTags}: WorkspaceEditTagsPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index a30b56d6dda4..3cb3219e2d6b 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; @@ -35,6 +34,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -48,7 +48,7 @@ import type {PendingAction} from '@src/types/onyx/OnyxCommon'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type {PolicyTag, PolicyTagList, TagListItem} from './types'; -type WorkspaceTagsPageProps = StackScreenProps; +type WorkspaceTagsPageProps = PlatformStackScreenProps; function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx index b5b527dc4dfa..5d99c2f0b375 100644 --- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -16,6 +15,7 @@ import usePermissions from '@hooks/usePermissions'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Tag from '@libs/actions/Policy/Tag'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -31,7 +31,7 @@ type WorkspaceTagsSettingsPageOnyxProps = { /** Collection of tags attached to a policy */ policyTags: OnyxEntry; }; -type WorkspaceTagsSettingsPageProps = WorkspaceTagsSettingsPageOnyxProps & StackScreenProps; +type WorkspaceTagsSettingsPageProps = WorkspaceTagsSettingsPageOnyxProps & PlatformStackScreenProps; /** * The pending state might be set by either setPolicyBillableMode or disableWorkspaceBillableExpenses. diff --git a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx index a01707a04740..77599165674c 100644 --- a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx @@ -1,5 +1,4 @@ import {useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -27,6 +26,7 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -40,7 +40,7 @@ import type SCREENS from '@src/SCREENS'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type {TagListItem} from './types'; -type WorkspaceViewTagsProps = StackScreenProps; +type WorkspaceViewTagsProps = PlatformStackScreenProps; function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); diff --git a/src/pages/workspace/taxes/NamePage.tsx b/src/pages/workspace/taxes/NamePage.tsx index 0fb495a04574..cc3a22fa4ef9 100644 --- a/src/pages/workspace/taxes/NamePage.tsx +++ b/src/pages/workspace/taxes/NamePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {renamePolicyTax, validateTaxName} from '@libs/actions/TaxRate'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import Parser from '@libs/Parser'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -25,7 +25,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceTaxNameForm'; -type NamePageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type NamePageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function NamePage({ route: { diff --git a/src/pages/workspace/taxes/ValuePage.tsx b/src/pages/workspace/taxes/ValuePage.tsx index 5b724d625e5b..1da36229a7be 100644 --- a/src/pages/workspace/taxes/ValuePage.tsx +++ b/src/pages/workspace/taxes/ValuePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import AmountForm from '@components/AmountForm'; import FormProvider from '@components/Form/FormProvider'; @@ -12,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {updatePolicyTaxValue, validateTaxValue} from '@libs/actions/TaxRate'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -24,7 +24,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceTaxValueForm'; -type ValuePageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type ValuePageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function ValuePage({ route: { diff --git a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx index 4a31f7d16b1e..4dddcb42265d 100644 --- a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {createPolicyTax, getNextTaxCode, getTaxValueWithPercentage, validateTaxName, validateTaxValue} from '@libs/actions/TaxRate'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -26,7 +26,7 @@ import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceNewTaxForm'; import type {TaxRate} from '@src/types/onyx'; -type WorkspaceCreateTaxPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceCreateTaxPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function WorkspaceCreateTaxPage({ policy, diff --git a/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx b/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx index 0f50ed8fe0b8..7c4eb45bb9a0 100644 --- a/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import ConfirmModal from '@components/ConfirmModal'; @@ -15,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {clearTaxRateFieldError, deletePolicyTaxes, setPolicyTaxesEnabled} from '@libs/actions/TaxRate'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -25,7 +25,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceEditTaxPageBaseProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceEditTaxPageBaseProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function WorkspaceEditTaxPage({ route: { diff --git a/src/pages/workspace/taxes/WorkspaceTaxCodePage.tsx b/src/pages/workspace/taxes/WorkspaceTaxCodePage.tsx index e9005a8a58f2..05536a4257e4 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxCodePage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxCodePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -13,6 +12,7 @@ import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import {setPolicyTaxCode, validateTaxCode} from '@libs/actions/TaxRate'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import CONST from '@src/CONST'; @@ -21,7 +21,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceTaxCodeForm'; -type WorkspaceTaxCodePageProps = StackScreenProps; +type WorkspaceTaxCodePageProps = PlatformStackScreenProps; function WorkspaceTaxCodePage({route}: WorkspaceTaxCodePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index db180bddb532..0c616c07fddd 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import Button from '@components/Button'; @@ -28,6 +27,7 @@ import {clearTaxRateError, deletePolicyTaxes, setPolicyTaxesEnabled} from '@libs import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {FullScreenNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -39,7 +39,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {TaxRate} from '@src/types/onyx'; -type WorkspaceTaxesPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceTaxesPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function WorkspaceTaxesPage({ policy, diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx index f24a388011ab..88edc1f25797 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; @@ -11,6 +10,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as ValidationUtils from '@libs/ValidationUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -24,7 +24,8 @@ import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceTaxCustomName'; import type {WorkspaceTaxCustomName} from '@src/types/form/WorkspaceTaxCustomName'; -type WorkspaceTaxesSettingsCustomTaxNameProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceTaxesSettingsCustomTaxNameProps = WithPolicyAndFullscreenLoadingProps & + PlatformStackScreenProps; function WorkspaceTaxesSettingsCustomTaxName({ route: { diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx index 2e40667c1daf..c481b5f5adee 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -7,6 +6,7 @@ import TaxPicker from '@components/TaxPicker'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import type * as OptionsListUtils from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; @@ -19,7 +19,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; type WorkspaceTaxesSettingsForeignCurrencyProps = WithPolicyAndFullscreenLoadingProps & - StackScreenProps; + PlatformStackScreenProps; function WorkspaceTaxesSettingsForeignCurrency({ route: { params: {policyID}, diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx index bfd688facc5f..4de7c320cd2f 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -9,6 +8,7 @@ import ScrollView from '@components/ScrollView'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; @@ -17,7 +17,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type WorkspaceTaxesSettingsPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceTaxesSettingsPageProps = WithPolicyAndFullscreenLoadingProps & PlatformStackScreenProps; function WorkspaceTaxesSettingsPage({ route: { diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx index c46efe3fd243..81b81b7cba4c 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -7,6 +6,7 @@ import TaxPicker from '@components/TaxPicker'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import type * as OptionsListUtils from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; @@ -19,7 +19,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; type WorkspaceTaxesSettingsWorkspaceCurrencyProps = WithPolicyAndFullscreenLoadingProps & - StackScreenProps; + PlatformStackScreenProps; function WorkspaceTaxesSettingsWorkspaceCurrency({ route: { diff --git a/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx b/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx index a8c9705663d4..0522aa59162f 100644 --- a/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx +++ b/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx @@ -1,5 +1,4 @@ import {useNavigation} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -8,6 +7,7 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -18,7 +18,7 @@ import type SCREENS from '@src/SCREENS'; import UpgradeConfirmation from './UpgradeConfirmation'; import UpgradeIntro from './UpgradeIntro'; -type WorkspaceUpgradePageProps = StackScreenProps; +type WorkspaceUpgradePageProps = PlatformStackScreenProps; function WorkspaceUpgradePage({route}: WorkspaceUpgradePageProps) { const navigation = useNavigation(); diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx index e1fdd2b29687..ab2938a463ab 100644 --- a/src/pages/workspace/withPolicy.tsx +++ b/src/pages/workspace/withPolicy.tsx @@ -1,8 +1,8 @@ -import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, BottomTabNavigatorParamList, FullScreenNavigatorParamList, ReimbursementAccountNavigatorParamList, SettingsNavigatorParamList} from '@navigation/types'; import * as Policy from '@userActions/Policy/Policy'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -12,7 +12,7 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; type NavigatorsParamList = BottomTabNavigatorParamList & AuthScreensParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList & FullScreenNavigatorParamList; -type PolicyRoute = RouteProp< +type PolicyRoute = PlatformStackRouteProp< NavigatorsParamList, | typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT | typeof SCREENS.WORKSPACE.INITIAL diff --git a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx index d026c218910f..c3448c2f7c95 100644 --- a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import type {ValueOf} from 'type-fest'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -13,6 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as Localize from '@libs/Localize'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -27,7 +27,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; type AutoReportingFrequencyKey = Exclude, 'instant'>; type Locale = ValueOf; -type WorkspaceAutoReportingFrequencyPageProps = WithPolicyOnyxProps & StackScreenProps; +type WorkspaceAutoReportingFrequencyPageProps = WithPolicyOnyxProps & PlatformStackScreenProps; type WorkspaceAutoReportingFrequencyPageItem = { text: string; diff --git a/src/pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage.tsx b/src/pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage.tsx index a9f96061ec0a..8336700a7d79 100644 --- a/src/pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; import type {ValueOf} from 'type-fest'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -8,6 +7,7 @@ import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; @@ -21,7 +21,8 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; const DAYS_OF_MONTH = 28; -type WorkspaceAutoReportingMonthlyOffsetProps = WithPolicyOnyxProps & StackScreenProps; +type WorkspaceAutoReportingMonthlyOffsetProps = WithPolicyOnyxProps & + PlatformStackScreenProps; type AutoReportingOffsetKeys = ValueOf; diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 17bad8a1a102..76fd4370cbc7 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -1,5 +1,4 @@ import {useFocusEffect} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -21,6 +20,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import {getPaymentMethodDescription} from '@libs/PaymentUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -42,7 +42,7 @@ import type {ToggleSettingOptionRowProps} from './ToggleSettingsOptionRow'; import {getAutoReportingFrequencyDisplayNames} from './WorkspaceAutoReportingFrequencyPage'; import type {AutoReportingFrequencyKey} from './WorkspaceAutoReportingFrequencyPage'; -type WorkspaceWorkflowsPageProps = WithPolicyProps & StackScreenProps; +type WorkspaceWorkflowsPageProps = WithPolicyProps & PlatformStackScreenProps; function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) { const {translate, preferredLocale} = useLocalize(); diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx index 0931492614cc..4b1666968b3b 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -15,6 +14,7 @@ import useNetwork from '@hooks/useNetwork'; import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -35,7 +35,7 @@ type WorkspaceWorkflowsPayerPageOnyxProps = { type WorkspaceWorkflowsPayerPageProps = WorkspaceWorkflowsPayerPageOnyxProps & WithPolicyAndFullscreenLoadingProps & - StackScreenProps; + PlatformStackScreenProps; type MemberOption = Omit & {accountID: number}; type MembersSection = SectionListData>; diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx index 94a56f8fe162..8b164aeba98c 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -19,6 +18,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -35,7 +35,7 @@ import type {Icon} from '@src/types/onyx/OnyxCommon'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; type WorkspaceWorkflowsApprovalsApproverPageProps = WithPolicyAndFullscreenLoadingProps & - StackScreenProps; + PlatformStackScreenProps; type SelectionListApprover = { text: string; diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx index 4998bf09a333..17fadf188e67 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useRef} from 'react'; // eslint-disable-next-line no-restricted-imports import type {ScrollView} from 'react-native'; @@ -13,6 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; @@ -24,7 +24,8 @@ import type SCREENS from '@src/SCREENS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import ApprovalWorkflowEditor from './ApprovalWorkflowEditor'; -type WorkspaceWorkflowsApprovalsCreatePageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceWorkflowsApprovalsCreatePageProps = WithPolicyAndFullscreenLoadingProps & + PlatformStackScreenProps; function WorkspaceWorkflowsApprovalsCreatePage({policy, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsCreatePageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx index c2da4e39739a..cf8337f16b8e 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; // eslint-disable-next-line no-restricted-imports import type {ScrollView} from 'react-native'; @@ -13,6 +12,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import {convertPolicyEmployeesToApprovalWorkflows} from '@libs/WorkflowUtils'; @@ -27,7 +27,8 @@ import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import ApprovalWorkflowEditor from './ApprovalWorkflowEditor'; -type WorkspaceWorkflowsApprovalsEditPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; +type WorkspaceWorkflowsApprovalsEditPageProps = WithPolicyAndFullscreenLoadingProps & + PlatformStackScreenProps; function WorkspaceWorkflowsApprovalsEditPage({policy, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsEditPageProps) { const styles = useThemeStyles(); diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx index 697714d55746..8f7553e97fe1 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -19,6 +18,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -48,7 +48,7 @@ type SelectionListMember = { type MembersSection = SectionListData>; type WorkspaceWorkflowsApprovalsExpensesFromPageProps = WithPolicyAndFullscreenLoadingProps & - StackScreenProps; + PlatformStackScreenProps; function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsExpensesFromPageProps) { const styles = useThemeStyles(); diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 95ac9729e606..8733ad4cd095 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -1,4 +1,3 @@ -import type {StackNavigationProp, StackScreenProps} from '@react-navigation/stack'; import {screen} from '@testing-library/react-native'; import type {ComponentType} from 'react'; import React from 'react'; @@ -9,6 +8,7 @@ import type Animated from 'react-native-reanimated'; import {measurePerformance} from 'reassure'; import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; import type Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackNavigationProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import ComposeProviders from '@src/components/ComposeProviders'; import DragAndDropProvider from '@src/components/DragAndDrop/Provider'; @@ -34,7 +34,7 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; -type ReportScreenWrapperProps = StackScreenProps; +type ReportScreenWrapperProps = PlatformStackScreenProps; jest.mock('@src/libs/API', () => ({ write: jest.fn(), @@ -209,7 +209,7 @@ test('[ReportScreen] should render ReportScreen', async () => { await screen.findByTestId(`report-screen-${report.reportID}`); }; - const navigation = {addListener} as unknown as StackNavigationProp; + const navigation = {addListener} as unknown as PlatformStackNavigationProp; await waitForBatchedUpdates(); const reportCollectionDataSet: ReportCollectionDataSet = { @@ -243,7 +243,7 @@ test('[ReportScreen] should render composer', async () => { await screen.findByTestId('composer'); }; - const navigation = {addListener} as unknown as StackNavigationProp; + const navigation = {addListener} as unknown as PlatformStackNavigationProp; await waitForBatchedUpdates(); @@ -278,7 +278,7 @@ test('[ReportScreen] should render report list', async () => { await screen.findByTestId('report-actions-list'); }; - const navigation = {addListener} as unknown as StackNavigationProp; + const navigation = {addListener} as unknown as PlatformStackNavigationProp; await waitForBatchedUpdates(); diff --git a/tests/unit/NextStepUtilsTest.ts b/tests/unit/NextStepUtilsTest.ts index 776c5f95cce7..13d4e85940dc 100644 --- a/tests/unit/NextStepUtilsTest.ts +++ b/tests/unit/NextStepUtilsTest.ts @@ -627,6 +627,10 @@ describe('libs/NextStepUtils', () => { text: ' %expenses.', }, ]; + // mock the report as approved + const originalState = {stateNum: report.stateNum, statusNum: report.statusNum}; + report.stateNum = CONST.REPORT.STATE_NUM.APPROVED; + report.statusNum = CONST.REPORT.STATUS_NUM.APPROVED; return Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, { achAccount: { From cf17480d96bd1267fbf89405a3b1acf921100a95 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 13:00:33 +0200 Subject: [PATCH 004/381] fix: match previous behavior and close keyboard in chat navigator when we swipe the screen --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 94846c04e334..d33a89bfa0af 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -30,6 +30,7 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as ReportUtils from '@libs/ReportUtils'; import {buildSearchQueryString} from '@libs/SearchUtils'; import * as SessionUtils from '@libs/SessionUtils'; +import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; @@ -392,6 +393,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie }, []); const CentralPaneScreenOptions = { + ...hideKeyboardOnSwipe, headerShown: false, title: 'New Expensify', From 2f4363cca1385ea91e85a5a657468b278dede77f Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 13:16:07 +0200 Subject: [PATCH 005/381] fix: prettier --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 2 +- .../AppNavigator/Navigators/ExplanationModalNavigator.tsx | 2 +- .../AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx | 2 +- src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx | 2 +- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 2 +- .../workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx | 2 +- .../workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx | 2 +- .../workspace/invoices/WorkspaceInvoicingDetailsName.tsx | 2 +- .../approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx | 2 +- tests/unit/NextStepUtilsTest.ts | 4 ---- 10 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index d33a89bfa0af..a19869e073fa 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -19,6 +19,7 @@ import {READ_COMMANDS} from '@libs/API/types'; import HttpUtils from '@libs/HttpUtils'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Log from '@libs/Log'; +import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import getCurrentUrl from '@libs/Navigation/currentUrl'; import Navigation from '@libs/Navigation/Navigation'; import shouldOpenOnAdminRoom from '@libs/Navigation/shouldOpenOnAdminRoom'; @@ -30,7 +31,6 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as ReportUtils from '@libs/ReportUtils'; import {buildSearchQueryString} from '@libs/SearchUtils'; import * as SessionUtils from '@libs/SessionUtils'; -import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; diff --git a/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx index b4626072538f..507abedf7102 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx @@ -3,9 +3,9 @@ import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import ExplanationModal from '@components/ExplanationModal'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; +import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; import type {ExplanationModalNavigatorParamList} from '@libs/Navigation/types'; import SCREENS from '@src/SCREENS'; -import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; const Stack = createPlatformStackNavigator(); diff --git a/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx index 3cc563582709..b5bf352c75f9 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx @@ -2,10 +2,10 @@ import React from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; +import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; import type {FeatureTrainingNavigatorParamList} from '@libs/Navigation/types'; import TrackTrainingPage from '@pages/TrackTrainingPage'; import SCREENS from '@src/SCREENS'; -import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; const Stack = createPlatformStackNavigator(); diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx index 47177d60b743..2850ed0538db 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx @@ -242,4 +242,4 @@ export default withOnyx, Su key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, selector: EmojiUtils.getPreferredSkinToneIndex, }, -})(forwardRef(SuggestionEmoji)); \ No newline at end of file +})(forwardRef(SuggestionEmoji)); diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 24bdb8f49960..2d9893ab9090 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -6,6 +6,7 @@ import {useOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import getComponentDisplayName from '@libs/getComponentDisplayName'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FlagCommentNavigatorParamList, SplitDetailsNavigatorParamList} from '@libs/Navigation/types'; import * as ReportUtils from '@libs/ReportUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; @@ -14,7 +15,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; type WithReportAndReportActionOrNotFoundProps = PlatformStackScreenProps< FlagCommentNavigatorParamList & SplitDetailsNavigatorParamList, diff --git a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx index a39a9aeb4206..d0cf8bb5dad9 100644 --- a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx +++ b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx @@ -12,11 +12,11 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as QuickbooksDesktop from '@libs/actions/connections/QuickbooksDesktop'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import LoadingPage from '@pages/LoadingPage'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; type RequireQuickBooksDesktopModalProps = PlatformStackScreenProps; diff --git a/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx b/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx index b7f06b12f28d..b210148adbee 100644 --- a/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx +++ b/src/pages/workspace/accounting/qbd/RequireQuickBooksDesktopPage.tsx @@ -10,10 +10,10 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; type RequireQuickBooksDesktopModalProps = PlatformStackScreenProps; diff --git a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx index c7f4bd3b504a..63dd9bfce0ab 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicingDetailsName.tsx @@ -9,9 +9,9 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import CONST from '@src/CONST'; diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx index 17fadf188e67..16aff537b901 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx @@ -10,9 +10,9 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; diff --git a/tests/unit/NextStepUtilsTest.ts b/tests/unit/NextStepUtilsTest.ts index 13d4e85940dc..368295b580ca 100644 --- a/tests/unit/NextStepUtilsTest.ts +++ b/tests/unit/NextStepUtilsTest.ts @@ -592,10 +592,6 @@ describe('libs/NextStepUtils', () => { text: ' a business bank account.', }, ]; - // mock the report as approved - const originalState = {stateNum: report.stateNum, statusNum: report.statusNum}; - report.stateNum = CONST.REPORT.STATE_NUM.APPROVED; - report.statusNum = CONST.REPORT.STATUS_NUM.APPROVED; const result = NextStepUtils.buildNextStep(report, CONST.REPORT.STATUS_NUM.APPROVED); From 2d2627a72e72af14644497b585db466874ba476b Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 13:40:07 +0200 Subject: [PATCH 006/381] fix: partially fix CI checks --- src/pages/OnboardingAccounting/types.ts | 4 ++-- .../home/report/withReportAndReportActionOrNotFound.tsx | 2 +- .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx | 3 +++ tests/unit/NextStepUtilsTest.ts | 8 ++++---- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/OnboardingAccounting/types.ts b/src/pages/OnboardingAccounting/types.ts index 4f7a3ebc3439..fb9e1e1caac4 100644 --- a/src/pages/OnboardingAccounting/types.ts +++ b/src/pages/OnboardingAccounting/types.ts @@ -1,8 +1,8 @@ -import type {StackScreenProps} from '@react-navigation/stack'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; import type SCREENS from '@src/SCREENS'; -type OnboardingAccountingProps = StackScreenProps; +type OnboardingAccountingProps = PlatformStackScreenProps; type BaseOnboardingAccountingProps = OnboardingAccountingProps & { /* Whether to use native styles tailored for native devices */ diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 2d9893ab9090..5d5f025ddbcc 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -35,7 +35,7 @@ type WithReportAndReportActionOrNotFoundProps = PlatformStackScreenProps< export default function ( WrappedComponent: ComponentType>, -): ComponentType, keyof OnyxProps>> { +): ComponentType> { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`); diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx index 3ff957b75d46..52fa4c8890d0 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx @@ -9,7 +9,10 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import * as PolicyUtils from '@libs/PolicyUtils'; +import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; +import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/tests/unit/NextStepUtilsTest.ts b/tests/unit/NextStepUtilsTest.ts index 368295b580ca..776c5f95cce7 100644 --- a/tests/unit/NextStepUtilsTest.ts +++ b/tests/unit/NextStepUtilsTest.ts @@ -592,6 +592,10 @@ describe('libs/NextStepUtils', () => { text: ' a business bank account.', }, ]; + // mock the report as approved + const originalState = {stateNum: report.stateNum, statusNum: report.statusNum}; + report.stateNum = CONST.REPORT.STATE_NUM.APPROVED; + report.statusNum = CONST.REPORT.STATUS_NUM.APPROVED; const result = NextStepUtils.buildNextStep(report, CONST.REPORT.STATUS_NUM.APPROVED); @@ -623,10 +627,6 @@ describe('libs/NextStepUtils', () => { text: ' %expenses.', }, ]; - // mock the report as approved - const originalState = {stateNum: report.stateNum, statusNum: report.statusNum}; - report.stateNum = CONST.REPORT.STATE_NUM.APPROVED; - report.statusNum = CONST.REPORT.STATUS_NUM.APPROVED; return Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, { achAccount: { From a42c01415a68fcb9909e825278e09e3f1fc53c9c Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 15:00:29 +0200 Subject: [PATCH 007/381] fix: eslint --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index a19869e073fa..94e2c4863ea2 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -14,12 +14,10 @@ import useOnboardingFlowRouter from '@hooks/useOnboardingFlow'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as Welcome from '@libs/actions/Welcome'; import {READ_COMMANDS} from '@libs/API/types'; import HttpUtils from '@libs/HttpUtils'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Log from '@libs/Log'; -import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import getCurrentUrl from '@libs/Navigation/currentUrl'; import Navigation from '@libs/Navigation/Navigation'; import shouldOpenOnAdminRoom from '@libs/Navigation/shouldOpenOnAdminRoom'; @@ -58,6 +56,7 @@ import beforeRemoveReportOpenedFromSearchRHP from './beforeRemoveReportOpenedFro import CENTRAL_PANE_SCREENS from './CENTRAL_PANE_SCREENS'; import createResponsiveStackNavigator from './createResponsiveStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; +import hideKeyboardOnSwipe from './hideKeyboardOnSwipe'; import BottomTabNavigator from './Navigators/BottomTabNavigator'; import ExplanationModalNavigator from './Navigators/ExplanationModalNavigator'; import FeatureTrainingModalNavigator from './Navigators/FeatureTrainingModalNavigator'; From e476b1bad3fa6dc3273216cff9c31a61ff6cc1dc Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 15:05:38 +0200 Subject: [PATCH 008/381] fix: removed unused code --- .../getOnboardingModalScreenOptions/index.native.ts | 12 ------------ .../getOnboardingModalScreenOptions/index.ts | 9 --------- 2 files changed, 21 deletions(-) delete mode 100644 src/libs/Navigation/getOnboardingModalScreenOptions/index.native.ts delete mode 100644 src/libs/Navigation/getOnboardingModalScreenOptions/index.ts diff --git a/src/libs/Navigation/getOnboardingModalScreenOptions/index.native.ts b/src/libs/Navigation/getOnboardingModalScreenOptions/index.native.ts deleted file mode 100644 index 98dd131a9332..000000000000 --- a/src/libs/Navigation/getOnboardingModalScreenOptions/index.native.ts +++ /dev/null @@ -1,12 +0,0 @@ -import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions'; -import type {ThemeStyles} from '@styles/index'; -import type {StyleUtilsType} from '@styles/utils'; - -function getOnboardingModalScreenOptions(isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType) { - return { - ...getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils).fullScreen, - gestureEnabled: false, - }; -} - -export default getOnboardingModalScreenOptions; diff --git a/src/libs/Navigation/getOnboardingModalScreenOptions/index.ts b/src/libs/Navigation/getOnboardingModalScreenOptions/index.ts deleted file mode 100644 index aad1964f441c..000000000000 --- a/src/libs/Navigation/getOnboardingModalScreenOptions/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions'; -import type {ThemeStyles} from '@styles/index'; -import type {StyleUtilsType} from '@styles/utils'; - -function getOnboardingModalScreenOptions(isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType, shouldUseNarrowLayout: boolean) { - return getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils).onboardingModalNavigator(shouldUseNarrowLayout); -} - -export default getOnboardingModalScreenOptions; From db5ec1212b04b4b865809e29b25806dceccc697b Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 15:35:29 +0200 Subject: [PATCH 009/381] fix: TS --- src/pages/home/report/withReportOrNotFound.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index b5608d281778..2c74abe7f24d 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -24,7 +24,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; type WithReportOrNotFoundOnyxProps = { /** The report currently being looked at */ - report: OnyxEntry; + report: OnyxTypes.Report; /** Metadata of the report currently being looked at */ reportMetadata: OnyxEntry; @@ -51,18 +51,13 @@ type ScreenProps = | PlatformStackScreenProps; type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { - /** The report currently being looked at */ - report: OnyxTypes.Report; - route: ScreenProps['route']; navigation: ScreenProps['navigation']; }; export default function ( shouldRequireReportID = true, -): ( - WrappedComponent: React.ComponentType>, -) => React.ComponentType, keyof WithReportOrNotFoundOnyxProps>> { +): (WrappedComponent: React.ComponentType>) => React.ComponentType> { return function (WrappedComponent: ComponentType>) { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { const [betas] = useOnyx(ONYXKEYS.BETAS); From 9d30239de5c17c8a931f2a1cdecf50b18f393f41 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 11 Oct 2024 16:45:45 +0200 Subject: [PATCH 010/381] fix: rename functions to pass CI --- tests/perf-test/ReportScreen.perf-test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 8733ad4cd095..8c6bdc0fd714 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -5,7 +5,7 @@ import type ReactNative from 'react-native'; import {Dimensions, InteractionManager} from 'react-native'; import Onyx from 'react-native-onyx'; import type Animated from 'react-native-reanimated'; -import {measurePerformance} from 'reassure'; +import {measureRenders} from 'reassure'; import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; import type Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackNavigationProp, PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -228,7 +228,7 @@ test('[ReportScreen] should render ReportScreen', async () => { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measurePerformance( + await measureRenders( { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measurePerformance( + await measureRenders( { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measurePerformance( + await measureRenders( Date: Mon, 14 Oct 2024 15:05:16 +0200 Subject: [PATCH 011/381] fix: crashes in FlatList on goBack on Android --- ...eens+3.34.0+003+fabric-flat-list-fix.patch | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 patches/react-native-screens+3.34.0+003+fabric-flat-list-fix.patch diff --git a/patches/react-native-screens+3.34.0+003+fabric-flat-list-fix.patch b/patches/react-native-screens+3.34.0+003+fabric-flat-list-fix.patch new file mode 100644 index 000000000000..3327ed477893 --- /dev/null +++ b/patches/react-native-screens+3.34.0+003+fabric-flat-list-fix.patch @@ -0,0 +1,57 @@ +diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt +index 9d08d39..146b9c2 100644 +--- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt ++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt +@@ -18,6 +18,7 @@ import com.facebook.react.uimanager.PixelUtil + import com.facebook.react.uimanager.UIManagerHelper + import com.facebook.react.uimanager.UIManagerModule + import com.swmansion.rnscreens.events.HeaderHeightChangeEvent ++import com.swmansion.rnscreens.ext.isInsideScrollViewWithRemoveClippedSubviews + + @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated. + class Screen( +@@ -310,6 +311,16 @@ class Screen( + startTransitionRecursive(child.toolbar) + } + if (child is ViewGroup) { ++ // a combination of https://github.com/software-mansion/react-native-screens/pull/2307/files and https://github.com/software-mansion/react-native-screens/pull/2383/files ++ // The children are miscounted when there's a FlatList with ++ // removeClippedSubviews set to true (default). ++ // We add a simple view for each item in the list to make it work as expected. ++ // See https://github.com/software-mansion/react-native-screens/issues/2282 ++ if (child.isInsideScrollViewWithRemoveClippedSubviews()) { ++ for (j in 0 until child.childCount) { ++ child.addView(View(context)) ++ } ++ } + startTransitionRecursive(child) + } + } +diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt +new file mode 100644 +index 0000000..9d9fbfd +--- /dev/null ++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt +@@ -0,0 +1,21 @@ ++package com.swmansion.rnscreens.ext ++ ++import android.view.View ++import android.view.ViewGroup ++import com.facebook.react.views.scroll.ReactHorizontalScrollView ++import com.facebook.react.views.scroll.ReactScrollView ++import com.swmansion.rnscreens.ScreenStack ++ ++internal fun View.isInsideScrollViewWithRemoveClippedSubviews(): Boolean { ++ if (this is ReactHorizontalScrollView || this is ReactScrollView) { ++ return false ++ } ++ var parentView = this.parent ++ while (parentView is ViewGroup && parentView !is ScreenStack) { ++ if (parentView is ReactScrollView) { ++ return parentView.removeClippedSubviews ++ } ++ parentView = parentView.parent ++ } ++ return false ++} +\ No newline at end of file From 2eddd622ba7f85c829ef75ace36e5b4b7005aebe Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 14 Oct 2024 16:31:08 +0200 Subject: [PATCH 012/381] fix: crash when open and close image in chat --- ...6.4.1+001+native-stack-recycle-crash.patch | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 patches/react-native-pager-view+6.4.1+001+native-stack-recycle-crash.patch diff --git a/patches/react-native-pager-view+6.4.1+001+native-stack-recycle-crash.patch b/patches/react-native-pager-view+6.4.1+001+native-stack-recycle-crash.patch new file mode 100644 index 000000000000..da849c43bb32 --- /dev/null +++ b/patches/react-native-pager-view+6.4.1+001+native-stack-recycle-crash.patch @@ -0,0 +1,29 @@ +diff --git a/node_modules/react-native-pager-view/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt b/node_modules/react-native-pager-view/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt +index 0abf668..0bfca0a 100644 +--- a/node_modules/react-native-pager-view/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt ++++ b/node_modules/react-native-pager-view/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt +@@ -151,10 +151,20 @@ object PagerViewViewManagerImpl { + + private fun refreshViewChildrenLayout(view: View) { + view.post { +- view.measure( ++ try { ++ view.measure( + View.MeasureSpec.makeMeasureSpec(view.width, View.MeasureSpec.EXACTLY), +- View.MeasureSpec.makeMeasureSpec(view.height, View.MeasureSpec.EXACTLY)) +- view.layout(view.left, view.top, view.right, view.bottom) ++ View.MeasureSpec.makeMeasureSpec(view.height, View.MeasureSpec.EXACTLY) ++ ) ++ view.layout(view.left, view.top, view.right, view.bottom) ++ } catch (e: Exception) { ++ // no-op ++ // fixes a crash: java.lang.IllegalArgumentException: Scrapped or attached views may not be recycled. isScrap:false isAttached:true ++ // It looks like we can not force layout on a recycled views. The safer solution would be simply call .requestLayout(), but I believe that ++ // force layouting was added intentionally and fixes some issues, so we simply wrap the operation with try/catch to not crash the app ++ // patch can be removed when https://github.com/callstack/react-native-pager-view/issues/882 or https://github.com/callstack/react-native-pager-view/issues/859 ++ // will be fixed ++ } + } + } + } +\ No newline at end of file From 8f57acc4c3e42ba7b6fb235a5dcccbe5339d4df8 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 14 Oct 2024 17:02:30 +0200 Subject: [PATCH 013/381] fix: incorrect merge conflic resolve --- src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx index 9b9746045c36..a891c58b8ae1 100644 --- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx +++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx @@ -24,7 +24,7 @@ import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES';å +import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/NewContactMethodForm'; import type {Errors} from '@src/types/onyx/OnyxCommon'; @@ -32,8 +32,7 @@ import type {Errors} from '@src/types/onyx/OnyxCommon'; type NewContactMethodPageProps = PlatformStackScreenProps; function NewContactMethodPage({route}: NewContactMethodPageProps) { - const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const contactMethod = account?.primaryLogin ?? ''; + const contactMethod = UserUtils.getContactMethod(); const styles = useThemeStyles(); const {translate} = useLocalize(); const loginInputRef = useRef(null); From 600088aa7666522a74a2d781e2c0c85962e6d1ff Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Tue, 15 Oct 2024 17:11:48 +0200 Subject: [PATCH 014/381] fix: not showing up keyboard in ChatFinder screen --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 06bf8eb6434a..fe367197066d 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -542,7 +542,7 @@ function BaseSelectionList( if (shouldDelayFocus) { focusTimeoutRef.current = setTimeout(focusTextInput, CONST.ANIMATED_TRANSITION); } else { - focusTextInput(); + requestAnimationFrame(focusTextInput); } } From fb47d6fc523472463b67fd6d258d4b429b90a624 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Wed, 16 Oct 2024 18:48:31 +0200 Subject: [PATCH 015/381] fix: iOS un-natural transitions --- ...custom-animations-native-transitions.patch | 156 ++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch diff --git a/patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch b/patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch new file mode 100644 index 000000000000..62cbf68f458d --- /dev/null +++ b/patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch @@ -0,0 +1,156 @@ +diff --git a/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm b/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm +index abb2cf6..fb81d52 100644 +--- a/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm ++++ b/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm +@@ -5,13 +5,14 @@ + + // proportions to default transition duration + static const float RNSSlideOpenTransitionDurationProportion = 1; +-static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.35; +-static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.35; +-static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.35; +-static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35; ++static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.5; ++static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.5; ++static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.5; ++static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.5; + // same value is used in other projects using similar approach for transistions + // and it looks the most similar to the value used by Apple + static constexpr float RNSShadowViewMaxAlpha = 0.1; ++static const int UIViewAnimationOptionCurveDefaultTransition = 7 << 16; + + @implementation RNSScreenStackAnimator { + UINavigationControllerOperation _operation; +@@ -22,7 +23,7 @@ - (instancetype)initWithOperation:(UINavigationControllerOperation)operation + { + if (self = [super init]) { + _operation = operation; +- _transitionDuration = 0.35; // default duration in seconds ++ _transitionDuration = 0.5; // default duration in seconds + } + return self; + } +@@ -129,6 +130,8 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled + } + + [UIView animateWithDuration:[self transitionDuration:transitionContext] ++ delay:0 ++ options:UIViewAnimationOptionCurveDefaultTransition + animations:^{ + fromViewController.view.transform = leftTransform; + toViewController.view.transform = CGAffineTransformIdentity; +@@ -170,6 +173,8 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled + + if (!transitionContext.isInteractive) { + [UIView animateWithDuration:[self transitionDuration:transitionContext] ++ delay:0 ++ options:UIViewAnimationOptionCurveDefaultTransition + animations:animationBlock + completion:completionBlock]; + } else { +@@ -203,6 +208,8 @@ - (void)animateSlideFromLeftWithTransitionContext:(id; + stackAnimation?: WithDefault; +- transitionDuration?: WithDefault; ++ transitionDuration?: WithDefault; + replaceAnimation?: WithDefault; + swipeDirection?: WithDefault; + hideKeyboardOnSwipe?: boolean; +diff --git a/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts b/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts +index 11ed190..f676e08 100644 +--- a/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts ++++ b/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts +@@ -55,7 +55,7 @@ export interface NativeProps extends ViewProps { + gestureResponseDistance?: GestureResponseDistanceType; + stackPresentation?: WithDefault; + stackAnimation?: WithDefault; +- transitionDuration?: WithDefault; ++ transitionDuration?: WithDefault; + replaceAnimation?: WithDefault; + swipeDirection?: WithDefault; + hideKeyboardOnSwipe?: boolean; +diff --git a/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts b/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts +index bb59c4c..d4c14ee 100644 +--- a/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts ++++ b/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts +@@ -90,7 +90,7 @@ export interface NativeProps extends ViewProps { + gestureResponseDistance?: GestureResponseDistanceType; + stackPresentation?: WithDefault; + stackAnimation?: WithDefault; +- transitionDuration?: WithDefault; ++ transitionDuration?: WithDefault; + replaceAnimation?: WithDefault; + swipeDirection?: WithDefault; + hideKeyboardOnSwipe?: boolean; +diff --git a/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts b/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts +index 4e39336..ab0b313 100644 +--- a/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts ++++ b/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts +@@ -92,7 +92,7 @@ export interface NativeProps extends ViewProps { + gestureResponseDistance?: GestureResponseDistanceType; + stackPresentation?: WithDefault; + stackAnimation?: WithDefault; +- transitionDuration?: WithDefault; ++ transitionDuration?: WithDefault; + replaceAnimation?: WithDefault; + swipeDirection?: WithDefault; + hideKeyboardOnSwipe?: boolean; \ No newline at end of file From de1eda94be590b32ae5db1e8f57737d71b8487b8 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Wed, 16 Oct 2024 18:59:28 +0200 Subject: [PATCH 016/381] fix: new screen to use new interface --- .../UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx | 4 ++-- .../AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx b/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx index 2c1bc55e0e92..b61238c43e39 100644 --- a/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx +++ b/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useRef} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -8,6 +7,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import type CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -16,7 +16,7 @@ import type SCREENS from '@src/SCREENS'; import ValidateCodeForm from './ValidateCodeForm'; import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm'; -type UpdateDelegateMagicCodePageProps = StackScreenProps; +type UpdateDelegateMagicCodePageProps = PlatformStackScreenProps; function UpdateDelegateMagicCodePage({route}: UpdateDelegateMagicCodePageProps) { const {translate} = useLocalize(); diff --git a/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx b/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx index 58b1b710d474..12e77fb2eebe 100644 --- a/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx +++ b/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -10,13 +9,14 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {clearDelegateRolePendingAction, requestValidationCode, updateDelegateRoleOptimistically} from '@libs/actions/Delegate'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {DelegateRole} from '@src/types/onyx/Account'; -type UpdateDelegateRolePageProps = StackScreenProps; +type UpdateDelegateRolePageProps = PlatformStackScreenProps; function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) { const {translate} = useLocalize(); From 76ab756af59c94d9f9ff35bcb74a26e0ccb80330 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 17 Oct 2024 19:07:11 +0530 Subject: [PATCH 017/381] update main branch. Signed-off-by: krishna2323 --- src/libs/TransactionUtils/index.ts | 3 ++- src/pages/TransactionDuplicate/ReviewDescription.tsx | 4 +++- src/types/onyx/ReviewDuplicates.ts | 5 +++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts index bd0db668fe2c..1630d74835cb 100644 --- a/src/libs/TransactionUtils/index.ts +++ b/src/libs/TransactionUtils/index.ts @@ -1045,6 +1045,7 @@ function compareDuplicateTransactionFields(transactionID: string): {keep: Partia const allCommentsAreEmpty = isFirstTransactionCommentEmptyObject && transactions.every((item) => getDescription(item) === ''); if (allCommentsAreEqual || allCommentsAreEmpty) { keep[fieldName] = firstTransaction?.comment?.comment ?? firstTransaction?.comment; + keep.comment = firstTransaction?.comment; } else { processChanges(fieldName, transactions, keys); } @@ -1082,7 +1083,7 @@ function buildNewTransactionAfterReviewingDuplicates(reviewDuplicateTransaction: ...restReviewDuplicateTransaction, modifiedMerchant: reviewDuplicateTransaction?.merchant, merchant: reviewDuplicateTransaction?.merchant, - comment: {comment: reviewDuplicateTransaction?.description}, + comment: {...reviewDuplicateTransaction?.comment, comment: reviewDuplicateTransaction?.description}, }; } diff --git a/src/pages/TransactionDuplicate/ReviewDescription.tsx b/src/pages/TransactionDuplicate/ReviewDescription.tsx index 3d74d8cc36e1..108a39d654ce 100644 --- a/src/pages/TransactionDuplicate/ReviewDescription.tsx +++ b/src/pages/TransactionDuplicate/ReviewDescription.tsx @@ -38,7 +38,9 @@ function ReviewDescription() { ); const setDescription = (data: FieldItemType<'description'>) => { if (data.value !== undefined) { - setReviewDuplicatesKey({description: data.value}); + // setReviewDuplicatesKey({description: data.value}); + const comment = compareResult.change.description?.find((d) => d?.comment === data.value); + setReviewDuplicatesKey({comment, description: data.value}); } navigateToNextScreen(); }; diff --git a/src/types/onyx/ReviewDuplicates.ts b/src/types/onyx/ReviewDuplicates.ts index 0682ed0a7f7c..f436b50b1679 100644 --- a/src/types/onyx/ReviewDuplicates.ts +++ b/src/types/onyx/ReviewDuplicates.ts @@ -1,3 +1,5 @@ +import type {Comment} from './Transaction'; + /** * Model of review duplicates request */ @@ -26,6 +28,9 @@ type ReviewDuplicates = { /** Description which user want to keep */ description: string; + /** Description which user want to keep */ + comment: Comment; + /** Whether the transaction is reimbursable */ reimbursable: boolean; From a7293da050229bb24daa0e6031114980a9270135 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sun, 6 Oct 2024 17:35:20 +0200 Subject: [PATCH 018/381] fix: remove header in FullScreenNavigator --- .../AppNavigator/createCustomFullScreenNavigator/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx index 204a9780e7d5..f3d605e1824f 100644 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/index.tsx @@ -2,12 +2,14 @@ import type {ParamListBase} from '@react-navigation/native'; import {createNavigatorFactory} from '@react-navigation/native'; import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange'; import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent'; +import defaultPlatformStackScreenOptions from '@libs/Navigation/PlatformStackNavigation/defaultPlatformStackScreenOptions'; import type {PlatformStackNavigationEventMap, PlatformStackNavigationOptions, PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; import CustomFullScreenRouter from './CustomFullScreenRouter'; const CustomFullScreenNavigatorComponent = createPlatformStackNavigatorComponent('CustomFullScreenNavigator', { createRouter: CustomFullScreenRouter, useCustomEffects: useNavigationResetOnLayoutChange, + defaultScreenOptions: defaultPlatformStackScreenOptions, }); function createCustomFullScreenNavigator() { From 711ae64a9bed7c70fa6199e951c8c4f3137e6cea Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 26 Oct 2024 19:08:12 +0200 Subject: [PATCH 019/381] remove unused temporary navigator factories --- .../BottomTabBar.tsx | 191 ------------------ .../BottomTabNavigationContentWrapper.tsx | 22 -- .../TopBar.tsx | 78 ------- .../index.tsx | 33 --- .../useCustomState/index.ts | 20 -- .../CustomFullScreenRouter.tsx | 77 ------- .../index.tsx | 19 -- 7 files changed, 440 deletions(-) delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabBar.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabNavigationContentWrapper.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/TopBar.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/index.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/useCustomState/index.ts delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/CustomFullScreenRouter.tsx delete mode 100644 src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/index.tsx diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabBar.tsx deleted file mode 100644 index 3bf029012b36..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabBar.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import {useNavigation} from '@react-navigation/native'; -import React, {memo, useCallback, useEffect, useState} from 'react'; -import {NativeModules, View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; -import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; -import {PressableWithFeedback} from '@components/Pressable'; -import type {SearchQueryString} from '@components/Search/types'; -import Tooltip from '@components/Tooltip'; -import useActiveWorkspace from '@hooks/useActiveWorkspace'; -import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import * as Session from '@libs/actions/Session'; -import interceptAnonymousUser from '@libs/interceptAnonymousUser'; -import Navigation from '@libs/Navigation/Navigation'; -import type {AuthScreensParamList} from '@libs/Navigation/types'; -import {isCentralPaneName} from '@libs/NavigationUtils'; -import * as PolicyUtils from '@libs/PolicyUtils'; -import * as SearchQueryUtils from '@libs/SearchQueryUtils'; -import type {BrickRoad} from '@libs/WorkspacesSettingsUtils'; -import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils'; -import navigationRef from '@navigation/navigationRef'; -import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar'; -import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton'; -import variables from '@styles/variables'; -import * as Welcome from '@userActions/Welcome'; -import * as OnboardingFlow from '@userActions/Welcome/OnboardingFlow'; -import CONST from '@src/CONST'; -import NAVIGATORS from '@src/NAVIGATORS'; -import ONYXKEYS from '@src/ONYXKEYS'; -import type {Route} from '@src/ROUTES'; -import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; - -type BottomTabBarProps = { - selectedTab: string | undefined; -}; - -/** - * Returns SearchQueryString that has policyID correctly set. - * - * When we're coming back to Search Screen we might have pre-existing policyID inside SearchQuery. - * There are 2 cases when we might want to remove this `policyID`: - * - if Policy was removed in another screen - * - if WorkspaceSwitcher was used to globally unset a policyID - * Otherwise policyID will be inserted into query - */ -function handleQueryWithPolicyID(query: SearchQueryString, activePolicyID?: string): SearchQueryString { - const queryJSON = SearchQueryUtils.buildSearchQueryJSON(query); - if (!queryJSON) { - return query; - } - - const policyID = activePolicyID ?? queryJSON.policyID; - const policy = PolicyUtils.getPolicy(policyID); - - // In case policy is missing or there is no policy currently selected via WorkspaceSwitcher we remove it - if (!activePolicyID || !policy) { - delete queryJSON.policyID; - } else { - queryJSON.policyID = policyID; - } - - return SearchQueryUtils.buildSearchQueryString(queryJSON); -} - -function BottomTabBar({selectedTab}: BottomTabBarProps) { - const theme = useTheme(); - const styles = useThemeStyles(); - const {translate} = useLocalize(); - const navigation = useNavigation(); - const {activeWorkspaceID} = useActiveWorkspace(); - const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); - const transactionViolations = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); - const [chatTabBrickRoad, setChatTabBrickRoad] = useState(getChatTabBrickRoad(activeWorkspaceID)); - - useEffect(() => { - setChatTabBrickRoad(getChatTabBrickRoad(activeWorkspaceID)); - }, [activeWorkspaceID, transactionViolations]); - - useEffect(() => { - const navigationState = navigation.getState(); - const routes = navigationState?.routes; - const currentRoute = routes?.at(navigationState?.index ?? 0); - // When we are redirected to the Settings tab from the OldDot, we don't want to call the Welcome.show() method. - // To prevent this, the value of the bottomTabRoute?.name is checked here - if (!!(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && !isCentralPaneName(currentRoute.name)) || Session.isAnonymousUser()) { - return; - } - - // HybridApp has own entry point when we decide whether to display onboarding and explanation modal. - if (NativeModules.HybridAppModule) { - return; - } - - Welcome.isOnboardingFlowCompleted({ - onNotCompleted: () => OnboardingFlow.startOnboardingFlow(), - }); - - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [isLoadingApp]); - - const navigateToChats = useCallback(() => { - if (selectedTab === SCREENS.HOME) { - return; - } - const route = activeWorkspaceID ? (`/w/${activeWorkspaceID}/${ROUTES.HOME}` as Route) : ROUTES.HOME; - Navigation.navigate(route); - }, [activeWorkspaceID, selectedTab]); - - const navigateToSearch = useCallback(() => { - if (selectedTab === SCREENS.SEARCH.BOTTOM_TAB) { - return; - } - interceptAnonymousUser(() => { - const rootState = navigationRef.getRootState(); - const lastSearchRoute = rootState.routes.filter((route) => route.name === SCREENS.SEARCH.CENTRAL_PANE).at(-1); - - if (lastSearchRoute) { - const {q, ...rest} = lastSearchRoute.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE]; - const cleanedQuery = handleQueryWithPolicyID(q, activeWorkspaceID); - - Navigation.navigate( - ROUTES.SEARCH_CENTRAL_PANE.getRoute({ - query: cleanedQuery, - ...rest, - }), - ); - return; - } - - const defaultCannedQuery = SearchQueryUtils.buildCannedSearchQuery(); - // when navigating to search we might have an activePolicyID set from workspace switcher - const query = activeWorkspaceID ? `${defaultCannedQuery} ${CONST.SEARCH.SYNTAX_ROOT_KEYS.POLICY_ID}:${activeWorkspaceID}` : defaultCannedQuery; - Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query})); - }); - }, [activeWorkspaceID, selectedTab]); - - return ( - - - - - - {chatTabBrickRoad && ( - - )} - - - - - - - - - - - - - - - - ); -} - -BottomTabBar.displayName = 'BottomTabBar'; - -export default memo(BottomTabBar); diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabNavigationContentWrapper.tsx b/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabNavigationContentWrapper.tsx deleted file mode 100644 index dd93a6df7b1e..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/BottomTabNavigationContentWrapper.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import ScreenWrapper from '@components/ScreenWrapper'; -import useThemeStyles from '@hooks/useThemeStyles'; -import type {NavigationContentWrapperProps} from '@libs/Navigation/PlatformStackNavigation/types'; - -function BottomTabNavigationContentWrapper({children, displayName}: NavigationContentWrapperProps) { - const styles = useThemeStyles(); - - return ( - - {children} - - ); -} - -export default BottomTabNavigationContentWrapper; diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/TopBar.tsx deleted file mode 100644 index eba7a7448ad0..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/TopBar.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; -import Breadcrumbs from '@components/Breadcrumbs'; -import {PressableWithoutFeedback} from '@components/Pressable'; -import SearchButton from '@components/Search/SearchRouter/SearchButton'; -import Text from '@components/Text'; -import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton'; -import useLocalize from '@hooks/useLocalize'; -import usePolicy from '@hooks/usePolicy'; -import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; -import * as SearchQueryUtils from '@libs/SearchQueryUtils'; -import SignInButton from '@pages/home/sidebar/SignInButton'; -import * as Session from '@userActions/Session'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; - -type TopBarProps = {breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; shouldDisplayCancelSearch?: boolean}; - -function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayCancelSearch = false}: TopBarProps) { - const styles = useThemeStyles(); - const {translate} = useLocalize(); - const policy = usePolicy(activeWorkspaceID); - const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}}); - const isAnonymousUser = Session.isAnonymousUser(session); - - const headerBreadcrumb = policy?.name - ? {type: CONST.BREADCRUMB_TYPE.STRONG, text: policy.name} - : { - type: CONST.BREADCRUMB_TYPE.ROOT, - }; - - const displaySignIn = isAnonymousUser; - const displaySearch = !isAnonymousUser && shouldDisplaySearch; - - return ( - - - - - - - - - - {displaySignIn && } - {shouldDisplayCancelSearch && ( - { - Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()})); - }} - > - {translate('common.cancel')} - - )} - {displaySearch && } - - - ); -} - -TopBar.displayName = 'TopBar'; - -export default TopBar; diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/index.tsx deleted file mode 100644 index 2461c542ec7d..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type {ParamListBase} from '@react-navigation/native'; -import {createNavigatorFactory} from '@react-navigation/native'; -import React from 'react'; -import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent'; -import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation'; -import type {ExtraContentProps, PlatformStackNavigationEventMap, PlatformStackNavigationOptions, PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; -import BottomTabBar from './BottomTabBar'; -import BottomTabNavigationContentWrapper from './BottomTabNavigationContentWrapper'; -import useCustomState from './useCustomState'; - -const defaultScreenOptions: PlatformStackNavigationOptions = { - animation: Animations.NONE, -}; - -function ExtraContent({state}: ExtraContentProps) { - const selectedTab = state.routes.at(-1)?.name; - return ; -} - -const CustomBottomTabNavigatorComponent = createPlatformStackNavigatorComponent('CustomBottomTabNavigator', { - useCustomState, - defaultScreenOptions, - NavigationContentWrapper: BottomTabNavigationContentWrapper, - ExtraContent, -}); - -function createCustomBottomTabNavigator() { - return createNavigatorFactory, PlatformStackNavigationOptions, PlatformStackNavigationEventMap, typeof CustomBottomTabNavigatorComponent>( - CustomBottomTabNavigatorComponent, - )(); -} - -export default createCustomBottomTabNavigator; diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/useCustomState/index.ts b/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/useCustomState/index.ts deleted file mode 100644 index e95c6c292dbc..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackBottomTabNavigator/useCustomState/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type {CustomStateHookProps} from '@libs/Navigation/PlatformStackNavigation/types'; -import type {NavigationStateRoute} from '@libs/Navigation/types'; -import SCREENS from '@src/SCREENS'; - -function useCustomState({state}: CustomStateHookProps) { - const routesToRender = [state.routes.at(-1)] as NavigationStateRoute[]; - - // We need to render at least one HOME screen to make sure everything load properly. This may be not necessary after changing how IS_SIDEBAR_LOADED is handled. - // Currently this value will be switched only after the first HOME screen is rendered. - if (routesToRender.at(0)?.name !== SCREENS.HOME) { - const routeToRender = state.routes.find((route) => route.name === SCREENS.HOME); - if (routeToRender) { - routesToRender.unshift(routeToRender); - } - } - - return {stateToRender: {...state, routes: routesToRender, index: routesToRender.length - 1}}; -} - -export default useCustomState; diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/CustomFullScreenRouter.tsx b/src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/CustomFullScreenRouter.tsx deleted file mode 100644 index 5c837fc93a5b..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/CustomFullScreenRouter.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import type {ParamListBase, PartialState, Router, RouterConfigOptions} from '@react-navigation/native'; -import {StackRouter} from '@react-navigation/native'; -import getIsNarrowLayout from '@libs/getIsNarrowLayout'; -import type {PlatformStackNavigationState, PlatformStackRouterOptions} from '@libs/Navigation/PlatformStackNavigation/types'; -import SCREENS from '@src/SCREENS'; - -type StackState = PlatformStackNavigationState | PartialState>; - -const isAtLeastOneInState = (state: StackState, screenName: string): boolean => state.routes.some((route) => route.name === screenName); - -function adaptStateIfNecessary(state: StackState) { - const isNarrowLayout = getIsNarrowLayout(); - const workspaceCentralPane = state.routes.at(-1); - - // There should always be WORKSPACE.INITIAL screen in the state to make sure go back works properly if we deeplinkg to a subpage of settings. - if (!isAtLeastOneInState(state, SCREENS.WORKSPACE.INITIAL)) { - // @ts-expect-error Updating read only property - // noinspection JSConstantReassignment - state.stale = true; // eslint-disable-line - - // This is necessary for ts to narrow type down to PartialState. - if (state.stale === true) { - // Unshift the root screen to fill left pane. - state.routes.unshift({ - name: SCREENS.WORKSPACE.INITIAL, - params: workspaceCentralPane?.params, - }); - } - } - - // If the screen is wide, there should be at least two screens inside: - // - WORKSPACE.INITIAL to cover left pane. - // - WORKSPACE.PROFILE (first workspace settings screen) to cover central pane. - if (!isNarrowLayout) { - if (state.routes.length === 1 && state.routes.at(0)?.name === SCREENS.WORKSPACE.INITIAL) { - // @ts-expect-error Updating read only property - // noinspection JSConstantReassignment - state.stale = true; // eslint-disable-line - // Push the default settings central pane screen. - if (state.stale === true) { - state.routes.push({ - name: SCREENS.WORKSPACE.PROFILE, - params: state.routes.at(0)?.params, - }); - } - } - // eslint-disable-next-line no-param-reassign, @typescript-eslint/non-nullable-type-assertion-style - (state.index as number) = state.routes.length - 1; - } -} - -function CustomFullScreenRouter(options: PlatformStackRouterOptions) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const stackRouter = StackRouter(options) as Router, any>; - - return { - ...stackRouter, - getInitialState({routeNames, routeParamList, routeGetIdList}: RouterConfigOptions) { - const initialState = stackRouter.getInitialState({routeNames, routeParamList, routeGetIdList}); - adaptStateIfNecessary(initialState); - - // If we needed to modify the state we need to rehydrate it to get keys for new routes. - if (initialState.stale) { - return stackRouter.getRehydratedState(initialState, {routeNames, routeParamList, routeGetIdList}); - } - - return initialState; - }, - getRehydratedState(partialState: StackState, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): PlatformStackNavigationState { - adaptStateIfNecessary(partialState); - const state = stackRouter.getRehydratedState(partialState, {routeNames, routeParamList, routeGetIdList}); - return state; - }, - }; -} - -export default CustomFullScreenRouter; diff --git a/src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/index.tsx deleted file mode 100644 index 204a9780e7d5..000000000000 --- a/src/libs/Navigation/AppNavigator/createCustomPlatformStackFullScreenNavigator/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type {ParamListBase} from '@react-navigation/native'; -import {createNavigatorFactory} from '@react-navigation/native'; -import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange'; -import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent'; -import type {PlatformStackNavigationEventMap, PlatformStackNavigationOptions, PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; -import CustomFullScreenRouter from './CustomFullScreenRouter'; - -const CustomFullScreenNavigatorComponent = createPlatformStackNavigatorComponent('CustomFullScreenNavigator', { - createRouter: CustomFullScreenRouter, - useCustomEffects: useNavigationResetOnLayoutChange, -}); - -function createCustomFullScreenNavigator() { - return createNavigatorFactory, PlatformStackNavigationOptions, PlatformStackNavigationEventMap, typeof CustomFullScreenNavigatorComponent>( - CustomFullScreenNavigatorComponent, - )(); -} - -export default createCustomFullScreenNavigator; From 853349f302af32396fa1378bd21fed8fca1ea335 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Mon, 28 Oct 2024 13:02:08 +0100 Subject: [PATCH 020/381] fix: improve naming of (side) modal navigator screen options generators --- .../AppNavigator/ModalStackNavigators/index.tsx | 6 +++--- ...lScreenOptions.ts => useModalStackScreenOptions.ts} | 4 ++-- .../AppNavigator/Navigators/LeftModalNavigator.tsx | 4 ++-- .../AppNavigator/Navigators/RightModalNavigator.tsx | 4 ++-- ...avigatorOptions.ts => useSideModalScreenOptions.ts} | 10 +++++----- 5 files changed, 14 insertions(+), 14 deletions(-) rename src/libs/Navigation/AppNavigator/ModalStackNavigators/{useModalScreenOptions.ts => useModalStackScreenOptions.ts} (92%) rename src/libs/Navigation/AppNavigator/{useModalNavigatorOptions.ts => useSideModalScreenOptions.ts} (78%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index cc9a2ef11738..24f743d906a7 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -35,8 +35,8 @@ import type { import type {Screen} from '@src/SCREENS'; import SCREENS from '@src/SCREENS'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; -import type {GetModalStackScreenOptions} from './useModalScreenOptions'; -import useModalScreenOptions from './useModalScreenOptions'; +import type {GetModalStackScreenOptions} from './useModalStackScreenOptions'; +import useModalStackScreenOptions from './useModalStackScreenOptions'; type Screens = Partial React.ComponentType>>; @@ -50,7 +50,7 @@ function createModalStackNavigator(screens: Scr const ModalStackNavigator = createPlatformStackNavigator(); function ModalStack() { - const screenOptions = useModalScreenOptions(getScreenOptions); + const screenOptions = useModalStackScreenOptions(getScreenOptions); return ( diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts similarity index 92% rename from src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts rename to src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts index e7549cc3f8b7..adef38af97e8 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts @@ -10,7 +10,7 @@ import type {ThemeStyles} from '@src/styles'; type GetModalStackScreenOptions = (styles: ThemeStyles) => PlatformStackNavigationOptions; -function useModalScreenOptions(getScreenOptions?: GetModalStackScreenOptions) { +function useModalStackScreenOptions(getScreenOptions?: GetModalStackScreenOptions) { const styles = useThemeStyles(); const customInterpolator = useModalCardStyleInterpolator(); @@ -35,5 +35,5 @@ function useModalScreenOptions(getScreenOptions?: GetModalStackScreenOptions) { return getScreenOptions?.(styles) ?? defaultSubRouteOptions; } -export default useModalScreenOptions; +export default useModalStackScreenOptions; export type {GetModalStackScreenOptions}; diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index a269b4c35270..33e49136861b 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -3,7 +3,7 @@ import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import useModalNavigatorOptions from '@libs/Navigation/AppNavigator/useModalNavigatorOptions'; +import useSideModalScreenOptions from '@libs/Navigation/AppNavigator/useSideModalScreenOptions'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types'; @@ -21,7 +21,7 @@ const Stack = createPlatformStackNavigator(); function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const screenOptions = useModalNavigatorOptions('horizontal-inverted'); + const screenOptions = useSideModalScreenOptions('horizontal-inverted'); return ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index b1e5754f1353..69988de6bb43 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -9,7 +9,7 @@ import {isSafari} from '@libs/Browser'; import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import useModalCardStyleInterpolator from '@libs/Navigation/AppNavigator/useModalCardStyleInterpolator'; -import useModalNavigatorOptions from '@libs/Navigation/AppNavigator/useModalNavigatorOptions'; +import useSideModalScreenOptions from '@libs/Navigation/AppNavigator/useSideModalScreenOptions'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; @@ -26,7 +26,7 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) { const {shouldUseNarrowLayout} = useResponsiveLayout(); const isExecutingRef = useRef(false); const customInterpolator = useModalCardStyleInterpolator(); - const modalNavigatorOptions = useModalNavigatorOptions(); + const modalNavigatorOptions = useSideModalScreenOptions(); const screenOptions = useMemo(() => { // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator diff --git a/src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts b/src/libs/Navigation/AppNavigator/useSideModalScreenOptions.ts similarity index 78% rename from src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts rename to src/libs/Navigation/AppNavigator/useSideModalScreenOptions.ts index 2102d247b079..85e467ebf691 100644 --- a/src/libs/Navigation/AppNavigator/useModalNavigatorOptions.ts +++ b/src/libs/Navigation/AppNavigator/useSideModalScreenOptions.ts @@ -5,12 +5,12 @@ import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptio import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; /** - * Modal stack navigator screen options generator function + * Side modal screen options generator function * @param gestureDirection - The gesture direction of dismissing the modal * @returns The screen options object */ -const useModalNavigatorOptions = (gestureDirection: GestureDirection = 'horizontal'): PlatformStackNavigationOptions => { - const themeStyles = useThemeStyles(); +const useSideModalScreenOptions = (gestureDirection: GestureDirection = 'horizontal'): PlatformStackNavigationOptions => { + const styles = useThemeStyles(); let universalGestureDirection: PlatformStackNavigationOptions['gestureDirection'] | undefined; let webGestureDirection: GestureDirection | undefined; @@ -25,11 +25,11 @@ const useModalNavigatorOptions = (gestureDirection: GestureDirection = 'horizont animation: Animations.SLIDE_FROM_RIGHT, gestureDirection: universalGestureDirection, web: { - cardStyle: themeStyles.navigationScreenCardStyle, + cardStyle: styles.navigationScreenCardStyle, cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, ...(webGestureDirection && {gestureDirection: webGestureDirection}), }, }; }; -export default useModalNavigatorOptions; +export default useSideModalScreenOptions; From 028b62a24d01c579168423bdd141bdc818616d1d Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Mon, 28 Oct 2024 13:05:34 +0100 Subject: [PATCH 021/381] fix: further improve naming --- .../ModalStackNavigators/useModalStackScreenOptions.ts | 3 +++ .../AppNavigator/Navigators/LeftModalNavigator.tsx | 4 ++-- .../AppNavigator/Navigators/RightModalNavigator.tsx | 4 ++-- ...alScreenOptions.ts => useSideModalStackScreenOptions.ts} | 6 +++--- 4 files changed, 10 insertions(+), 7 deletions(-) rename src/libs/Navigation/AppNavigator/{useSideModalScreenOptions.ts => useSideModalStackScreenOptions.ts} (85%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts index adef38af97e8..0d8befb2b0f7 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts @@ -24,6 +24,9 @@ function useModalStackScreenOptions(getScreenOptions?: GetModalStackScreenOption (): PlatformStackNavigationOptions => ({ ...hideKeyboardOnSwipe, headerShown: false, + native: { + contentStyle: {...styles.navigationScreenCardStyle, backgroundColor: 'red'}, + }, web: { cardStyle: styles.navigationScreenCardStyle, cardStyleInterpolator, diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index 33e49136861b..aaf40a62f99e 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -3,7 +3,7 @@ import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import useSideModalScreenOptions from '@libs/Navigation/AppNavigator/useSideModalScreenOptions'; +import useSideModalStackScreenOptions from '@libs/Navigation/AppNavigator/useSideModalStackScreenOptions'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types'; @@ -21,7 +21,7 @@ const Stack = createPlatformStackNavigator(); function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const screenOptions = useSideModalScreenOptions('horizontal-inverted'); + const screenOptions = useSideModalStackScreenOptions('horizontal-inverted'); return ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 69988de6bb43..c996f380e98c 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -9,7 +9,7 @@ import {isSafari} from '@libs/Browser'; import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import useModalCardStyleInterpolator from '@libs/Navigation/AppNavigator/useModalCardStyleInterpolator'; -import useSideModalScreenOptions from '@libs/Navigation/AppNavigator/useSideModalScreenOptions'; +import useSideModalStackScreenOptions from '@libs/Navigation/AppNavigator/useSideModalStackScreenOptions'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; @@ -26,7 +26,7 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) { const {shouldUseNarrowLayout} = useResponsiveLayout(); const isExecutingRef = useRef(false); const customInterpolator = useModalCardStyleInterpolator(); - const modalNavigatorOptions = useSideModalScreenOptions(); + const modalNavigatorOptions = useSideModalStackScreenOptions(); const screenOptions = useMemo(() => { // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator diff --git a/src/libs/Navigation/AppNavigator/useSideModalScreenOptions.ts b/src/libs/Navigation/AppNavigator/useSideModalStackScreenOptions.ts similarity index 85% rename from src/libs/Navigation/AppNavigator/useSideModalScreenOptions.ts rename to src/libs/Navigation/AppNavigator/useSideModalStackScreenOptions.ts index 85e467ebf691..6b6fb46e4122 100644 --- a/src/libs/Navigation/AppNavigator/useSideModalScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/useSideModalStackScreenOptions.ts @@ -5,11 +5,11 @@ import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptio import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types'; /** - * Side modal screen options generator function + * Side modal stack screen options generator function * @param gestureDirection - The gesture direction of dismissing the modal * @returns The screen options object */ -const useSideModalScreenOptions = (gestureDirection: GestureDirection = 'horizontal'): PlatformStackNavigationOptions => { +const useSideModalStackScreenOptions = (gestureDirection: GestureDirection = 'horizontal'): PlatformStackNavigationOptions => { const styles = useThemeStyles(); let universalGestureDirection: PlatformStackNavigationOptions['gestureDirection'] | undefined; @@ -32,4 +32,4 @@ const useSideModalScreenOptions = (gestureDirection: GestureDirection = 'horizon }; }; -export default useSideModalScreenOptions; +export default useSideModalStackScreenOptions; From dd9c2d426f05a146d6f89bd35089eafc8aa7a4de Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 29 Oct 2024 13:58:47 +0800 Subject: [PATCH 022/381] fix wrong backTo --- src/ROUTES.ts | 6 +++++- src/libs/Navigation/types.ts | 3 ++- src/libs/actions/BankAccounts.ts | 2 +- src/pages/settings/Wallet/PaymentMethodList.tsx | 2 +- src/pages/settings/Wallet/VerifyAccountPage.tsx | 8 ++++---- src/pages/settings/Wallet/WalletPage/WalletPage.tsx | 4 +++- 6 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 2e895537eaac..09f8fad58ff0 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -156,7 +156,11 @@ const ROUTES = { SETTINGS_ABOUT: 'settings/about', SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links', SETTINGS_WALLET: 'settings/wallet', - SETTINGS_WALLET_VERIFY_ACCOUNT: {route: 'settings/wallet/verify', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/wallet/verify', backTo)}, + SETTINGS_WALLET_VERIFY_ACCOUNT: { + route: 'settings/wallet/verify', + getRoute: (backTo?: string, forwardTo?: string) => + getUrlWithBackToParam(forwardTo ? `settings/wallet/verify?forwardTo=${encodeURIComponent(forwardTo)}` : 'settings/wallet/verify', backTo), + }, SETTINGS_WALLET_DOMAINCARD: { route: 'settings/wallet/card/:cardID?', getRoute: (cardID: string) => `settings/wallet/card/${cardID}` as const, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 3de07f2c801f..138e723345a3 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -108,7 +108,8 @@ type SettingsNavigatorParamList = { backTo?: Routes; }; [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: { - backTo: Routes; + backTo?: Routes; + forwardTo?: Routes; }; [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined; [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: undefined; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 6679a6e4b9ea..4795c1524d0e 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -79,7 +79,7 @@ function openPersonalBankAccountSetupView(exitReportID?: string, isUserValidated Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID}); } if (!isUserValidated) { - Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_ADD_BANK_ACCOUNT)); + Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_WALLET, ROUTES.SETTINGS_ADD_BANK_ACCOUNT)); } Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); }); diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 23d0b5ab6550..9525c54f84f1 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -347,7 +347,7 @@ function PaymentMethodList({ const onPressItem = useCallback(() => { if (!isUserValidated) { - Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_ADD_BANK_ACCOUNT)); + Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_WALLET, ROUTES.SETTINGS_ADD_BANK_ACCOUNT)); return; } onPress(); diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index a3b51ef0de17..3275cea40495 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -8,7 +8,6 @@ import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; type VerifyAccountPageProps = StackScreenProps; @@ -23,6 +22,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true); + const navigateForwardTo = route.params?.forwardTo; const navigateBackTo = route?.params?.backTo; useEffect(() => () => User.clearUnvalidatedNewContactMethodAction(), []); @@ -49,8 +49,8 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { return; } - Navigation.navigate(navigateBackTo); - }, [isUserValidated, navigateBackTo]); + Navigation.navigate(navigateForwardTo); + }, [isUserValidated, navigateForwardTo]); useEffect(() => { if (isValidateCodeActionModalVisible) { @@ -58,7 +58,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { } if (!isUserValidated && navigateBackTo) { - Navigation.navigate(ROUTES.SETTINGS_WALLET); + Navigation.goBack(navigateBackTo); } else if (!navigateBackTo) { Navigation.goBack(); } diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index 7b9366370349..3e3030c86d4f 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -500,7 +500,9 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) { ref={buttonRef as ForwardedRef} onPress={() => { if (!isUserValidated) { - Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_ENABLE_PAYMENTS)); + Navigation.navigate( + ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_WALLET, ROUTES.SETTINGS_ENABLE_PAYMENTS), + ); return; } Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS); From 774851deb0e68c408e3f51c893f2f0ec05cc51b8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 29 Oct 2024 14:35:01 +0800 Subject: [PATCH 023/381] fix wrong variable being checked --- src/pages/settings/Wallet/VerifyAccountPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index 3275cea40495..302f73f09144 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -45,7 +45,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { setIsValidateCodeActionModalVisible(false); - if (!navigateBackTo) { + if (!navigateForwardTo) { return; } From 1250fc48a61c2273762a319376a36a22d6a834fe Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 30 Oct 2024 19:39:40 +0100 Subject: [PATCH 024/381] fix: background flashing inverse color --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 5b04a7a8eace..1b82647638c7 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3701,7 +3701,7 @@ const styles = (theme: ThemeColors) => } satisfies AnchorPosition), iPhoneXSafeArea: { - backgroundColor: theme.inverse, + backgroundColor: theme.appBG, flex: 1, }, From f6409c48dde81984d0ea8982801807b49912de15 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 30 Oct 2024 20:11:32 +0100 Subject: [PATCH 025/381] fix: use correct Navigation theme based on theme --- src/libs/Navigation/NavigationRoot.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index bb005fc6b763..23eb40686461 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -1,5 +1,5 @@ import type {NavigationState} from '@react-navigation/native'; -import {DefaultTheme, findFocusedRoute, NavigationContainer} from '@react-navigation/native'; +import {DarkTheme, DefaultTheme, findFocusedRoute, NavigationContainer} from '@react-navigation/native'; import React, {useContext, useEffect, useMemo, useRef} from 'react'; import {NativeModules} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -8,6 +8,7 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useCurrentReportID from '@hooks/useCurrentReportID'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; +import useThemePreference from '@hooks/useThemePreference'; import Firebase from '@libs/Firebase'; import {FSPage} from '@libs/Fullstory'; import Log from '@libs/Log'; @@ -83,6 +84,7 @@ function parseAndLogRoute(state: NavigationState) { function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady, shouldShowRequire2FAModal}: NavigationRootProps) { const firstRenderRef = useRef(true); + const themePreference = useThemePreference(); const theme = useTheme(); const {cleanStaleScrollOffsets} = useContext(ScrollOffsetContext); @@ -129,16 +131,17 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady, sh }, []); // https://reactnavigation.org/docs/themes - const navigationTheme = useMemo( - () => ({ - ...DefaultTheme, + const navigationTheme = useMemo(() => { + const defaultNavigationTheme = themePreference === CONST.THEME.DARK ? DarkTheme : DefaultTheme; + + return { + ...defaultNavigationTheme, colors: { - ...DefaultTheme.colors, + ...defaultNavigationTheme.colors, background: theme.appBG, }, - }), - [theme], - ); + }; + }, [theme.appBG, themePreference]); useEffect(() => { if (firstRenderRef.current) { From 6a7b1668816494d8b98fcc877fc9a9a1ca5a5a4e Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 30 Oct 2024 20:11:46 +0100 Subject: [PATCH 026/381] remove unused onSubmit prop --- src/components/ConfirmModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index fd2013c6bde7..637a514b53f3 100755 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -143,7 +143,6 @@ function ConfirmModal({ return ( Date: Wed, 30 Oct 2024 20:11:56 +0100 Subject: [PATCH 027/381] fix: remove onSubmit prop type --- src/components/Modal/types.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts index 6ced829e93d6..36bcf17fe3fa 100644 --- a/src/components/Modal/types.ts +++ b/src/components/Modal/types.ts @@ -36,9 +36,6 @@ type BaseModalProps = Partial & { /** State that determines whether to display the modal or not */ isVisible: boolean; - /** Callback method fired when the user requests to submit the modal content. */ - onSubmit?: () => void; - /** Callback method fired when the modal is hidden */ onModalHide?: () => void; From 4b420a51af17aeea6f700767d805d5c42775207e Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 30 Oct 2024 20:12:36 +0100 Subject: [PATCH 028/381] fix: modal stack background style --- .../ModalStackNavigators/useModalStackScreenOptions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts index 0d8befb2b0f7..3dc189cb8dcd 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts @@ -25,7 +25,7 @@ function useModalStackScreenOptions(getScreenOptions?: GetModalStackScreenOption ...hideKeyboardOnSwipe, headerShown: false, native: { - contentStyle: {...styles.navigationScreenCardStyle, backgroundColor: 'red'}, + contentStyle: styles.navigationScreenCardStyle, }, web: { cardStyle: styles.navigationScreenCardStyle, From 756fd6046a1461cbe507830f2ff776171435c263 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 30 Oct 2024 21:31:54 +0100 Subject: [PATCH 029/381] fix: use `shouldUseNarrowLayout` instead of `isSmallScreenWidth` --- .../AppNavigator/useRootNavigatorOptions.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts b/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts index 4490cffa1e2f..5cdb6e5e4e00 100644 --- a/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts +++ b/src/libs/Navigation/AppNavigator/useRootNavigatorOptions.ts @@ -28,7 +28,7 @@ const commonScreenOptions: PlatformStackNavigationOptions = { const useRootNavigatorOptions = () => { const themeStyles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {isSmallScreenWidth} = useResponsiveLayout(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const modalCardStyleInterpolator = useModalCardStyleInterpolator(); return { @@ -43,7 +43,7 @@ const useRootNavigatorOptions = () => { cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), // This is necessary to cover translated sidebar with overlay. - width: isSmallScreenWidth ? '100%' : '200%', + width: shouldUseNarrowLayout ? '100%' : '200%', // Excess space should be on the left so we need to position from right. right: 0, }, @@ -80,10 +80,10 @@ const useRootNavigatorOptions = () => { ...StyleUtils.getNavigationModalCardStyle(), // This is necessary to cover translated sidebar with overlay. - width: isSmallScreenWidth ? '100%' : '200%', + width: shouldUseNarrowLayout ? '100%' : '200%', // LHP should be displayed in place of the sidebar - left: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + left: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth, }, }, }, @@ -96,11 +96,11 @@ const useRootNavigatorOptions = () => { cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props}), cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth, // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable. - marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, - ...(isSmallScreenWidth ? {} : themeStyles.borderRight), + marginLeft: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth, + ...(shouldUseNarrowLayout ? {} : themeStyles.borderRight), }, }, }, @@ -108,14 +108,14 @@ const useRootNavigatorOptions = () => { fullScreen: { ...commonScreenOptions, // We need to turn off animation for the full screen to avoid delay when closing screens. - animation: isSmallScreenWidth ? Animations.SLIDE_FROM_RIGHT : Animations.NONE, + animation: shouldUseNarrowLayout ? Animations.SLIDE_FROM_RIGHT : Animations.NONE, web: { cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isFullScreenModal: true}), cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), // This is necessary to cover whole screen. Including translated sidebar. - marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, + marginLeft: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth, }, }, }, @@ -125,12 +125,12 @@ const useRootNavigatorOptions = () => { ...hideKeyboardOnSwipe, headerShown: false, title: CONFIG.SITE_TITLE, - animation: isSmallScreenWidth ? undefined : Animations.NONE, + animation: shouldUseNarrowLayout ? undefined : Animations.NONE, web: { cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isFullScreenModal: true}), cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), - paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth, + paddingRight: shouldUseNarrowLayout ? 0 : variables.sideBarWidth, }, }, }, @@ -141,11 +141,11 @@ const useRootNavigatorOptions = () => { cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props}), cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth, // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable. - marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth, - ...(isSmallScreenWidth ? {} : themeStyles.borderRight), + marginLeft: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth, + ...(shouldUseNarrowLayout ? {} : themeStyles.borderRight), }, }, }, From 8538b308ec64e1943e8df4aa885c4fb243206ccd Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 31 Oct 2024 15:24:39 +0100 Subject: [PATCH 030/381] fix: typo --- src/pages/workspace/tags/TagSettingsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/tags/TagSettingsPage.tsx b/src/pages/workspace/tags/TagSettingsPage.tsx index d1caf120d6db..cb37a6402490 100644 --- a/src/pages/workspace/tags/TagSettingsPage.tsx +++ b/src/pages/workspace/tags/TagSettingsPage.tsx @@ -188,7 +188,7 @@ function TagSettingsPage({route, navigation}: TagSettingsPageProps) { /> {approverDisabled && ( - {translate('workspace.rules.categoryRules.goTo')}{' '} + {translate('workspace.rules.categoryRules.goTo')} Navigation.navigate(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID))} From 00a9c75491b921bfcaccc80198d98025b2d337ba Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 31 Oct 2024 15:26:14 +0100 Subject: [PATCH 031/381] fix: unused onSubmit --- src/components/AttachmentModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 0bc233812ca7..b4d28c640bd8 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -486,7 +486,6 @@ function AttachmentModal({ <> { From 5485e44842a681099e0877766ab3450757faba3a Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Fri, 1 Nov 2024 16:01:29 +0100 Subject: [PATCH 032/381] add empty line at the end --- ios/Podfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Podfile b/ios/Podfile index 4d139711ef01..1d0b4dcfd901 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -122,4 +122,4 @@ target 'NotificationServiceExtension' do pod 'AppLogs', :path => '../node_modules/react-native-app-logs/AppLogsPod' end -pod 'FullStory', :http => 'https://ios-releases.fullstory.com/fullstory-1.52.0-xcframework.tar.gz' \ No newline at end of file +pod 'FullStory', :http => 'https://ios-releases.fullstory.com/fullstory-1.52.0-xcframework.tar.gz' From 059316a87b0b811b8c381d40fbca30d86ec807ae Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 1 Nov 2024 15:47:22 -0600 Subject: [PATCH 033/381] add approve and pay bulk actions --- src/CONST.ts | 2 ++ src/components/Search/SearchPageHeader.tsx | 40 ++++++++++++++++++++++ src/languages/en.ts | 2 ++ src/languages/es.ts | 2 ++ 4 files changed, 46 insertions(+) diff --git a/src/CONST.ts b/src/CONST.ts index f01c8a72eb8e..4771c21f0f49 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -5849,6 +5849,8 @@ const CONST = { }, BULK_ACTION_TYPES: { EXPORT: 'export', + APPROVE: 'approve', + PAY: 'pay', HOLD: 'hold', UNHOLD: 'unhold', DELETE: 'delete', diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 9fb19ff16288..a044339a2849 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -171,6 +171,46 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { const options: Array> = []; + const shouldShowApproveOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE); + + if (shouldShowApproveOption) { + options.push({ + icon: Expensicons.ThumbsUp, + text: translate('search.bulkActions.approve'), + value: CONST.SEARCH.BULK_ACTION_TYPES.APPROVE, + shouldCloseModalOnSelect: true, + onSelected: () => { + if (isOffline) { + setIsOfflineModalVisible(true); + return; + } + + const reportIDList = selectedReports?.filter((report) => !!report) ?? []; + SearchActions.approveMoneyRequestOnSearch(hash, reportIDList); + }, + }); + } + + const shouldShowPayOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.PAY); + + if (shouldShowPayOption) { + options.push({ + icon: Expensicons.MoneyBag, + text: translate('search.bulkActions.pay'), + value: CONST.SEARCH.BULK_ACTION_TYPES.PAY, + shouldCloseModalOnSelect: true, + onSelected: () => { + if (isOffline) { + setIsOfflineModalVisible(true); + return; + } + + const reportIDList = selectedReports?.filter((report) => !!report) ?? []; + // SearchActions.payMoneyRequestOnSearch(hash, reportIDList); + }, + }); + } + options.push({ icon: Expensicons.Download, text: translate('common.download'), diff --git a/src/languages/en.ts b/src/languages/en.ts index 03bbaf8ca8ab..a59913f1a3d1 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -4335,6 +4335,8 @@ const translations = { savedSearchesMenuItemTitle: 'Saved', groupedExpenses: 'grouped expenses', bulkActions: { + approve: 'Approve', + pay: 'Pay', delete: 'Delete', hold: 'Hold', unhold: 'Unhold', diff --git a/src/languages/es.ts b/src/languages/es.ts index 96921bd40388..f32868353517 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -4382,6 +4382,8 @@ const translations = { deleteSavedSearchConfirm: '¿Estás seguro de que quieres eliminar esta búsqueda?', groupedExpenses: 'gastos agrupados', bulkActions: { + approve: 'Aprobar', + pay: 'Pagar', delete: 'Eliminar', hold: 'Bloquear', unhold: 'Desbloquear', From 087a4d31ec5b56b91be4014500bbf11dce494219 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 1 Nov 2024 15:57:39 -0600 Subject: [PATCH 034/381] add data to selected transactions; --- src/components/Search/SearchPageHeader.tsx | 2 +- src/components/Search/index.tsx | 17 ++++++++++++++++- src/components/Search/types.ts | 6 ++++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index a044339a2849..78d23bd182a7 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -184,7 +184,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { setIsOfflineModalVisible(true); return; } - + console.log('over here', {selectedTransactions, selectedReports}) const reportIDList = selectedReports?.filter((report) => !!report) ?? []; SearchActions.approveMoneyRequestOnSearch(hash, reportIDList); }, diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 9238488361b0..e7caafefdd61 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -83,7 +83,18 @@ function prepareTransactionsList(item: TransactionListItemType, selectedTransact return transactions; } - return {...selectedTransactions, [item.keyForList]: {isSelected: true, canDelete: item.canDelete, canHold: item.canHold, canUnhold: item.canUnhold, action: item.action}}; + return { + ...selectedTransactions, + [item.keyForList]: { + isSelected: true, + canDelete: item.canDelete, + canHold: item.canHold, + canUnhold: item.canUnhold, + action: item.action, + reportID: item.reportID, + policyID: item.policyID, + }, + }; } function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchProps) { @@ -228,6 +239,8 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr canUnhold: transaction.canUnhold, isSelected: selectedTransactions[transaction.transactionID].isSelected, canDelete: transaction.canDelete, + reportID: transaction.reportID, + policyID: transaction.policyID, }; }); } else { @@ -245,6 +258,8 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr canUnhold: transaction.canUnhold, isSelected: selectedTransactions[transaction.transactionID].isSelected, canDelete: transaction.canDelete, + reportID: transaction.reportID, + policyID: transaction.policyID, }; }); }); diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index d5be896c1c50..ebbd82768d98 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -19,6 +19,12 @@ type SelectedTransactionInfo = { /** The action that can be performed for the transaction */ action: string; + + /** The reportID of the transaction */ + reportID: string; + + /** The policyID tied to the report the transaction is reported on */ + policyID: string; }; /** Model of selected results */ From 45e3944655a7835744d9601898d0699a4665942d Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 1 Nov 2024 16:16:33 -0600 Subject: [PATCH 035/381] get reportIDs --- src/components/Search/SearchPageHeader.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 78d23bd182a7..afb34cdea0a7 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -170,7 +170,6 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { } const options: Array> = []; - const shouldShowApproveOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE); if (shouldShowApproveOption) { @@ -184,8 +183,10 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { setIsOfflineModalVisible(true); return; } - console.log('over here', {selectedTransactions, selectedReports}) - const reportIDList = selectedReports?.filter((report) => !!report) ?? []; + + const reportIDList = !selectedReports.length + ? Object.values(selectedTransactions).map((transaction) => transaction.reportID) + : selectedReports?.filter((report) => !!report) ?? []; SearchActions.approveMoneyRequestOnSearch(hash, reportIDList); }, }); From 533f91e070f0cdc8513734143c373abde2fc8c05 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 4 Nov 2024 15:24:21 -0700 Subject: [PATCH 036/381] fix logic to show button --- src/components/Search/SearchContext.tsx | 10 +++++----- src/components/Search/SearchPageHeader.tsx | 13 ++++++++----- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx index f3206868d556..9a668a0ba44f 100644 --- a/src/components/Search/SearchContext.tsx +++ b/src/components/Search/SearchContext.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useContext, useMemo, useState} from 'react'; import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types'; +import {isMoneyRequestReport} from '@libs/ReportUtils'; import * as SearchUIUtils from '@libs/SearchUIUtils'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type {SearchContext, SelectedTransactions} from './types'; @@ -22,13 +23,12 @@ const Context = React.createContext(defaultSearchContext); function getReportsFromSelectedTransactions(data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[], selectedTransactions: SelectedTransactions) { return (data ?? []) .filter( - (item) => - !SearchUIUtils.isTransactionListItemType(item) && - !SearchUIUtils.isReportActionListItemType(item) && - item.reportID && + (item): item is ReportListItemType => + SearchUIUtils.isReportListItemType(item) && + isMoneyRequestReport(item) && item?.transactions?.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected), ) - .map((item) => item.reportID); + .map((item) => ({reportID: item.reportID, action: item.action})); } function SearchContextProvider({children}: ChildrenProps) { diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index afb34cdea0a7..5f72d47d5b12 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -170,8 +170,11 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { } const options: Array> = []; - const shouldShowApproveOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE); - + const shouldShowApproveOption = + !isOffline && + (selectedReports.length + ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.APPROVE) + : selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE)); if (shouldShowApproveOption) { options.push({ icon: Expensicons.ThumbsUp, @@ -186,7 +189,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { const reportIDList = !selectedReports.length ? Object.values(selectedTransactions).map((transaction) => transaction.reportID) - : selectedReports?.filter((report) => !!report) ?? []; + : selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? []; SearchActions.approveMoneyRequestOnSearch(hash, reportIDList); }, }); @@ -206,7 +209,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { return; } - const reportIDList = selectedReports?.filter((report) => !!report) ?? []; + const reportIDList = selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? []; // SearchActions.payMoneyRequestOnSearch(hash, reportIDList); }, }); @@ -223,7 +226,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { return; } - const reportIDList = selectedReports?.filter((report) => !!report) ?? []; + const reportIDList = selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? []; SearchActions.exportSearchItemsToCSV( {query: status, jsonQuery: JSON.stringify(queryJSON), reportIDList, transactionIDList: selectedTransactionsKeys, policyIDs: [activeWorkspaceID ?? '']}, () => { From 42f53104b99484347e6445ce51c5a268bcd3427c Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 4 Nov 2024 16:33:13 -0700 Subject: [PATCH 037/381] handle bulk pay --- src/components/Search/SearchContext.tsx | 3 ++- src/components/Search/SearchPageHeader.tsx | 26 ++++++++++++++---- src/components/Search/types.ts | 27 ++++++++++++++++--- .../PayMoneyRequestOnSearchParams.ts | 5 ++-- src/libs/actions/Search.ts | 10 +++---- 5 files changed, 53 insertions(+), 18 deletions(-) diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx index 9a668a0ba44f..7be80589ac50 100644 --- a/src/components/Search/SearchContext.tsx +++ b/src/components/Search/SearchContext.tsx @@ -2,6 +2,7 @@ import React, {useCallback, useContext, useMemo, useState} from 'react'; import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types'; import {isMoneyRequestReport} from '@libs/ReportUtils'; import * as SearchUIUtils from '@libs/SearchUIUtils'; +import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type {SearchContext, SelectedTransactions} from './types'; @@ -28,7 +29,7 @@ function getReportsFromSelectedTransactions(data: TransactionListItemType[] | Re isMoneyRequestReport(item) && item?.transactions?.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected), ) - .map((item) => ({reportID: item.reportID, action: item.action})); + .map((item) => ({reportID: item.reportID, action: item.action ?? CONST.SEARCH.ACTION_TYPES.VIEW, total: item.total ?? 0, policyID: item.policyID ?? ''})); } function SearchContextProvider({children}: ChildrenProps) { diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 5f72d47d5b12..9508e3285cc2 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -36,7 +36,7 @@ import type IconAsset from '@src/types/utils/IconAsset'; import {useSearchContext} from './SearchContext'; import SearchButton from './SearchRouter/SearchButton'; import SearchRouterInput from './SearchRouter/SearchRouterInput'; -import type {SearchQueryJSON} from './types'; +import type {PaymentData, SearchQueryJSON} from './types'; type HeaderWrapperProps = Pick & { text: string; @@ -132,6 +132,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST); const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES); const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS); + const [lastPaymentMethods = {}] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD); const [isDeleteExpensesConfirmModalVisible, setIsDeleteExpensesConfirmModalVisible] = useState(false); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false); @@ -175,6 +176,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { (selectedReports.length ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.APPROVE) : selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE)); + if (shouldShowApproveOption) { options.push({ icon: Expensicons.ThumbsUp, @@ -195,7 +197,13 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { }); } - const shouldShowPayOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.PAY); + const shouldShowPayOption = + !isOffline && + (selectedReports.length + ? selectedReports.every((report) => report.action === CONST.SEARCH.ACTION_TYPES.PAY && report.policyID && lastPaymentMethods[report.policyID]) + : selectedTransactionsKeys.every( + (id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.PAY && selectedTransactions[id].policyID && lastPaymentMethods[selectedTransactions[id].policyID], + )); if (shouldShowPayOption) { options.push({ @@ -208,9 +216,17 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { setIsOfflineModalVisible(true); return; } - - const reportIDList = selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? []; - // SearchActions.payMoneyRequestOnSearch(hash, reportIDList); + const paymentData = ( + selectedReports.length + ? selectedReports.map((report) => ({reportID: report.reportID, amount: report.total, paymentMethod: lastPaymentMethods[report.policyID]})) + : Object.values(selectedTransactions).map((transaction) => ({ + reportID: transaction.reportID, + amount: transaction.amount, + paymentMethod: lastPaymentMethods[transaction.policyID] + })) + ) as PaymentData[]; + + SearchActions.payMoneyRequestOnSearch(hash, paymentData); }, }); } diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index ebbd82768d98..9b97ac446d5b 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -1,7 +1,7 @@ import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils'; import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types'; import type CONST from '@src/CONST'; -import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults'; +import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; /** Model of the selected transaction */ type SelectedTransactionInfo = { @@ -18,18 +18,36 @@ type SelectedTransactionInfo = { canUnhold: boolean; /** The action that can be performed for the transaction */ - action: string; + action: ValueOf; /** The reportID of the transaction */ reportID: string; /** The policyID tied to the report the transaction is reported on */ policyID: string; + + /** The transaction amount */ + amount: number; }; -/** Model of selected results */ +/** Model of selected transactons */ type SelectedTransactions = Record; +/** Model of selected reports */ +type SelectedReports = { + reportID: string; + policyID: string; + action: ValueOf; + total: number; +}; + +/** Model of payment data used by Search bulk actions */ +type PaymentData = { + reportID: string; + amount: number; + paymentMethod: ValueOf; +}; + type SortOrder = ValueOf; type SearchColumnType = ValueOf; type ExpenseSearchStatus = ValueOf; @@ -41,7 +59,7 @@ type SearchStatus = ExpenseSearchStatus | InvoiceSearchStatus | TripSearchStatus type SearchContext = { currentSearchHash: number; selectedTransactions: SelectedTransactions; - selectedReports: Array; + selectedReports: SelectedReports[]; setCurrentSearchHash: (hash: number) => void; setSelectedTransactions: (selectedTransactions: SelectedTransactions, data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[]) => void; clearSelectedTransactions: (hash?: number) => void; @@ -118,4 +136,5 @@ export type { ChatSearchStatus, SearchAutocompleteResult, AutocompleteRange, + PaymentData, }; diff --git a/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts b/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts index 10174f0baa37..ee51a1961448 100644 --- a/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts +++ b/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts @@ -1,11 +1,10 @@ type PayMoneyRequestOnSearchParams = { hash: number; - paymentType: string; /** * Stringified JSON object with type of following structure: - * Array<{reportID: string, amount: number}> + * Array<{reportID: string, amount: number, paymentMethod: string}> */ - reportsAndAmounts: string; + paymentData: string; }; export default PayMoneyRequestOnSearchParams; diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index 556fe76df4d1..dca82a66fd9c 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -2,7 +2,7 @@ import Onyx from 'react-native-onyx'; import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import type {FormOnyxValues} from '@components/Form/types'; -import type {SearchQueryJSON} from '@components/Search/types'; +import type {PaymentData, SearchQueryJSON} from '@components/Search/types'; import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types'; import * as API from '@libs/API'; import type {ExportSearchItemsToCSVParams} from '@libs/API/parameters'; @@ -35,11 +35,11 @@ Onyx.connect({ }); function handleActionButtonPress(hash: number, item: TransactionListItemType | ReportListItemType, goToItem: () => void) { - const lastPolicyPaymentMethod = item.policyID ? lastPaymentMethod?.[item.policyID] : null; + const lastPolicyPaymentMethod = item.policyID ? (lastPaymentMethod?.[item.policyID] as ValueOf) : null; const amount = isReportListItemType(item) ? item.total ?? 0 : item.formattedTotal; switch (item.action) { case CONST.SEARCH.ACTION_TYPES.PAY: - return lastPolicyPaymentMethod ? payMoneyRequestOnSearch(hash, lastPolicyPaymentMethod, {[item.reportID]: amount}) : goToItem(); + return lastPolicyPaymentMethod ? payMoneyRequestOnSearch(hash, [{reportID: item.reportID, amount, paymentMethod: lastPolicyPaymentMethod}]) : goToItem(); case CONST.SEARCH.ACTION_TYPES.APPROVE: return approveMoneyRequestOnSearch(hash, [item.reportID]); default: @@ -194,10 +194,10 @@ function approveMoneyRequestOnSearch(hash: number, reportIDList: string[]) { API.write(WRITE_COMMANDS.APPROVE_MONEY_REQUEST_ON_SEARCH, {hash, reportIDList}, {optimisticData, finallyData}); } -function payMoneyRequestOnSearch(hash: number, paymentType: string, reportsAndAmounts: Record) { +function payMoneyRequestOnSearch(hash: number, paymentData: PaymentData[]) { const {optimisticData, finallyData} = getOnyxLoadingData(hash); - API.write(WRITE_COMMANDS.PAY_MONEY_REQUEST_ON_SEARCH, {hash, paymentType, reportsAndAmounts: JSON.stringify(reportsAndAmounts)}, {optimisticData, finallyData}); + API.write(WRITE_COMMANDS.PAY_MONEY_REQUEST_ON_SEARCH, {hash, paymentData: JSON.stringify(paymentData)}, {optimisticData, finallyData}); } function unholdMoneyRequestOnSearch(hash: number, transactionIDList: string[]) { From 543d7486746ede0bc41776b6647d4b099eeddb6a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 4 Nov 2024 16:35:49 -0700 Subject: [PATCH 038/381] fix lint --- src/components/Search/SearchPageHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 9508e3285cc2..74735b3d7bbc 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -222,7 +222,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { : Object.values(selectedTransactions).map((transaction) => ({ reportID: transaction.reportID, amount: transaction.amount, - paymentMethod: lastPaymentMethods[transaction.policyID] + paymentMethod: lastPaymentMethods[transaction.policyID], })) ) as PaymentData[]; From 6970f3edddbfef11ae0f2efb06dac7eb23ccef6e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 4 Nov 2024 16:48:21 -0700 Subject: [PATCH 039/381] fix ts --- src/components/Search/index.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index e7caafefdd61..ce9eab45a9d7 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -49,7 +49,19 @@ const searchHeaderHeight = 54; const sortableSearchStatuses: SearchStatus[] = [CONST.SEARCH.STATUS.EXPENSE.ALL]; function mapTransactionItemToSelectedEntry(item: TransactionListItemType): [string, SelectedTransactionInfo] { - return [item.keyForList, {isSelected: true, canDelete: item.canDelete, canHold: item.canHold, canUnhold: item.canUnhold, action: item.action}]; + return [ + item.keyForList, + { + isSelected: true, + canDelete: item.canDelete, + canHold: item.canHold, + canUnhold: item.canUnhold, + action: item.action, + reportID: item.reportID, + policyID: item.policyID, + amount: item.modifiedAmount ?? item.amount, + }, + ]; } function mapToTransactionItemWithSelectionInfo(item: TransactionListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) { @@ -93,6 +105,7 @@ function prepareTransactionsList(item: TransactionListItemType, selectedTransact action: item.action, reportID: item.reportID, policyID: item.policyID, + amount: item.modifiedAmount ?? item.amount, }, }; } @@ -241,6 +254,7 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr canDelete: transaction.canDelete, reportID: transaction.reportID, policyID: transaction.policyID, + amount: transaction.modifiedAmount ?? transaction.amount, }; }); } else { @@ -260,6 +274,7 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr canDelete: transaction.canDelete, reportID: transaction.reportID, policyID: transaction.policyID, + amount: transaction.modifiedAmount ?? transaction.amount, }; }); }); From 700bfc8813ec242cf8a1d9dfcaa756e56af6ab6e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 4 Nov 2024 16:50:33 -0700 Subject: [PATCH 040/381] update dependency array --- src/components/Search/SearchPageHeader.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 74735b3d7bbc..dc3efae4bdbc 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -341,6 +341,7 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { activeWorkspaceID, selectedReports, styles.textWrap, + lastPaymentMethods, ]); if (shouldUseNarrowLayout) { From 51eea863651c5506e80f13e1a9bd70e00fbf4060 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Nov 2024 12:05:23 +0100 Subject: [PATCH 041/381] Initial work on updating reanimated --- package-lock.json | 9 +- package.json | 2 +- .../AttachmentCarousel/Pager/index.tsx | 7 +- .../useCarouselContextEvents.ts | 9 +- .../AttachmentViewPdf/index.android.tsx | 24 +-- .../BaseAutoCompleteSuggestions.tsx | 31 ++-- .../AvatarCropModal/AvatarCropModal.tsx | 149 ++++++++---------- src/components/FloatingActionButton.tsx | 17 +- src/components/OpacityView.tsx | 9 +- src/components/SpacerView.tsx | 11 +- 10 files changed, 128 insertions(+), 140 deletions(-) diff --git a/package-lock.json b/package-lock.json index d2f927adf13f..cf21c105a4ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -104,7 +104,7 @@ "react-native-plaid-link-sdk": "11.11.0", "react-native-qrcode-svg": "6.3.11", "react-native-quick-sqlite": "git+https://github.com/margelo/react-native-quick-sqlite#99f34ebefa91698945f3ed26622e002bd79489e0", - "react-native-reanimated": "3.15.1", + "react-native-reanimated": "^3.16.1", "react-native-release-profiler": "^0.2.1", "react-native-render-html": "6.3.1", "react-native-safe-area-context": "4.10.9", @@ -35626,9 +35626,10 @@ } }, "node_modules/react-native-reanimated": { - "version": "3.15.1", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.15.1.tgz", - "integrity": "sha512-DbBeUUExtJ1x1nfE94I8qgDgWjq5ztM3IO/+XFO+agOkPeVpBs5cRnxHfJKrjqJ2MgwhJOUDmtHxo+tDsoeitg==", + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.1.tgz", + "integrity": "sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ==", + "license": "MIT", "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", diff --git a/package.json b/package.json index 9620386b5560..6b22e123c174 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "react-native-plaid-link-sdk": "11.11.0", "react-native-qrcode-svg": "6.3.11", "react-native-quick-sqlite": "git+https://github.com/margelo/react-native-quick-sqlite#99f34ebefa91698945f3ed26622e002bd79489e0", - "react-native-reanimated": "3.15.1", + "react-native-reanimated": "^3.16.1", "react-native-release-profiler": "^0.2.1", "react-native-render-html": "6.3.1", "react-native-safe-area-context": "4.10.9", diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx index 6fe32050b6d5..68a12c4cd76e 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx @@ -70,14 +70,13 @@ function AttachmentCarouselPager( const pageScrollHandler = usePageScrollHandler((e) => { 'worklet'; - // eslint-disable-next-line react-compiler/react-compiler - activePage.value = e.position; - isPagerScrolling.value = e.offset !== 0; + activePage.set(e.position); + isPagerScrolling.set(e.offset !== 0); }, []); useEffect(() => { setActivePageIndex(initialPage); - activePage.value = initialPage; + activePage.set(initialPage); }, [activePage, initialPage]); /** The `pagerItems` object that passed down to the context. Later used to detect current page, whether it's a single image gallery etc. */ diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts index 1c54d7841347..3311f6476194 100644 --- a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts +++ b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts @@ -35,12 +35,11 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction { - if (!isScrollEnabled.value) { + if (!isScrollEnabled.get()) { return; } onRequestToggleArrows(); - }, [isScrollEnabled.value, onRequestToggleArrows]); + }, [isScrollEnabled, onRequestToggleArrows]); return {handleTap, handleScaleChange, scale, isScrollEnabled}; } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx index c6e7984b793f..c756345664cc 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx @@ -32,32 +32,32 @@ function AttachmentViewPdf(props: AttachmentViewPdfProps) { const Pan = Gesture.Pan() .manualActivation(true) .onTouchesMove((evt) => { - if (offsetX.value !== 0 && offsetY.value !== 0 && isScrollEnabled && scale.value === 1) { - const translateX = Math.abs((evt.allTouches.at(0)?.absoluteX ?? 0) - offsetX.value); - const translateY = Math.abs((evt.allTouches.at(0)?.absoluteY ?? 0) - offsetY.value); - const allowEnablingScroll = !isPanGestureActive.value || isScrollEnabled.value; + if (offsetX.get() !== 0 && offsetY.get() !== 0 && isScrollEnabled && scale.get() === 1) { + const translateX = Math.abs((evt.allTouches.at(0)?.absoluteX ?? 0) - offsetX.get()); + const translateY = Math.abs((evt.allTouches.at(0)?.absoluteY ?? 0) - offsetY.get()); + const allowEnablingScroll = !isPanGestureActive.get() || isScrollEnabled.get(); // if the value of X is greater than Y and the pdf is not zoomed in, // enable the pager scroll so that the user // can swipe to the next attachment otherwise disable it. if (translateX > translateY && translateX > SCROLL_THRESHOLD && allowEnablingScroll) { // eslint-disable-next-line react-compiler/react-compiler - isScrollEnabled.value = true; + isScrollEnabled.set(true); } else if (translateY > SCROLL_THRESHOLD) { - isScrollEnabled.value = false; + isScrollEnabled.set(false); } } - isPanGestureActive.value = true; - offsetX.value = evt.allTouches.at(0)?.absoluteX ?? 0; - offsetY.value = evt.allTouches.at(0)?.absoluteY ?? 0; + isPanGestureActive.set(true); + offsetX.set(evt.allTouches.at(0)?.absoluteX ?? 0); + offsetY.set(evt.allTouches.at(0)?.absoluteY ?? 0); }) .onTouchesUp(() => { - isPanGestureActive.value = false; + isPanGestureActive.set(false); if (!isScrollEnabled) { return; } - isScrollEnabled.value = scale.value === 1; + isScrollEnabled.set(scale.get() === 1); }); const Content = useMemo( @@ -69,7 +69,7 @@ function AttachmentViewPdf(props: AttachmentViewPdfProps) { // The react-native-pdf's onScaleChanged event will sometimes give us scale values of e.g. 0.99... instead of 1, // even though we're not pinching/zooming // Rounding the scale value to 2 decimal place fixes this issue, since pinching will still be possible but very small pinches are ignored. - scale.value = Math.round(newScale * 1e2) / 1e2; + scale.set(Math.round(newScale * 1e2) / 1e2); }} /> ), diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 2d22a2560bb0..abc221ed646a 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -50,24 +50,27 @@ function BaseAutoCompleteSuggestions({ const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length; const animatedStyles = useAnimatedStyle(() => ({ - opacity: fadeInOpacity.value, - ...StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value), + opacity: fadeInOpacity.get(), + ...StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.get()), })); useEffect(() => { if (measuredHeightOfSuggestionRows === prevRowHeightRef.current) { - // eslint-disable-next-line react-compiler/react-compiler - fadeInOpacity.value = withTiming(1, { - duration: 70, - easing: Easing.inOut(Easing.ease), - }); - rowHeight.value = measuredHeightOfSuggestionRows; + fadeInOpacity.set( + withTiming(1, { + duration: 70, + easing: Easing.inOut(Easing.ease), + }), + ); + rowHeight.set(measuredHeightOfSuggestionRows); } else { - fadeInOpacity.value = 1; - rowHeight.value = withTiming(measuredHeightOfSuggestionRows, { - duration: 100, - easing: Easing.bezier(0.25, 0.1, 0.25, 1), - }); + fadeInOpacity.set(1); + rowHeight.set( + withTiming(measuredHeightOfSuggestionRows, { + duration: 100, + easing: Easing.bezier(0.25, 0.1, 0.25, 1), + }), + ); } prevRowHeightRef.current = measuredHeightOfSuggestionRows; @@ -103,7 +106,7 @@ function BaseAutoCompleteSuggestions({ renderItem={renderItem} keyExtractor={keyExtractor} removeClippedSubviews={false} - showsVerticalScrollIndicator={innerHeight > rowHeight.value} + showsVerticalScrollIndicator={innerHeight > rowHeight.get()} extraData={[highlightedSuggestionIndex, renderSuggestionMenuItem]} /> diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index dca0d08d11d5..a3c4cdca78bf 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.tsx @@ -97,16 +97,16 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose // Changes the modal state values to initial const resetState = useCallback(() => { - originalImageWidth.value = CONST.AVATAR_CROP_MODAL.INITIAL_SIZE; - originalImageHeight.value = CONST.AVATAR_CROP_MODAL.INITIAL_SIZE; - translateY.value = 0; - translateX.value = 0; - scale.value = CONST.AVATAR_CROP_MODAL.MIN_SCALE; - rotation.value = 0; - translateSlider.value = 0; - prevMaxOffsetX.value = 0; - prevMaxOffsetY.value = 0; - isLoading.value = false; + originalImageWidth.set(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE); + originalImageHeight.set(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE); + translateY.set(0); + translateX.set(0); + scale.set(CONST.AVATAR_CROP_MODAL.MIN_SCALE); + rotation.set(0); + translateSlider.set(0); + prevMaxOffsetX.set(0); + prevMaxOffsetY.set(0); + isLoading.set(false); setImageContainerSize(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE); setSliderContainerSize(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE); setIsImageContainerInitialized(false); @@ -123,12 +123,11 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose ImageSize.getSize(imageUri).then(({width, height, rotation: orginalRotation}) => { // On Android devices ImageSize library returns also rotation parameter. if (orginalRotation === 90 || orginalRotation === 270) { - // eslint-disable-next-line react-compiler/react-compiler - originalImageHeight.value = width; - originalImageWidth.value = height; + originalImageHeight.set(width); + originalImageWidth.set(height); } else { - originalImageHeight.value = height; - originalImageWidth.value = width; + originalImageHeight.set(height); + originalImageWidth.set(width); } setIsImageInitialized(true); @@ -136,8 +135,8 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose // Because the reanimated library has some internal optimizations, // sometimes when the modal is hidden styles of the image and slider might not be updated. // To trigger the update we need to slightly change the following values: - translateSlider.value += 0.01; - rotation.value += 360; + translateSlider.set((value) => value + 0.01); + rotation.set((value) => value + 360); }); }, [imageUri, originalImageHeight, originalImageWidth, rotation, translateSlider]); @@ -150,15 +149,15 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose * Returns current image size taking into account scale and rotation. */ const getDisplayedImageSize = useWorkletCallback(() => { - let height = imageContainerSize * scale.value; - let width = imageContainerSize * scale.value; + let height = imageContainerSize * scale.get(); + let width = imageContainerSize * scale.get(); // Since the smaller side will be always equal to the imageContainerSize multiplied by scale, // another side can be calculated with aspect ratio. - if (originalImageWidth.value > originalImageHeight.value) { - width *= originalImageWidth.value / originalImageHeight.value; + if (originalImageWidth.get() > originalImageHeight.get()) { + width *= originalImageWidth.get() / originalImageHeight.get(); } else { - height *= originalImageHeight.value / originalImageWidth.value; + height *= originalImageHeight.get() / originalImageWidth.get(); } return {height, width}; @@ -172,10 +171,10 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose const {height, width} = getDisplayedImageSize(); const maxOffsetX = (width - imageContainerSize) / 2; const maxOffsetY = (height - imageContainerSize) / 2; - translateX.value = clamp(offsetX, [maxOffsetX * -1, maxOffsetX]); - translateY.value = clamp(offsetY, [maxOffsetY * -1, maxOffsetY]); - prevMaxOffsetX.value = maxOffsetX; - prevMaxOffsetY.value = maxOffsetY; + translateX.set(clamp(offsetX, [maxOffsetX * -1, maxOffsetX])); + translateY.set(clamp(offsetY, [maxOffsetY * -1, maxOffsetY])); + prevMaxOffsetX.set(maxOffsetX); + prevMaxOffsetY.set(maxOffsetY); }, [imageContainerSize, scale, clamp], ); @@ -190,8 +189,8 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose * and updates image's offset. */ const panGesture = Gesture.Pan().onChange((event) => { - const newX = translateX.value + event.changeX; - const newY = translateY.value + event.changeY; + const newX = translateX.get() + event.changeX; + const newY = translateY.get() + event.changeY; updateImageOffset(newX, newY); }); @@ -200,7 +199,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose // when the browser window is resized. useEffect(() => { // If no panning has happened and the value is 0, do an early return. - if (!prevMaxOffsetX.value && !prevMaxOffsetY.value) { + if (!prevMaxOffsetX.get() && !prevMaxOffsetY.get()) { return; } const {height, width} = getDisplayedImageSize(); @@ -210,14 +209,14 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose // Since interpolation is expensive, we only want to do it if // image has been panned across X or Y axis by the user. if (prevMaxOffsetX) { - translateX.value = interpolate(translateX.value, [prevMaxOffsetX.value * -1, prevMaxOffsetX.value], [maxOffsetX * -1, maxOffsetX]); + translateX.set(interpolate(translateX.get(), [prevMaxOffsetX.get() * -1, prevMaxOffsetX.get()], [maxOffsetX * -1, maxOffsetX])); } if (prevMaxOffsetY) { - translateY.value = interpolate(translateY.value, [prevMaxOffsetY.value * -1, prevMaxOffsetY.value], [maxOffsetY * -1, maxOffsetY]); + translateY.set(interpolate(translateY.get(), [prevMaxOffsetY.get() * -1, prevMaxOffsetY.get()], [maxOffsetY * -1, maxOffsetY])); } - prevMaxOffsetX.value = maxOffsetX; - prevMaxOffsetY.value = maxOffsetY; + prevMaxOffsetX.set(maxOffsetX); + prevMaxOffsetY.set(maxOffsetY); }, [getDisplayedImageSize, imageContainerSize, prevMaxOffsetX, prevMaxOffsetY, translateX, translateY]); /** @@ -228,65 +227,72 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose onBegin: () => { 'worklet'; - isPressableEnabled.value = false; + isPressableEnabled.set(false); }, onChange: (event: GestureUpdateEvent) => { 'worklet'; - const newSliderValue = clamp(translateSlider.value + event.changeX, [0, sliderContainerSize]); + const newSliderValue = clamp(translateSlider.get() + event.changeX, [0, sliderContainerSize]); const newScale = newScaleValue(newSliderValue, sliderContainerSize); - const differential = newScale / scale.value; + const differential = newScale / scale.get(); - scale.value = newScale; - translateSlider.value = newSliderValue; + scale.set(newScale); + translateSlider.set(newSliderValue); - const newX = translateX.value * differential; - const newY = translateY.value * differential; + const newX = translateX.get() * differential; + const newY = translateY.get() * differential; updateImageOffset(newX, newY); }, onFinalize: () => { 'worklet'; - isPressableEnabled.value = true; + isPressableEnabled.set(true); }, }; // This effect is needed to prevent the incorrect position of // the slider's knob when the window's layout changes useEffect(() => { - translateSlider.value = interpolate(scale.value, [CONST.AVATAR_CROP_MODAL.MIN_SCALE, CONST.AVATAR_CROP_MODAL.MAX_SCALE], [0, sliderContainerSize]); - }, [scale.value, sliderContainerSize, translateSlider]); + translateSlider.set(interpolate(scale.get(), [CONST.AVATAR_CROP_MODAL.MIN_SCALE, CONST.AVATAR_CROP_MODAL.MAX_SCALE], [0, sliderContainerSize])); + }, [scale, sliderContainerSize, translateSlider]); // Rotates the image by changing the rotation value by 90 degrees // and updating the position so the image remains in the same place after rotation const rotateImage = useCallback(() => { - rotation.value -= 90; + rotation.set((value) => value - 90); + + const oldX = translateX.get(); + const oldY = translateY.get(); + const oldHeight = originalImageHeight.get(); + const oldWidth = originalImageWidth.get(); // Rotating 2d coordinates by applying the formula (x, y) → (-y, x). - [translateX.value, translateY.value] = [translateY.value, translateX.value * -1]; + translateX.set(oldY); + translateY.set(oldX * -1); // Since we rotated the image by 90 degrees, now width becomes height and vice versa. - [originalImageHeight.value, originalImageWidth.value] = [originalImageWidth.value, originalImageHeight.value]; - }, [originalImageHeight.value, originalImageWidth.value, rotation, translateX.value, translateY.value]); + originalImageHeight.set(oldWidth); + originalImageWidth.set(oldHeight); + }, [originalImageHeight, originalImageWidth, rotation, translateX, translateY]); // Crops an image that was provided in the imageUri prop, using the current position/scale // then calls onSave and onClose callbacks const cropAndSaveImage = useCallback(() => { - if (isLoading.value) { + if (isLoading.get()) { return; } - isLoading.value = true; - const smallerSize = Math.min(originalImageHeight.value, originalImageWidth.value); - const size = smallerSize / scale.value; - const imageCenterX = originalImageWidth.value / 2; - const imageCenterY = originalImageHeight.value / 2; + isLoading.set(true); + const smallerSize = Math.min(originalImageHeight.get(), originalImageWidth.get()); + const size = smallerSize / scale.get(); + const imageCenterX = originalImageWidth.get() / 2; + const imageCenterY = originalImageHeight.get() / 2; const apothem = size / 2; // apothem for squares is equals to half of it size // Since the translate value is only a distance from the image center, we are able to calculate // the originX and the originY - start coordinates of cropping view. - const originX = imageCenterX - apothem - (translateX.value / imageContainerSize / scale.value) * smallerSize; - const originY = imageCenterY - apothem - (translateY.value / imageContainerSize / scale.value) * smallerSize; + const originX = imageCenterX - apothem - (translateX.get() / imageContainerSize / scale.get()) * smallerSize; + const originY = imageCenterY - apothem - (translateY.get() / imageContainerSize / scale.get()) * smallerSize; const crop = { height: size, @@ -301,29 +307,15 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose const name = isSvg ? 'fileName.png' : imageName; const type = isSvg ? 'image/png' : imageType; - cropOrRotateImage(imageUri, [{rotate: rotation.value % 360}, {crop}], {compress: 1, name, type}) + cropOrRotateImage(imageUri, [{rotate: rotation.get() % 360}, {crop}], {compress: 1, name, type}) .then((newImage) => { onClose?.(); onSave?.(newImage); }) .catch(() => { - isLoading.value = false; + isLoading.set(false); }); - }, [ - imageUri, - imageName, - imageType, - onClose, - onSave, - originalImageHeight.value, - originalImageWidth.value, - scale.value, - translateX.value, - imageContainerSize, - translateY.value, - rotation.value, - isLoading, - ]); + }, [isLoading, originalImageHeight, originalImageWidth, scale, translateX, imageContainerSize, translateY, imageType, imageName, imageUri, rotation, onClose, onSave]); const sliderOnPress = (locationX: number) => { // We are using the worklet directive here and running on the UI thread to ensure the Reanimated @@ -331,17 +323,16 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose 'worklet'; - if (!locationX || !isPressableEnabled.value) { + if (!locationX || !isPressableEnabled.get()) { return; } const newSliderValue = clamp(locationX, [0, sliderContainerSize]); const newScale = newScaleValue(newSliderValue, sliderContainerSize); - // eslint-disable-next-line react-compiler/react-compiler - translateSlider.value = newSliderValue; - const differential = newScale / scale.value; - scale.value = newScale; - const newX = translateX.value * differential; - const newY = translateY.value * differential; + translateSlider.set(newSliderValue); + const differential = newScale / scale.get(); + scale.set(newScale); + const newX = translateX.get() * differential; + const newY = translateY.get() * differential; updateImageOffset(newX, newY); }; diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx index ecf72f89134b..3c831301db8b 100644 --- a/src/components/FloatingActionButton.tsx +++ b/src/components/FloatingActionButton.tsx @@ -60,18 +60,19 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo const buttonRef = ref; useEffect(() => { - // eslint-disable-next-line react-compiler/react-compiler - sharedValue.value = withTiming(isActive ? 1 : 0, { - duration: 340, - easing: Easing.inOut(Easing.ease), - }); + sharedValue.set( + withTiming(isActive ? 1 : 0, { + duration: 340, + easing: Easing.inOut(Easing.ease), + }), + ); }, [isActive, sharedValue]); const animatedStyle = useAnimatedStyle(() => { - const backgroundColor = interpolateColor(sharedValue.value, [0, 1], [success, buttonDefaultBG]); + const backgroundColor = interpolateColor(sharedValue.get(), [0, 1], [success, buttonDefaultBG]); return { - transform: [{rotate: `${sharedValue.value * 135}deg`}], + transform: [{rotate: `${sharedValue.get() * 135}deg`}], backgroundColor, borderRadius, }; @@ -79,7 +80,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo const animatedProps = useAnimatedProps( () => { - const fill = interpolateColor(sharedValue.value, [0, 1], [textLight, textDark]); + const fill = interpolateColor(sharedValue.get(), [0, 1], [textLight, textDark]); return { fill, diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index f4884fd3c0f8..6c7aa26d05ba 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -44,16 +44,11 @@ function OpacityView({ }: OpacityViewProps) { const opacity = useSharedValue(1); const opacityStyle = useAnimatedStyle(() => ({ - opacity: opacity.value, + opacity: opacity.get(), })); React.useEffect(() => { - if (shouldDim) { - // eslint-disable-next-line react-compiler/react-compiler - opacity.value = withTiming(dimmingValue, {duration: dimAnimationDuration}); - } else { - opacity.value = withTiming(1, {duration: dimAnimationDuration}); - } + opacity.set(withTiming(shouldDim ? dimmingValue : 1, {duration: dimAnimationDuration})); }, [shouldDim, dimmingValue, opacity, dimAnimationDuration]); return ( diff --git a/src/components/SpacerView.tsx b/src/components/SpacerView.tsx index bb762da1226b..3ca874e8f260 100644 --- a/src/components/SpacerView.tsx +++ b/src/components/SpacerView.tsx @@ -22,9 +22,9 @@ function SpacerView({shouldShow, style}: SpacerViewProps) { const prevShouldShow = usePrevious(shouldShow); const duration = CONST.ANIMATED_TRANSITION; const animatedStyles = useAnimatedStyle(() => ({ - borderBottomWidth: withTiming(borderBottomWidth.value, {duration}), - marginTop: withTiming(marginVertical.value, {duration}), - marginBottom: withTiming(marginVertical.value, {duration}), + borderBottomWidth: withTiming(borderBottomWidth.get(), {duration}), + marginTop: withTiming(marginVertical.get(), {duration}), + marginBottom: withTiming(marginVertical.get(), {duration}), })); React.useEffect(() => { @@ -35,9 +35,8 @@ function SpacerView({shouldShow, style}: SpacerViewProps) { marginVertical: shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL, borderBottomWidth: shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH, }; - // eslint-disable-next-line react-compiler/react-compiler - marginVertical.value = values.marginVertical; - borderBottomWidth.value = values.borderBottomWidth; + marginVertical.set(values.marginVertical); + borderBottomWidth.set(values.borderBottomWidth); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we only need to trigger when shouldShow prop is changed }, [shouldShow, prevShouldShow]); From f473d06bf18cc97b09e64821e716d6441fc29211 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Nov 2024 12:51:05 +0100 Subject: [PATCH 042/381] Fix patches --- ...ive-reanimated+3.15.1+003+fixNullViewTag.patch | 15 --------------- ...native-reanimated+3.16.1+001+hybrid-app.patch} | 4 ++-- ...imated+3.16.1+002+dontWhitelistTextProp.patch} | 0 3 files changed, 2 insertions(+), 17 deletions(-) delete mode 100644 patches/react-native-reanimated+3.15.1+003+fixNullViewTag.patch rename patches/{react-native-reanimated+3.15.1+001+hybrid-app.patch => react-native-reanimated+3.16.1+001+hybrid-app.patch} (91%) rename patches/{react-native-reanimated+3.15.1+002+dontWhitelistTextProp.patch => react-native-reanimated+3.16.1+002+dontWhitelistTextProp.patch} (100%) diff --git a/patches/react-native-reanimated+3.15.1+003+fixNullViewTag.patch b/patches/react-native-reanimated+3.15.1+003+fixNullViewTag.patch deleted file mode 100644 index ca982c6f8036..000000000000 --- a/patches/react-native-reanimated+3.15.1+003+fixNullViewTag.patch +++ /dev/null @@ -1,15 +0,0 @@ -diff --git a/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx -index 577b4a7..c60f0f8 100644 ---- a/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx -+++ b/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx -@@ -481,7 +481,9 @@ export function createAnimatedComponent( - ? (ref as HTMLElement) - : findNodeHandle(ref as Component); - -- this._componentViewTag = tag as number; -+ if (tag !== null) { -+ this._componentViewTag = tag as number; -+ } - - const { layout, entering, exiting, sharedTransitionTag } = this.props; - if ( diff --git a/patches/react-native-reanimated+3.15.1+001+hybrid-app.patch b/patches/react-native-reanimated+3.16.1+001+hybrid-app.patch similarity index 91% rename from patches/react-native-reanimated+3.15.1+001+hybrid-app.patch rename to patches/react-native-reanimated+3.16.1+001+hybrid-app.patch index 3b40360d5860..835df1f034a9 100644 --- a/patches/react-native-reanimated+3.15.1+001+hybrid-app.patch +++ b/patches/react-native-reanimated+3.16.1+001+hybrid-app.patch @@ -1,9 +1,9 @@ diff --git a/node_modules/react-native-reanimated/scripts/reanimated_utils.rb b/node_modules/react-native-reanimated/scripts/reanimated_utils.rb -index af0935f..ccd2a9e 100644 +index 9fc7b15..e453d84 100644 --- a/node_modules/react-native-reanimated/scripts/reanimated_utils.rb +++ b/node_modules/react-native-reanimated/scripts/reanimated_utils.rb @@ -17,7 +17,11 @@ def find_config() - :react_native_common_dir => nil, + :react_native_reanimated_dir_from_pods_root => nil, } - react_native_node_modules_dir = File.join(File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native/package.json')"`), '..') diff --git a/patches/react-native-reanimated+3.15.1+002+dontWhitelistTextProp.patch b/patches/react-native-reanimated+3.16.1+002+dontWhitelistTextProp.patch similarity index 100% rename from patches/react-native-reanimated+3.15.1+002+dontWhitelistTextProp.patch rename to patches/react-native-reanimated+3.16.1+002+dontWhitelistTextProp.patch From 4ac36b19b9d92c8a16679beb819e572f06f75354 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Nov 2024 12:52:08 +0100 Subject: [PATCH 043/381] Improve performance of rotateImage --- .../AvatarCropModal/AvatarCropModal.tsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index a3c4cdca78bf..44ae528c425a 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.tsx @@ -260,20 +260,17 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose // Rotates the image by changing the rotation value by 90 degrees // and updating the position so the image remains in the same place after rotation const rotateImage = useCallback(() => { - rotation.set((value) => value - 90); + runOnUI(() => { + rotation.set((value) => value - 90); - const oldX = translateX.get(); - const oldY = translateY.get(); - const oldHeight = originalImageHeight.get(); - const oldWidth = originalImageWidth.get(); + const oldTranslateX = translateX.get(); + translateX.set(translateY.get()); + translateY.set(oldTranslateX * -1); - // Rotating 2d coordinates by applying the formula (x, y) → (-y, x). - translateX.set(oldY); - translateY.set(oldX * -1); - - // Since we rotated the image by 90 degrees, now width becomes height and vice versa. - originalImageHeight.set(oldWidth); - originalImageWidth.set(oldHeight); + const oldOriginalImageHeight = originalImageHeight.get(); + originalImageHeight.set(originalImageWidth.get()); + originalImageWidth.set(oldOriginalImageHeight); + })(); }, [originalImageHeight, originalImageWidth, rotation, translateX, translateY]); // Crops an image that was provided in the imageUri prop, using the current position/scale From 0667cf722d040636d7b1b1570a105e98cae15381 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Nov 2024 13:26:05 +0100 Subject: [PATCH 044/381] Continue updating reanimated usage --- .../AvatarCropModal/AvatarCropModal.tsx | 26 ++- .../CustomStatusBarAndBackground/index.tsx | 14 +- src/components/MultiGestureCanvas/index.tsx | 84 +++++----- .../MultiGestureCanvas/usePanGesture.ts | 158 ++++++++++-------- 4 files changed, 157 insertions(+), 125 deletions(-) diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index 44ae528c425a..3ff9ccc4e3f8 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.tsx @@ -4,7 +4,7 @@ import type {LayoutChangeEvent} from 'react-native'; import {Gesture, GestureHandlerRootView} from 'react-native-gesture-handler'; import type {GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler'; import ImageSize from 'react-native-image-size'; -import {interpolate, runOnUI, useSharedValue, useWorkletCallback} from 'react-native-reanimated'; +import {interpolate, runOnUI, useSharedValue} from 'react-native-reanimated'; import Button from '@components/Button'; import HeaderGap from '@components/HeaderGap'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -143,12 +143,18 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose /** * Validates that value is within the provided mix/max range. */ - const clamp = useWorkletCallback((value: number, [min, max]) => interpolate(value, [min, max], [min, max], 'clamp'), []); + const clamp = useCallback((value: number, [min, max]: [number, number]) => { + 'worklet'; + + return interpolate(value, [min, max], [min, max], 'clamp'); + }, []); /** * Returns current image size taking into account scale and rotation. */ - const getDisplayedImageSize = useWorkletCallback(() => { + const getDisplayedImageSize = useCallback(() => { + 'worklet'; + let height = imageContainerSize * scale.get(); let width = imageContainerSize * scale.get(); @@ -161,13 +167,15 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose } return {height, width}; - }, [imageContainerSize, scale]); + }, [imageContainerSize, originalImageHeight, originalImageWidth, scale]); /** * Validates the offset to prevent overflow, and updates the image offset. */ - const updateImageOffset = useWorkletCallback( + const updateImageOffset = useCallback( (offsetX: number, offsetY: number) => { + 'worklet'; + const {height, width} = getDisplayedImageSize(); const maxOffsetX = (width - imageContainerSize) / 2; const maxOffsetY = (height - imageContainerSize) / 2; @@ -176,13 +184,15 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose prevMaxOffsetX.set(maxOffsetX); prevMaxOffsetY.set(maxOffsetY); }, - [imageContainerSize, scale, clamp], + [getDisplayedImageSize, imageContainerSize, translateX, clamp, translateY, prevMaxOffsetX, prevMaxOffsetY], ); - const newScaleValue = useWorkletCallback((newSliderValue: number, containerSize: number) => { + const newScaleValue = useCallback((newSliderValue: number, containerSize: number) => { + 'worklet'; + const {MAX_SCALE, MIN_SCALE} = CONST.AVATAR_CROP_MODAL; return (newSliderValue / containerSize) * (MAX_SCALE - MIN_SCALE) + MIN_SCALE; - }); + }, []); /** * Calculates new x & y image translate value on image panning diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx index ec52f07d211c..ac1fc77dff96 100644 --- a/src/components/CustomStatusBarAndBackground/index.tsx +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -44,14 +44,14 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack const statusBarAnimation = useSharedValue(0); useAnimatedReaction( - () => statusBarAnimation.value, + () => statusBarAnimation.get(), (current, previous) => { // Do not run if either of the animated value is null // or previous animated value is greater than or equal to the current one if (previous === null || current === null || current <= previous) { return; } - const backgroundColor = interpolateColor(statusBarAnimation.value, [0, 1], [prevStatusBarBackgroundColor.value, statusBarBackgroundColor.value]); + const backgroundColor = interpolateColor(statusBarAnimation.get(), [0, 1], [prevStatusBarBackgroundColor.get(), statusBarBackgroundColor.get()]); runOnJS(updateStatusBarAppearance)({backgroundColor}); }, ); @@ -92,8 +92,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack currentScreenBackgroundColor = backgroundColorFromRoute || pageTheme.backgroundColor; } - prevStatusBarBackgroundColor.value = statusBarBackgroundColor.value; - statusBarBackgroundColor.value = currentScreenBackgroundColor; + prevStatusBarBackgroundColor.set(statusBarBackgroundColor.get()); + statusBarBackgroundColor.set(currentScreenBackgroundColor); const callUpdateStatusBarAppearance = () => { updateStatusBarAppearance({statusBarStyle: newStatusBarStyle}); @@ -101,8 +101,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack }; const callUpdateStatusBarBackgroundColor = () => { - statusBarAnimation.value = 0; - statusBarAnimation.value = withDelay(300, withTiming(1)); + statusBarAnimation.set(0); + statusBarAnimation.set(withDelay(300, withTiming(1))); }; // Don't update the status bar style if it's the same as the current one, to prevent flashing. @@ -121,7 +121,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack callUpdateStatusBarAppearance(); } - if (currentScreenBackgroundColor !== theme.appBG || prevStatusBarBackgroundColor.value !== theme.appBG) { + if (currentScreenBackgroundColor !== theme.appBG || prevStatusBarBackgroundColor.get() !== theme.appBG) { callUpdateStatusBarBackgroundColor(); } }, diff --git a/src/components/MultiGestureCanvas/index.tsx b/src/components/MultiGestureCanvas/index.tsx index ff9566839d59..fda3ee9bea60 100644 --- a/src/components/MultiGestureCanvas/index.tsx +++ b/src/components/MultiGestureCanvas/index.tsx @@ -1,12 +1,12 @@ import type {ForwardedRef} from 'react'; -import React, {useEffect, useMemo, useRef} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import {View} from 'react-native'; import type {GestureType} from 'react-native-gesture-handler'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import type {GestureRef} from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture'; import type PagerView from 'react-native-pager-view'; import type {SharedValue} from 'react-native-reanimated'; -import Animated, {cancelAnimation, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, useWorkletCallback, withSpring} from 'react-native-reanimated'; +import Animated, {cancelAnimation, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring} from 'react-native-reanimated'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -92,7 +92,7 @@ function MultiGestureCanvas({ // Adding together zoom scale and the initial scale to fit the content into the canvas // Using the minimum content scale, so that the image is not bigger than the canvas // and not smaller than needed to fit - const totalScale = useDerivedValue(() => zoomScale.value * minContentScale, [minContentScale]); + const totalScale = useDerivedValue(() => zoomScale.get() * minContentScale, [minContentScale]); const panTranslateX = useSharedValue(0); const panTranslateY = useSharedValue(0); @@ -110,44 +110,50 @@ function MultiGestureCanvas({ /** * Stops any currently running decay animation from panning */ - const stopAnimation = useWorkletCallback(() => { + const stopAnimation = useCallback(() => { + 'worklet'; + cancelAnimation(offsetX); cancelAnimation(offsetY); - }); + }, [offsetX, offsetY]); /** * Resets the canvas to the initial state and animates back smoothly */ - const reset = useWorkletCallback((animated: boolean, callback?: () => void) => { - stopAnimation(); - - // eslint-disable-next-line react-compiler/react-compiler - offsetX.value = 0; - offsetY.value = 0; - pinchScale.value = 1; - - if (animated) { - panTranslateX.value = withSpring(0, SPRING_CONFIG); - panTranslateY.value = withSpring(0, SPRING_CONFIG); - pinchTranslateX.value = withSpring(0, SPRING_CONFIG); - pinchTranslateY.value = withSpring(0, SPRING_CONFIG); - zoomScale.value = withSpring(1, SPRING_CONFIG, callback); - - return; - } - - panTranslateX.value = 0; - panTranslateY.value = 0; - pinchTranslateX.value = 0; - pinchTranslateY.value = 0; - zoomScale.value = 1; - - if (callback === undefined) { - return; - } - - callback(); - }); + const reset = useCallback( + (animated: boolean, callback?: () => void) => { + 'worklet'; + + stopAnimation(); + + offsetX.set(0); + offsetY.set(0); + pinchScale.set(1); + + if (animated) { + panTranslateX.set(withSpring(0, SPRING_CONFIG)); + panTranslateY.set(withSpring(0, SPRING_CONFIG)); + pinchTranslateX.set(withSpring(0, SPRING_CONFIG)); + pinchTranslateY.set(withSpring(0, SPRING_CONFIG)); + zoomScale.set(withSpring(1, SPRING_CONFIG, callback)); + + return; + } + + panTranslateX.set(0); + panTranslateY.set(0); + pinchTranslateX.set(0); + pinchTranslateY.set(0); + zoomScale.set(1); + + if (callback === undefined) { + return; + } + + callback(); + }, + [offsetX, offsetY, panTranslateX, panTranslateY, pinchScale, pinchTranslateX, pinchTranslateY, stopAnimation, zoomScale], + ); const {singleTapGesture: baseSingleTapGesture, doubleTapGesture} = useTapGestures({ canvasSize, @@ -164,6 +170,7 @@ function MultiGestureCanvas({ onTap, shouldDisableTransformationGestures, }); + // eslint-disable-next-line react-compiler/react-compiler const singleTapGesture = baseSingleTapGesture.requireExternalGestureToFail(doubleTapGesture, panGestureRef); const panGestureSimultaneousList = useMemo( @@ -186,6 +193,7 @@ function MultiGestureCanvas({ onSwipeDown, }) .simultaneousWithExternalGesture(...panGestureSimultaneousList) + // eslint-disable-next-line react-compiler/react-compiler .withRef(panGestureRef); const pinchGesture = usePinchGesture({ @@ -217,8 +225,8 @@ function MultiGestureCanvas({ // Animate the x and y position of the content within the canvas based on all of the gestures const animatedStyles = useAnimatedStyle(() => { - const x = pinchTranslateX.value + panTranslateX.value + offsetX.value; - const y = pinchTranslateY.value + panTranslateY.value + offsetY.value; + const x = pinchTranslateX.get() + panTranslateX.get() + offsetX.get(); + const y = pinchTranslateY.get() + panTranslateY.get() + offsetY.get(); return { transform: [ @@ -228,7 +236,7 @@ function MultiGestureCanvas({ { translateY: y, }, - {scale: totalScale.value}, + {scale: totalScale.get()}, ], // Hide the image if the size is not ready yet opacity: contentSizeProp?.width ? 1 : 0, diff --git a/src/components/MultiGestureCanvas/usePanGesture.ts b/src/components/MultiGestureCanvas/usePanGesture.ts index b31e310055ae..bd29a18cc46c 100644 --- a/src/components/MultiGestureCanvas/usePanGesture.ts +++ b/src/components/MultiGestureCanvas/usePanGesture.ts @@ -1,8 +1,9 @@ /* eslint-disable no-param-reassign */ +import {useCallback} from 'react'; import {Dimensions} from 'react-native'; import type {PanGesture} from 'react-native-gesture-handler'; import {Gesture} from 'react-native-gesture-handler'; -import {runOnJS, useDerivedValue, useSharedValue, useWorkletCallback, withDecay, withSpring} from 'react-native-reanimated'; +import {runOnJS, useDerivedValue, useSharedValue, withDecay, withSpring} from 'react-native-reanimated'; import * as Browser from '@libs/Browser'; import {SPRING_CONFIG} from './constants'; import type {MultiGestureCanvasVariables} from './types'; @@ -47,8 +48,8 @@ const usePanGesture = ({ onSwipeDown, }: UsePanGestureProps): PanGesture => { // The content size after fitting it to the canvas and zooming - const zoomedContentWidth = useDerivedValue(() => contentSize.width * totalScale.value, [contentSize.width]); - const zoomedContentHeight = useDerivedValue(() => contentSize.height * totalScale.value, [contentSize.height]); + const zoomedContentWidth = useDerivedValue(() => contentSize.width * totalScale.get(), [contentSize.width]); + const zoomedContentHeight = useDerivedValue(() => contentSize.height * totalScale.get(), [contentSize.height]); // Used to track previous touch position for the "swipe down to close" gesture const previousTouch = useSharedValue<{x: number; y: number} | null>(null); @@ -61,140 +62,153 @@ const usePanGesture = ({ const isMobileBrowser = Browser.isMobile(); // Disable "swipe down to close" gesture when content is bigger than the canvas - const enableSwipeDownToClose = useDerivedValue(() => canvasSize.height < zoomedContentHeight.value, [canvasSize.height]); + const enableSwipeDownToClose = useDerivedValue(() => canvasSize.height < zoomedContentHeight.get(), [canvasSize.height]); // Calculates bounds of the scaled content // Can we pan left/right/up/down // Can be used to limit gesture or implementing tension effect - const getBounds = useWorkletCallback(() => { + const getBounds = useCallback(() => { + 'worklet'; + let horizontalBoundary = 0; let verticalBoundary = 0; - if (canvasSize.width < zoomedContentWidth.value) { - horizontalBoundary = Math.abs(canvasSize.width - zoomedContentWidth.value) / 2; + if (canvasSize.width < zoomedContentWidth.get()) { + horizontalBoundary = Math.abs(canvasSize.width - zoomedContentWidth.get()) / 2; } - if (canvasSize.height < zoomedContentHeight.value) { - verticalBoundary = Math.abs(zoomedContentHeight.value - canvasSize.height) / 2; + if (canvasSize.height < zoomedContentHeight.get()) { + verticalBoundary = Math.abs(zoomedContentHeight.get() - canvasSize.height) / 2; } const horizontalBoundaries = {min: -horizontalBoundary, max: horizontalBoundary}; const verticalBoundaries = {min: -verticalBoundary, max: verticalBoundary}; const clampedOffset = { - x: MultiGestureCanvasUtils.clamp(offsetX.value, horizontalBoundaries.min, horizontalBoundaries.max), - y: MultiGestureCanvasUtils.clamp(offsetY.value, verticalBoundaries.min, verticalBoundaries.max), + x: MultiGestureCanvasUtils.clamp(offsetX.get(), horizontalBoundaries.min, horizontalBoundaries.max), + y: MultiGestureCanvasUtils.clamp(offsetY.get(), verticalBoundaries.min, verticalBoundaries.max), }; // If the horizontal/vertical offset is the same after clamping to the min/max boundaries, the content is within the boundaries - const isInHoriztontalBoundary = clampedOffset.x === offsetX.value; - const isInVerticalBoundary = clampedOffset.y === offsetY.value; + const isInHorizontalBoundary = clampedOffset.x === offsetX.get(); + const isInVerticalBoundary = clampedOffset.y === offsetY.get(); return { horizontalBoundaries, verticalBoundaries, clampedOffset, - isInHoriztontalBoundary, + isInHorizontalBoundary, isInVerticalBoundary, }; - }, [canvasSize.width, canvasSize.height]); + }, [canvasSize.width, canvasSize.height, zoomedContentWidth, zoomedContentHeight, offsetX, offsetY]); // We want to smoothly decay/end the gesture by phasing out the pan animation // In case the content is outside of the boundaries of the canvas, // we need to move the content back into the boundaries - const finishPanGesture = useWorkletCallback(() => { + const finishPanGesture = useCallback(() => { + 'worklet'; + // If the content is centered within the canvas, we don't need to run any animations - if (offsetX.value === 0 && offsetY.value === 0 && panTranslateX.value === 0 && panTranslateY.value === 0) { + if (offsetX.get() === 0 && offsetY.get() === 0 && panTranslateX.get() === 0 && panTranslateY.get() === 0) { return; } - const {clampedOffset, isInHoriztontalBoundary, isInVerticalBoundary, horizontalBoundaries, verticalBoundaries} = getBounds(); + const {clampedOffset, isInHorizontalBoundary, isInVerticalBoundary, horizontalBoundaries, verticalBoundaries} = getBounds(); // If the content is within the horizontal/vertical boundaries of the canvas, we can smoothly phase out the animation // If not, we need to snap back to the boundaries - if (isInHoriztontalBoundary) { + if (isInHorizontalBoundary) { // If the (absolute) velocity is 0, we don't need to run an animation - if (Math.abs(panVelocityX.value) !== 0) { + if (Math.abs(panVelocityX.get()) !== 0) { // Phase out the pan animation // eslint-disable-next-line react-compiler/react-compiler - offsetX.value = withDecay({ - velocity: panVelocityX.value, - clamp: [horizontalBoundaries.min, horizontalBoundaries.max], - deceleration: PAN_DECAY_DECELARATION, - rubberBandEffect: false, - }); + offsetX.set( + withDecay({ + velocity: panVelocityX.get(), + clamp: [horizontalBoundaries.min, horizontalBoundaries.max], + deceleration: PAN_DECAY_DECELARATION, + rubberBandEffect: false, + }), + ); } } else { // Animated back to the boundary - offsetX.value = withSpring(clampedOffset.x, SPRING_CONFIG); + offsetX.set(withSpring(clampedOffset.x, SPRING_CONFIG)); } if (isInVerticalBoundary) { // If the (absolute) velocity is 0, we don't need to run an animation - if (Math.abs(panVelocityY.value) !== 0) { + if (Math.abs(panVelocityY.get()) !== 0) { // Phase out the pan animation - offsetY.value = withDecay({ - velocity: panVelocityY.value, - clamp: [verticalBoundaries.min, verticalBoundaries.max], - deceleration: PAN_DECAY_DECELARATION, - }); + offsetY.set( + withDecay({ + velocity: panVelocityY.get(), + clamp: [verticalBoundaries.min, verticalBoundaries.max], + deceleration: PAN_DECAY_DECELARATION, + }), + ); } } else { - const finalTranslateY = offsetY.value + panVelocityY.value * 0.2; - - if (finalTranslateY > SNAP_POINT && zoomScale.value <= 1) { - offsetY.value = withSpring(SNAP_POINT_HIDDEN, SPRING_CONFIG, () => { - isSwipingDownToClose.value = false; - - if (onSwipeDown) { - runOnJS(onSwipeDown)(); - } - }); + const finalTranslateY = offsetY.get() + panVelocityY.get() * 0.2; + + if (finalTranslateY > SNAP_POINT && zoomScale.get() <= 1) { + offsetY.set( + withSpring(SNAP_POINT_HIDDEN, SPRING_CONFIG, () => { + isSwipingDownToClose.set(false); + + if (onSwipeDown) { + runOnJS(onSwipeDown)(); + } + }), + ); } else { // Animated back to the boundary - offsetY.value = withSpring(clampedOffset.y, SPRING_CONFIG, () => { - isSwipingDownToClose.value = false; - }); + offsetY.set( + withSpring(clampedOffset.y, SPRING_CONFIG, () => { + isSwipingDownToClose.set(false); + }), + ); } } // Reset velocity variables after we finished the pan gesture - panVelocityX.value = 0; - panVelocityY.value = 0; - }); + panVelocityX.set(0); + panVelocityY.set(0); + }, [getBounds, isSwipingDownToClose, offsetX, offsetY, onSwipeDown, panTranslateX, panTranslateY, panVelocityX, panVelocityY, zoomScale]); const panGesture = Gesture.Pan() .manualActivation(true) .averageTouches(true) .onTouchesUp(() => { - previousTouch.value = null; + previousTouch.set(null); }) .onTouchesMove((evt, state) => { // We only allow panning when the content is zoomed in - if (zoomScale.value > 1 && !shouldDisableTransformationGestures.value) { + if (zoomScale.get() > 1 && !shouldDisableTransformationGestures.get()) { state.activate(); } // TODO: this needs tuning to work properly - if (!shouldDisableTransformationGestures.value && zoomScale.value === 1 && previousTouch.value !== null) { - const velocityX = Math.abs((evt.allTouches.at(0)?.x ?? 0) - previousTouch.value.x); - const velocityY = (evt.allTouches.at(0)?.y ?? 0) - previousTouch.value.y; + const previousTouchValue = previousTouch.get(); + if (!shouldDisableTransformationGestures.get() && zoomScale.get() === 1 && previousTouchValue !== null) { + const velocityX = Math.abs((evt.allTouches.at(0)?.x ?? 0) - previousTouchValue.x); + const velocityY = (evt.allTouches.at(0)?.y ?? 0) - previousTouchValue.y; if (Math.abs(velocityY) > velocityX && velocityY > 20) { state.activate(); - isSwipingDownToClose.value = true; - previousTouch.value = null; + isSwipingDownToClose.set(true); + previousTouch.set(null); return; } } - if (previousTouch.value === null) { - previousTouch.value = { + if (previousTouchValue === null) { + previousTouch.set({ x: evt.allTouches.at(0)?.x ?? 0, y: evt.allTouches.at(0)?.y ?? 0, - }; + }); } }) .onStart(() => { @@ -207,31 +221,31 @@ const usePanGesture = ({ return; } - panVelocityX.value = evt.velocityX; - panVelocityY.value = evt.velocityY; + panVelocityX.set(evt.velocityX); + panVelocityY.set(evt.velocityY); - if (!isSwipingDownToClose.value) { - if (!isMobileBrowser || (isMobileBrowser && zoomScale.value !== 1)) { - panTranslateX.value += evt.changeX; + if (!isSwipingDownToClose.get()) { + if (!isMobileBrowser || (isMobileBrowser && zoomScale.get() !== 1)) { + panTranslateX.set((value) => value + evt.changeX); } } - if (enableSwipeDownToClose.value || isSwipingDownToClose.value) { - panTranslateY.value += evt.changeY; + if (enableSwipeDownToClose.get() || isSwipingDownToClose.get()) { + panTranslateY.set((value) => value + evt.changeY); } }) .onEnd(() => { // Add pan translation to total offset and reset gesture variables - offsetX.value += panTranslateX.value; - offsetY.value += panTranslateY.value; + offsetX.set((value) => value + panTranslateX.get()); + offsetY.set((value) => value + panTranslateY.get()); // Reset pan gesture variables - panTranslateX.value = 0; - panTranslateY.value = 0; - previousTouch.value = null; + panTranslateX.set(0); + panTranslateY.set(0); + previousTouch.set(null); // If we are swiping (in the pager), we don't want to return to boundaries - if (shouldDisableTransformationGestures.value) { + if (shouldDisableTransformationGestures.get()) { return; } From 73c358f73962f392493c082b880579523c4b0ff7 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Nov 2024 14:40:45 +0100 Subject: [PATCH 045/381] Finish migrating to new reanimated --- .../MultiGestureCanvas/usePinchGesture.ts | 88 ++++++++++--------- .../MultiGestureCanvas/useTapGestures.ts | 23 +++-- .../ReportActionItem/ReportPreview.tsx | 19 ++-- .../AnimatedSettlementButton.tsx | 44 +++++----- .../SplashScreenHider/index.native.tsx | 31 ++++--- .../VideoPlayer/BaseVideoPlayer.tsx | 7 +- .../VideoPlayerControls/ProgressBar/index.tsx | 11 ++- .../VolumeButton/index.tsx | 15 ++-- .../VideoPlayerContexts/VolumeContext.tsx | 7 +- src/hooks/useAnimatedHighlightStyle/index.ts | 35 ++++---- src/pages/Search/SearchPageBottomTab.tsx | 15 ++-- .../report/AnimatedEmptyStateBackground.tsx | 9 +- .../home/report/FloatingMessageCounter.tsx | 6 +- .../ComposerWithSuggestions.tsx | 13 ++- .../ReportActionCompose.tsx | 7 +- .../report/ReportActionItemMessageEdit.tsx | 14 ++- .../step/IOURequestStepScan/index.native.tsx | 13 ++- .../BackgroundImage/index.ios.tsx | 13 +-- 18 files changed, 182 insertions(+), 188 deletions(-) diff --git a/src/components/MultiGestureCanvas/usePinchGesture.ts b/src/components/MultiGestureCanvas/usePinchGesture.ts index 46a5e28e5732..7c517ad2f30b 100644 --- a/src/components/MultiGestureCanvas/usePinchGesture.ts +++ b/src/components/MultiGestureCanvas/usePinchGesture.ts @@ -1,8 +1,8 @@ /* eslint-disable no-param-reassign */ -import {useEffect, useState} from 'react'; +import {useCallback, useEffect, useState} from 'react'; import type {PinchGesture} from 'react-native-gesture-handler'; import {Gesture} from 'react-native-gesture-handler'; -import {runOnJS, useAnimatedReaction, useSharedValue, useWorkletCallback, withSpring} from 'react-native-reanimated'; +import {runOnJS, useAnimatedReaction, useSharedValue, withSpring} from 'react-native-reanimated'; import {SPRING_CONFIG, ZOOM_RANGE_BOUNCE_FACTORS} from './constants'; import type {MultiGestureCanvasVariables} from './types'; @@ -61,16 +61,16 @@ const usePinchGesture = ({ return; } - runOnJS(onScaleChanged)(zoomScale.value); + runOnJS(onScaleChanged)(zoomScale.get()); }; // Update the total (pinch) translation based on the regular pinch + bounce useAnimatedReaction( - () => [pinchTranslateX.value, pinchTranslateY.value, pinchBounceTranslateX.value, pinchBounceTranslateY.value], + () => [pinchTranslateX.get(), pinchTranslateY.get(), pinchBounceTranslateX.get(), pinchBounceTranslateY.get()], ([translateX, translateY, bounceX, bounceY]) => { // eslint-disable-next-line react-compiler/react-compiler - totalPinchTranslateX.value = translateX + bounceX; - totalPinchTranslateY.value = translateY + bounceY; + totalPinchTranslateX.set(translateX + bounceX); + totalPinchTranslateY.set(translateY + bounceY); }, ); @@ -78,12 +78,16 @@ const usePinchGesture = ({ * Calculates the adjusted focal point of the pinch gesture, * based on the canvas size and the current offset */ - const getAdjustedFocal = useWorkletCallback( - (focalX: number, focalY: number) => ({ - x: focalX - (canvasSize.width / 2 + offsetX.value), - y: focalY - (canvasSize.height / 2 + offsetY.value), - }), - [canvasSize.width, canvasSize.height], + const getAdjustedFocal = useCallback( + (focalX: number, focalY: number) => { + 'worklet'; + + return { + x: focalX - (canvasSize.width / 2 + offsetX.get()), + y: focalY - (canvasSize.height / 2 + offsetY.get()), + }; + }, + [canvasSize.width, canvasSize.height, offsetX, offsetY], ); // The pinch gesture is disabled when we release one of the fingers @@ -101,7 +105,7 @@ const usePinchGesture = ({ // The first argument is not used, but must be defined .onTouchesDown((_evt, state) => { // We don't want to activate pinch gesture when we are swiping in the pager - if (!shouldDisableTransformationGestures.value) { + if (!shouldDisableTransformationGestures.get()) { return; } @@ -112,8 +116,8 @@ const usePinchGesture = ({ // Set the origin focal point of the pinch gesture at the start of the gesture const adjustedFocal = getAdjustedFocal(evt.focalX, evt.focalY); - pinchOrigin.x.value = adjustedFocal.x; - pinchOrigin.y.value = adjustedFocal.y; + pinchOrigin.x.set(adjustedFocal.x); + pinchOrigin.y.set(adjustedFocal.y); }) .onChange((evt) => { // Disable the pinch gesture if one finger is released, @@ -123,58 +127,58 @@ const usePinchGesture = ({ return; } - const newZoomScale = pinchScale.value * evt.scale; - + const newZoomScale = pinchScale.get() * evt.scale; + const zoomScaleValue = zoomScale.get(); // Limit the zoom scale to zoom range including bounce range - if (zoomScale.value >= zoomRange.min * ZOOM_RANGE_BOUNCE_FACTORS.min && zoomScale.value <= zoomRange.max * ZOOM_RANGE_BOUNCE_FACTORS.max) { - zoomScale.value = newZoomScale; - currentPinchScale.value = evt.scale; + if (zoomScaleValue >= zoomRange.min * ZOOM_RANGE_BOUNCE_FACTORS.min && zoomScaleValue <= zoomRange.max * ZOOM_RANGE_BOUNCE_FACTORS.max) { + zoomScale.set(newZoomScale); + currentPinchScale.set(evt.scale); triggerScaleChangedEvent(); } // Calculate new pinch translation const adjustedFocal = getAdjustedFocal(evt.focalX, evt.focalY); - const newPinchTranslateX = adjustedFocal.x + currentPinchScale.value * pinchOrigin.x.value * -1; - const newPinchTranslateY = adjustedFocal.y + currentPinchScale.value * pinchOrigin.y.value * -1; + const newPinchTranslateX = adjustedFocal.x + currentPinchScale.get() * pinchOrigin.x.get() * -1; + const newPinchTranslateY = adjustedFocal.y + currentPinchScale.get() * pinchOrigin.y.get() * -1; // If the zoom scale is within the zoom range, we perform the regular pinch translation // Otherwise it means that we are "overzoomed" or "underzoomed", so we need to bounce back - if (zoomScale.value >= zoomRange.min && zoomScale.value <= zoomRange.max) { - pinchTranslateX.value = newPinchTranslateX; - pinchTranslateY.value = newPinchTranslateY; + if (zoomScaleValue >= zoomRange.min && zoomScaleValue <= zoomRange.max) { + pinchTranslateX.set(newPinchTranslateX); + pinchTranslateY.set(newPinchTranslateY); } else { // Store x and y translation that is produced while bouncing // so we can revert the bounce once pinch gesture is released - pinchBounceTranslateX.value = newPinchTranslateX - pinchTranslateX.value; - pinchBounceTranslateY.value = newPinchTranslateY - pinchTranslateY.value; + pinchBounceTranslateX.set(newPinchTranslateX - pinchTranslateX.get()); + pinchBounceTranslateY.set(newPinchTranslateY - pinchTranslateY.get()); } }) .onEnd(() => { // Add pinch translation to total offset and reset gesture variables - offsetX.value += pinchTranslateX.value; - offsetY.value += pinchTranslateY.value; - pinchTranslateX.value = 0; - pinchTranslateY.value = 0; - currentPinchScale.value = 1; + offsetX.set((value) => value + pinchTranslateX.get()); + offsetY.set((value) => value + pinchTranslateY.get()); + pinchTranslateX.set(0); + pinchTranslateY.set(0); + currentPinchScale.set(1); // If the content was "overzoomed" or "underzoomed", we need to bounce back with an animation - if (pinchBounceTranslateX.value !== 0 || pinchBounceTranslateY.value !== 0) { - pinchBounceTranslateX.value = withSpring(0, SPRING_CONFIG); - pinchBounceTranslateY.value = withSpring(0, SPRING_CONFIG); + if (pinchBounceTranslateX.get() !== 0 || pinchBounceTranslateY.get() !== 0) { + pinchBounceTranslateX.set(withSpring(0, SPRING_CONFIG)); + pinchBounceTranslateY.set(withSpring(0, SPRING_CONFIG)); } - if (zoomScale.value < zoomRange.min) { + if (zoomScale.get() < zoomRange.min) { // If the zoom scale is less than the minimum zoom scale, we need to set the zoom scale to the minimum - pinchScale.value = zoomRange.min; - zoomScale.value = withSpring(zoomRange.min, SPRING_CONFIG, triggerScaleChangedEvent); - } else if (zoomScale.value > zoomRange.max) { + pinchScale.set(zoomRange.min); + zoomScale.set(withSpring(zoomRange.min, SPRING_CONFIG, triggerScaleChangedEvent)); + } else if (zoomScale.get() > zoomRange.max) { // If the zoom scale is higher than the maximum zoom scale, we need to set the zoom scale to the maximum - pinchScale.value = zoomRange.max; - zoomScale.value = withSpring(zoomRange.max, SPRING_CONFIG, triggerScaleChangedEvent); + pinchScale.set(zoomRange.max); + zoomScale.set(withSpring(zoomRange.max, SPRING_CONFIG, triggerScaleChangedEvent)); } else { // Otherwise, we just update the pinch scale offset - pinchScale.value = zoomScale.value; + pinchScale.set(zoomScale.get()); triggerScaleChangedEvent(); } }); diff --git a/src/components/MultiGestureCanvas/useTapGestures.ts b/src/components/MultiGestureCanvas/useTapGestures.ts index e4bb02bd5d34..a918310d2862 100644 --- a/src/components/MultiGestureCanvas/useTapGestures.ts +++ b/src/components/MultiGestureCanvas/useTapGestures.ts @@ -1,8 +1,8 @@ /* eslint-disable no-param-reassign */ -import {useMemo} from 'react'; +import {useCallback, useMemo} from 'react'; import type {TapGesture} from 'react-native-gesture-handler'; import {Gesture} from 'react-native-gesture-handler'; -import {runOnJS, useWorkletCallback, withSpring} from 'react-native-reanimated'; +import {runOnJS, withSpring} from 'react-native-reanimated'; import {DOUBLE_TAP_SCALE, SPRING_CONFIG} from './constants'; import type {MultiGestureCanvasVariables} from './types'; import * as MultiGestureCanvasUtils from './utils'; @@ -46,7 +46,7 @@ const useTapGestures = ({ // On double tap the content should be zoomed to fill, but at least zoomed by DOUBLE_TAP_SCALE const doubleTapScale = useMemo(() => Math.max(DOUBLE_TAP_SCALE, maxContentScale / minContentScale), [maxContentScale, minContentScale]); - const zoomToCoordinates = useWorkletCallback( + const zoomToCoordinates = useCallback( (focalX: number, focalY: number, callback: () => void) => { 'worklet'; @@ -111,19 +111,18 @@ const useTapGestures = ({ offsetAfterZooming.y = 0; } - // eslint-disable-next-line react-compiler/react-compiler - offsetX.value = withSpring(offsetAfterZooming.x, SPRING_CONFIG); - offsetY.value = withSpring(offsetAfterZooming.y, SPRING_CONFIG); - zoomScale.value = withSpring(doubleTapScale, SPRING_CONFIG, callback); - pinchScale.value = doubleTapScale; + offsetX.set(withSpring(offsetAfterZooming.x, SPRING_CONFIG)); + offsetY.set(withSpring(offsetAfterZooming.y, SPRING_CONFIG)); + zoomScale.set(withSpring(doubleTapScale, SPRING_CONFIG, callback)); + pinchScale.set(doubleTapScale); }, - [scaledContentWidth, scaledContentHeight, canvasSize, doubleTapScale], + [stopAnimation, canvasSize.width, canvasSize.height, scaledContentWidth, scaledContentHeight, doubleTapScale, offsetX, offsetY, zoomScale, pinchScale], ); const doubleTapGesture = Gesture.Tap() // The first argument is not used, but must be defined .onTouchesDown((_evt, state) => { - if (!shouldDisableTransformationGestures.value) { + if (!shouldDisableTransformationGestures.get()) { return; } @@ -137,13 +136,13 @@ const useTapGestures = ({ 'worklet'; if (onScaleChanged != null) { - runOnJS(onScaleChanged)(zoomScale.value); + runOnJS(onScaleChanged)(zoomScale.get()); } }; // If the content is already zoomed, we want to reset the zoom, // otherwise we want to zoom in - if (zoomScale.value > 1) { + if (zoomScale.get() > 1) { reset(true, triggerScaleChangedEvent); } else { zoomToCoordinates(evt.x, evt.y, triggerScaleChangedEvent); diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 9067f1abb11a..684e922e2dc6 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -135,7 +135,7 @@ function ReportPreview({ const iouSettled = ReportUtils.isSettled(iouReportID) || action?.childStatusNum === CONST.REPORT.STATUS_NUM.REIMBURSED; const previewMessageOpacity = useSharedValue(1); const previewMessageStyle = useAnimatedStyle(() => ({ - opacity: previewMessageOpacity.value, + opacity: previewMessageOpacity.get(), })); const checkMarkScale = useSharedValue(iouSettled ? 1 : 0); @@ -425,11 +425,11 @@ function ReportPreview({ return; } - // eslint-disable-next-line react-compiler/react-compiler - previewMessageOpacity.value = withTiming(0.75, {duration: CONST.ANIMATION_PAID_DURATION / 2}, () => { - // eslint-disable-next-line react-compiler/react-compiler - previewMessageOpacity.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION / 2}); - }); + previewMessageOpacity.set( + withTiming(0.75, {duration: CONST.ANIMATION_PAID_DURATION / 2}, () => { + previewMessageOpacity.set(withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION / 2})); + }), + ); // We only want to animate the text when the text changes // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [previewMessage, previewMessageOpacity]); @@ -439,12 +439,7 @@ function ReportPreview({ return; } - if (isPaidAnimationRunning) { - // eslint-disable-next-line react-compiler/react-compiler - checkMarkScale.value = withDelay(CONST.ANIMATION_PAID_CHECKMARK_DELAY, withSpring(1, {duration: CONST.ANIMATION_PAID_DURATION})); - } else { - checkMarkScale.value = 1; - } + checkMarkScale.set(isPaidAnimationRunning ? withDelay(CONST.ANIMATION_PAID_CHECKMARK_DELAY, withSpring(1, {duration: CONST.ANIMATION_PAID_DURATION})) : 1); }, [isPaidAnimationRunning, iouSettled, checkMarkScale]); return ( diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx index 5de528d741a2..65c2fd2f493b 100644 --- a/src/components/SettlementButton/AnimatedSettlementButton.tsx +++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx @@ -23,20 +23,20 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is const height = useSharedValue(variables.componentSizeNormal); const buttonMarginTop = useSharedValue(styles.expenseAndReportPreviewTextButtonContainer.gap); const buttonStyles = useAnimatedStyle(() => ({ - transform: [{scale: buttonScale.value}], - opacity: buttonOpacity.value, + transform: [{scale: buttonScale.get()}], + opacity: buttonOpacity.get(), })); const paymentCompleteTextStyles = useAnimatedStyle(() => ({ - transform: [{scale: paymentCompleteTextScale.value}], - opacity: paymentCompleteTextOpacity.value, + transform: [{scale: paymentCompleteTextScale.get()}], + opacity: paymentCompleteTextOpacity.get(), position: 'absolute', alignSelf: 'center', })); const containerStyles = useAnimatedStyle(() => ({ - height: height.value, + height: height.get(), justifyContent: 'center', overflow: 'hidden', - marginTop: buttonMarginTop.value, + marginTop: buttonMarginTop.get(), })); const buttonDisabledStyle = isPaidAnimationRunning ? { @@ -46,13 +46,12 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is : undefined; const resetAnimation = useCallback(() => { - // eslint-disable-next-line react-compiler/react-compiler - buttonScale.value = 1; - buttonOpacity.value = 1; - paymentCompleteTextScale.value = 0; - paymentCompleteTextOpacity.value = 1; - height.value = variables.componentSizeNormal; - buttonMarginTop.value = styles.expenseAndReportPreviewTextButtonContainer.gap; + buttonScale.set(1); + buttonOpacity.set(1); + paymentCompleteTextScale.set(0); + paymentCompleteTextOpacity.set(1); + height.set(variables.componentSizeNormal); + buttonMarginTop.set(styles.expenseAndReportPreviewTextButtonContainer.gap); }, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height, buttonMarginTop, styles.expenseAndReportPreviewTextButtonContainer.gap]); useEffect(() => { @@ -60,19 +59,20 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is resetAnimation(); return; } - // eslint-disable-next-line react-compiler/react-compiler - buttonScale.value = withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}); - buttonOpacity.value = withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}); - paymentCompleteTextScale.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION}); + buttonScale.set(withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION})); + buttonOpacity.set(withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION})); + paymentCompleteTextScale.set(withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION})); // Wait for the above animation + 1s delay before hiding the component const totalDelay = CONST.ANIMATION_PAID_DURATION + CONST.ANIMATION_PAID_BUTTON_HIDE_DELAY; - height.value = withDelay( - totalDelay, - withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()), + height.set( + withDelay( + totalDelay, + withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()), + ), ); - buttonMarginTop.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION})); - paymentCompleteTextOpacity.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION})); + buttonMarginTop.set(withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}))); + paymentCompleteTextOpacity.set(withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}))); }, [isPaidAnimationRunning, onAnimationFinish, buttonOpacity, buttonScale, height, paymentCompleteTextOpacity, paymentCompleteTextScale, buttonMarginTop, resetAnimation]); return ( diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx index 7c579519c926..d41770fb7f52 100644 --- a/src/components/SplashScreenHider/index.native.tsx +++ b/src/components/SplashScreenHider/index.native.tsx @@ -17,10 +17,10 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS const scale = useSharedValue(1); const opacityStyle = useAnimatedStyle(() => ({ - opacity: opacity.value, + opacity: opacity.get(), })); const scaleStyle = useAnimatedStyle(() => ({ - transform: [{scale: scale.value}], + transform: [{scale: scale.get()}], })); const hideHasBeenCalled = useRef(false); @@ -34,19 +34,22 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS hideHasBeenCalled.current = true; BootSplash.hide().then(() => { - // eslint-disable-next-line react-compiler/react-compiler - scale.value = withTiming(0, { - duration: 200, - easing: Easing.back(2), - }); + scale.set( + withTiming(0, { + duration: 200, + easing: Easing.back(2), + }), + ); - opacity.value = withTiming( - 0, - { - duration: 250, - easing: Easing.out(Easing.ease), - }, - () => runOnJS(onHide)(), + opacity.set( + withTiming( + 0, + { + duration: 250, + easing: Easing.out(Easing.ease), + }, + () => runOnJS(onHide)(), + ), ); }); }, [opacity, scale, onHide]); diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 012537b75108..7fd26a177b0c 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -78,7 +78,7 @@ function BaseVideoPlayer({ const [controlStatusState, setControlStatusState] = useState(controlsStatus); const controlsOpacity = useSharedValue(1); const controlsAnimatedStyle = useAnimatedStyle(() => ({ - opacity: controlsOpacity.value, + opacity: controlsOpacity.get(), })); const videoPlayerRef = useRef(null); @@ -106,8 +106,7 @@ function BaseVideoPlayer({ }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, updateCurrentlyPlayingURL, url, videoResumeTryNumberRef]); const hideControl = useCallback(() => { - // eslint-disable-next-line react-compiler/react-compiler - controlsOpacity.value = withTiming(0, {duration: 500}, () => runOnJS(setControlStatusState)(CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE)); + controlsOpacity.set(withTiming(0, {duration: 500}, () => runOnJS(setControlStatusState)(CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE))); }, [controlsOpacity]); const debouncedHideControl = useMemo(() => debounce(hideControl, 1500), [hideControl]); @@ -144,7 +143,7 @@ function BaseVideoPlayer({ return; } setControlStatusState(CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW); - controlsOpacity.value = 1; + controlsOpacity.set(1); }, [controlStatusState, controlsOpacity, hideControl]); const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => { diff --git a/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx index 5d1ea0d85d0b..69273c1444e8 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx @@ -30,13 +30,12 @@ function ProgressBar({duration, position, seekPosition}: ProgressBarProps) { const wasVideoPlayingOnCheck = useSharedValue(false); const onCheckVideoPlaying = (isPlaying: boolean) => { - // eslint-disable-next-line react-compiler/react-compiler - wasVideoPlayingOnCheck.value = isPlaying; + wasVideoPlayingOnCheck.set(isPlaying); }; const progressBarInteraction = (event: GestureUpdateEvent | GestureStateChangeEvent) => { const progress = getProgress(event.x, sliderWidth); - progressWidth.value = progress; + progressWidth.set(progress); runOnJS(seekPosition)((progress * duration) / 100); }; @@ -56,7 +55,7 @@ function ProgressBar({duration, position, seekPosition}: ProgressBarProps) { }) .onFinalize(() => { runOnJS(setIsSliderPressed)(false); - if (!wasVideoPlayingOnCheck.value) { + if (!wasVideoPlayingOnCheck.get()) { return; } runOnJS(playVideo)(); @@ -66,10 +65,10 @@ function ProgressBar({duration, position, seekPosition}: ProgressBarProps) { if (isSliderPressed) { return; } - progressWidth.value = getProgress(position, duration); + progressWidth.set(getProgress(position, duration)); }, [duration, isSliderPressed, position, progressWidth]); - const progressBarStyle: ViewStyle = useAnimatedStyle(() => ({width: `${progressWidth.value}%`})); + const progressBarStyle: ViewStyle = useAnimatedStyle(() => ({width: `${progressWidth.get()}%`})); return ( diff --git a/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx index 751bd1b1df26..a6e44607ea62 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx @@ -35,7 +35,7 @@ function VolumeButton({style, small = false}: VolumeButtonProps) { const {translate} = useLocalize(); const {updateVolume, volume} = useVolumeContext(); const [sliderHeight, setSliderHeight] = useState(1); - const [volumeIcon, setVolumeIcon] = useState({icon: getVolumeIcon(volume.value)}); + const [volumeIcon, setVolumeIcon] = useState({icon: getVolumeIcon(volume.get())}); const [isSliderBeingUsed, setIsSliderBeingUsed] = useState(false); const onSliderLayout = useCallback((event: LayoutChangeEvent) => { @@ -45,8 +45,7 @@ function VolumeButton({style, small = false}: VolumeButtonProps) { const changeVolumeOnPan = useCallback( (event: GestureStateChangeEvent | GestureUpdateEvent) => { const val = NumberUtils.roundToTwoDecimalPlaces(1 - event.y / sliderHeight); - // eslint-disable-next-line react-compiler/react-compiler - volume.value = NumberUtils.clamp(val, 0, 1); + volume.set(NumberUtils.clamp(val, 0, 1)); }, [sliderHeight, volume], ); @@ -63,15 +62,15 @@ function VolumeButton({style, small = false}: VolumeButtonProps) { runOnJS(setIsSliderBeingUsed)(false); }); - const progressBarStyle = useAnimatedStyle(() => ({height: `${volume.value * 100}%`})); + const progressBarStyle = useAnimatedStyle(() => ({height: `${volume.get() * 100}%`})); const updateIcon = useCallback((vol: number) => { setVolumeIcon({icon: getVolumeIcon(vol)}); }, []); useDerivedValue(() => { - runOnJS(updateVolume)(volume.value); - runOnJS(updateIcon)(volume.value); + runOnJS(updateVolume)(volume.get()); + runOnJS(updateIcon)(volume.get()); }, [volume]); return ( @@ -95,8 +94,8 @@ function VolumeButton({style, small = false}: VolumeButtonProps) { )} updateVolume(volume.value === 0 ? 1 : 0)} + tooltipText={volume.get() === 0 ? translate('videoPlayer.unmute') : translate('videoPlayer.mute')} + onPress={() => updateVolume(volume.get() === 0 ? 1 : 0)} src={volumeIcon.icon} small={small} shouldForceRenderingTooltipBelow diff --git a/src/components/VideoPlayerContexts/VolumeContext.tsx b/src/components/VideoPlayerContexts/VolumeContext.tsx index f22b524848de..1f7b3bf66551 100644 --- a/src/components/VideoPlayerContexts/VolumeContext.tsx +++ b/src/components/VideoPlayerContexts/VolumeContext.tsx @@ -16,8 +16,7 @@ function VolumeContextProvider({children}: ChildrenProps) { return; } currentVideoPlayerRef.current.setStatusAsync({volume: newVolume, isMuted: newVolume === 0}); - // eslint-disable-next-line react-compiler/react-compiler - volume.value = newVolume; + volume.set(newVolume); }, [currentVideoPlayerRef, volume], ); @@ -28,8 +27,8 @@ function VolumeContextProvider({children}: ChildrenProps) { if (!originalParent) { return; } - updateVolume(volume.value); - }, [originalParent, updateVolume, volume.value]); + updateVolume(volume.get()); + }, [originalParent, updateVolume, volume]); const contextValue = useMemo(() => ({updateVolume, volume}), [updateVolume, volume]); return {children}; diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts index e17f30fc60bf..4c9099c7f1ba 100644 --- a/src/hooks/useAnimatedHighlightStyle/index.ts +++ b/src/hooks/useAnimatedHighlightStyle/index.ts @@ -66,9 +66,9 @@ export default function useAnimatedHighlightStyle({ const theme = useTheme(); const highlightBackgroundStyle = useAnimatedStyle(() => ({ - backgroundColor: interpolateColor(repeatableProgress.value, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]), - height: height ? interpolate(nonRepeatableProgress.value, [0, 1], [0, height]) : 'auto', - opacity: interpolate(nonRepeatableProgress.value, [0, 1], [0, 1]), + backgroundColor: interpolateColor(repeatableProgress.get(), [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]), + height: height ? interpolate(nonRepeatableProgress.get(), [0, 1], [0, height]) : 'auto', + opacity: interpolate(nonRepeatableProgress.get(), [0, 1], [0, 1]), borderRadius, })); @@ -90,19 +90,22 @@ export default function useAnimatedHighlightStyle({ setStartHighlight(false); InteractionManager.runAfterInteractions(() => { runOnJS(() => { - nonRepeatableProgress.value = withDelay( - itemEnterDelay, - withTiming(1, {duration: itemEnterDuration, easing: Easing.inOut(Easing.ease)}, (finished) => { - if (!finished) { - return; - } - - // eslint-disable-next-line react-compiler/react-compiler - repeatableProgress.value = withSequence( - withDelay(highlightStartDelay, withTiming(1, {duration: highlightStartDuration, easing: Easing.inOut(Easing.ease)})), - withDelay(highlightEndDelay, withTiming(0, {duration: highlightEndDuration, easing: Easing.inOut(Easing.ease)})), - ); - }), + nonRepeatableProgress.set( + withDelay( + itemEnterDelay, + withTiming(1, {duration: itemEnterDuration, easing: Easing.inOut(Easing.ease)}, (finished) => { + if (!finished) { + return; + } + + repeatableProgress.set( + withSequence( + withDelay(highlightStartDelay, withTiming(1, {duration: highlightStartDuration, easing: Easing.inOut(Easing.ease)})), + withDelay(highlightEndDelay, withTiming(0, {duration: highlightEndDuration, easing: Easing.inOut(Easing.ease)})), + ), + ); + }), + ), ); })(); }); diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx index 38efb8eb929f..a34e8a47e0cb 100644 --- a/src/pages/Search/SearchPageBottomTab.tsx +++ b/src/pages/Search/SearchPageBottomTab.tsx @@ -37,7 +37,7 @@ function SearchPageBottomTab() { const scrollOffset = useSharedValue(0); const topBarOffset = useSharedValue(variables.searchHeaderHeight); const topBarAnimatedStyle = useAnimatedStyle(() => ({ - top: topBarOffset.value, + top: topBarOffset.get(), })); const scrollHandler = useAnimatedScrollHandler({ @@ -47,15 +47,14 @@ function SearchPageBottomTab() { return; } const currentOffset = contentOffset.y; - const isScrollingDown = currentOffset > scrollOffset.value; - const distanceScrolled = currentOffset - scrollOffset.value; + const isScrollingDown = currentOffset > scrollOffset.get(); + const distanceScrolled = currentOffset - scrollOffset.get(); if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) { - // eslint-disable-next-line react-compiler/react-compiler - topBarOffset.value = clamp(topBarOffset.value - distanceScrolled, variables.minimalTopBarOffset, variables.searchHeaderHeight); + topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, variables.searchHeaderHeight)); } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) { - topBarOffset.value = withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}); + topBarOffset.set(withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS})); } - scrollOffset.value = currentOffset; + scrollOffset.set(currentOffset); }, }); @@ -113,7 +112,7 @@ function SearchPageBottomTab() { { - topBarOffset.value = withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS}); + topBarOffset.set(withTiming(variables.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS})); }} /> diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index d277862ebf2c..56ae27de5ea1 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -35,13 +35,12 @@ function AnimatedEmptyStateBackground() { * We use x and y gyroscope velocity and add it to position offset to move background based on device movements. * Position the phone was in while entering the screen is the initial position for background image. */ - const {x, y} = animatedSensor.sensor.value; + const {x, y} = animatedSensor.sensor.get(); // The x vs y here seems wrong but is the way to make it feel right to the user - // eslint-disable-next-line react-compiler/react-compiler - xOffset.value = clamp(xOffset.value + y * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_X, IMAGE_OFFSET_X); - yOffset.value = clamp(yOffset.value - x * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y); + xOffset.set((value) => clamp(value + y * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_X, IMAGE_OFFSET_X)); + yOffset.set((value) => clamp(value - x * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y)); return { - transform: [{translateX: withSpring(xOffset.value)}, {translateY: withSpring(yOffset.value, {overshootClamping: true})}, {scale: 1.15}], + transform: [{translateX: withSpring(xOffset.get())}, {translateY: withSpring(yOffset.get(), {overshootClamping: true})}, {scale: 1.15}], }; }, [isReducedMotionEnabled]); diff --git a/src/pages/home/report/FloatingMessageCounter.tsx b/src/pages/home/report/FloatingMessageCounter.tsx index 0d92946e3d66..a196704d2119 100644 --- a/src/pages/home/report/FloatingMessageCounter.tsx +++ b/src/pages/home/report/FloatingMessageCounter.tsx @@ -30,13 +30,13 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating const show = useCallback(() => { 'worklet'; - translateY.value = withSpring(MARKER_ACTIVE_TRANSLATE_Y); + translateY.set(withSpring(MARKER_ACTIVE_TRANSLATE_Y)); }, [translateY]); const hide = useCallback(() => { 'worklet'; - translateY.value = withSpring(MARKER_INACTIVE_TRANSLATE_Y); + translateY.set(withSpring(MARKER_INACTIVE_TRANSLATE_Y)); }, [translateY]); useEffect(() => { @@ -49,7 +49,7 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating const wrapperStyle = useAnimatedStyle(() => ({ ...styles.floatingMessageCounterWrapper, - transform: [{translateY: translateY.value}], + transform: [{translateY: translateY.get()}], })); return ( diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 1cb70fe6c926..9042c30440f7 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -709,20 +709,19 @@ function ComposerWithSuggestions( 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); + }, [tag]); - tag.value = findNodeHandle(textInputRef.current) ?? -1; - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, []); useFocusedInputHandler( { onSelectionChange: (event) => { 'worklet'; - if (event.target === tag.value) { - cursorPositionValue.value = { + if (event.target === tag.get()) { + cursorPositionValue.set({ x: event.selection.end.x, y: event.selection.end.y, - }; + }); } }, }, @@ -731,7 +730,7 @@ function ComposerWithSuggestions( const measureParentContainerAndReportCursor = useCallback( (callback: MeasureParentContainerAndCursorCallback) => { const {scrollValue} = getScrollPosition({mobileInputScrollPosition, textInputRef}); - const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.value, positionOnWeb: selection}); + const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.get(), positionOnWeb: selection}); measureParentContainer((x, y, width, height) => { callback({ x, diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 23b059f2fda2..4673475063c8 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -342,7 +342,7 @@ function ReportActionCompose({ const handleSendMessage = useCallback(() => { 'worklet'; - const clearComposer = composerRefShared.value.clear; + const clearComposer = composerRefShared.get().clear; if (!clearComposer) { throw new Error('The composerRefShared.clear function is not set yet. This should never happen, and indicates a developer error.'); } @@ -468,10 +468,9 @@ function ReportActionCompose({ { composerRef.current = ref ?? undefined; - // eslint-disable-next-line react-compiler/react-compiler - composerRefShared.value = { + composerRefShared.set({ clear: ref?.clear, - }; + }); }} suggestionsRef={suggestionsRef} isNextModalWillOpenRef={isNextModalWillOpenRef} diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index fd2dc2d44d4b..8bcf5a462d38 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -417,7 +417,7 @@ function ReportActionItemMessageEdit( const measureParentContainerAndReportCursor = useCallback( (callback: MeasureParentContainerAndCursorCallback) => { const {scrollValue} = getScrollPosition({mobileInputScrollPosition, textInputRef}); - const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.value, positionOnWeb: selection}); + const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.get(), positionOnWeb: selection}); measureContainer((x, y, width, height) => { callback({ x, @@ -429,25 +429,23 @@ function ReportActionItemMessageEdit( }); }); }, - [cursorPositionValue.value, measureContainer, selection], + [cursorPositionValue, measureContainer, selection], ); 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. - - // eslint-disable-next-line react-compiler/react-compiler - tag.value = findNodeHandle(textInputRef.current) ?? -1; + tag.set(findNodeHandle(textInputRef.current) ?? -1); }, [tag]); useFocusedInputHandler( { onSelectionChange: (event) => { 'worklet'; - if (event.target === tag.value) { - cursorPositionValue.value = { + if (event.target === tag.get()) { + cursorPositionValue.set({ x: event.selection.end.x, y: event.selection.end.y, - }; + }); } }, }, diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index d3f0c9cb496d..61c856c856cf 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -120,8 +120,8 @@ function IOURequestStepScan({ const focusIndicatorPosition = useSharedValue({x: 0, y: 0}); const cameraFocusIndicatorAnimatedStyle = useAnimatedStyle(() => ({ - opacity: focusIndicatorOpacity.value, - transform: [{translateX: focusIndicatorPosition.value.x}, {translateY: focusIndicatorPosition.value.y}, {scale: focusIndicatorScale.value}], + opacity: focusIndicatorOpacity.get(), + transform: [{translateX: focusIndicatorPosition.get().x}, {translateY: focusIndicatorPosition.get().y}, {scale: focusIndicatorScale.get()}], })); const focusCamera = (point: Point) => { @@ -143,11 +143,10 @@ function IOURequestStepScan({ .onStart((ev: {x: number; y: number}) => { const point = {x: ev.x, y: ev.y}; - // eslint-disable-next-line react-compiler/react-compiler - focusIndicatorOpacity.value = withSequence(withTiming(0.8, {duration: 250}), withDelay(1000, withTiming(0, {duration: 250}))); - focusIndicatorScale.value = 2; - focusIndicatorScale.value = withSpring(1, {damping: 10, stiffness: 200}); - focusIndicatorPosition.value = point; + focusIndicatorOpacity.set(withSequence(withTiming(0.8, {duration: 250}), withDelay(1000, withTiming(0, {duration: 250})))); + focusIndicatorScale.set(2); + focusIndicatorScale.set(withSpring(1, {damping: 10, stiffness: 200})); + focusIndicatorPosition.set(point); runOnJS(focusCamera)(point); }); diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx index 75e0be7e5f7c..fc28dc08fb15 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx @@ -20,14 +20,15 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac const isAnonymous = isAnonymousUser(); const opacity = useSharedValue(0); - const animatedStyle = useAnimatedStyle(() => ({opacity: opacity.value})); + const animatedStyle = useAnimatedStyle(() => ({opacity: opacity.get()})); // This sets the opacity animation for the background image once it has loaded. function setOpacityAnimation() { - // eslint-disable-next-line react-compiler/react-compiler - opacity.value = withTiming(1, { - duration: CONST.MICROSECONDS_PER_MS, - easing: Easing.ease, - }); + opacity.set( + withTiming(1, { + duration: CONST.MICROSECONDS_PER_MS, + easing: Easing.ease, + }), + ); } useEffect(() => { From 70253160c8bc659506327794b52ee853bfab2a08 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Nov 2024 15:03:51 +0100 Subject: [PATCH 046/381] Refactor LoadingBar to use setter methods for animated values --- src/components/LoadingBar.tsx | 75 +++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx index 163ffe2aa66b..5650c3fe38ac 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -17,44 +17,49 @@ function LoadingBar({shouldShow}: LoadingBarProps) { useEffect(() => { if (shouldShow) { - // eslint-disable-next-line react-compiler/react-compiler - isVisible.value = true; - left.value = 0; - width.value = 0; - opacity.value = withTiming(1, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}); - left.value = withDelay( - CONST.ANIMATED_PROGRESS_BAR_DELAY, - withRepeat( - withSequence( - withTiming(0, {duration: 0}), - withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + isVisible.set(true); + left.set(0); + width.set(0); + opacity.set(withTiming(1, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION})); + left.set( + withDelay( + CONST.ANIMATED_PROGRESS_BAR_DELAY, + withRepeat( + withSequence( + withTiming(0, {duration: 0}), + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + ), + -1, + false, ), - -1, - false, ), ); - width.value = withDelay( - CONST.ANIMATED_PROGRESS_BAR_DELAY, - withRepeat( - withSequence( - withTiming(0, {duration: 0}), - withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + width.set( + withDelay( + CONST.ANIMATED_PROGRESS_BAR_DELAY, + withRepeat( + withSequence( + withTiming(0, {duration: 0}), + withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + ), + -1, + false, ), - -1, - false, ), ); - } else if (isVisible.value) { - opacity.value = withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}, () => { - runOnJS(() => { - isVisible.value = false; - cancelAnimation(left); - cancelAnimation(width); - }); - }); + } else if (isVisible.get()) { + opacity.set( + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}, () => { + runOnJS(() => { + isVisible.set(false); + cancelAnimation(left); + cancelAnimation(width); + }); + }), + ); } // we want to update only when shouldShow changes // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps @@ -62,20 +67,20 @@ function LoadingBar({shouldShow}: LoadingBarProps) { const animatedIndicatorStyle = useAnimatedStyle(() => { return { - left: `${left.value}%`, - width: `${width.value}%`, + left: `${left.get()}%`, + width: `${width.get()}%`, }; }); const animatedContainerStyle = useAnimatedStyle(() => { return { - opacity: opacity.value, + opacity: opacity.get(), }; }); return ( - {isVisible.value ? : null} + {isVisible.get() ? : null} ); } From 166923b0a96fd200a493d916204cab488c0c86a2 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 5 Nov 2024 14:17:09 -0700 Subject: [PATCH 047/381] update param name --- src/components/Search/SearchPageHeader.tsx | 4 ++-- src/components/Search/types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index dc3efae4bdbc..05ae72654daf 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -218,11 +218,11 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { } const paymentData = ( selectedReports.length - ? selectedReports.map((report) => ({reportID: report.reportID, amount: report.total, paymentMethod: lastPaymentMethods[report.policyID]})) + ? selectedReports.map((report) => ({reportID: report.reportID, amount: report.total, paymentType: lastPaymentMethods[report.policyID]})) : Object.values(selectedTransactions).map((transaction) => ({ reportID: transaction.reportID, amount: transaction.amount, - paymentMethod: lastPaymentMethods[transaction.policyID], + paymentType: lastPaymentMethods[transaction.policyID], })) ) as PaymentData[]; diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index 9b97ac446d5b..d88a4e3dd3be 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -45,7 +45,7 @@ type SelectedReports = { type PaymentData = { reportID: string; amount: number; - paymentMethod: ValueOf; + paymentType: ValueOf; }; type SortOrder = ValueOf; From 8277ee5023ae528d5180a0033266139a3ed568ea Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 5 Nov 2024 15:36:12 -0700 Subject: [PATCH 048/381] fix ts --- src/libs/actions/Search.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index dca82a66fd9c..f343d0d6b849 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -39,7 +39,7 @@ function handleActionButtonPress(hash: number, item: TransactionListItemType | R const amount = isReportListItemType(item) ? item.total ?? 0 : item.formattedTotal; switch (item.action) { case CONST.SEARCH.ACTION_TYPES.PAY: - return lastPolicyPaymentMethod ? payMoneyRequestOnSearch(hash, [{reportID: item.reportID, amount, paymentMethod: lastPolicyPaymentMethod}]) : goToItem(); + return lastPolicyPaymentMethod ? payMoneyRequestOnSearch(hash, [{reportID: item.reportID, amount, paymentType: lastPolicyPaymentMethod}]) : goToItem(); case CONST.SEARCH.ACTION_TYPES.APPROVE: return approveMoneyRequestOnSearch(hash, [item.reportID]); default: From 0d3a83fcfba17c3209a62df4a6acaee3a13456b3 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 5 Nov 2024 15:50:05 -0700 Subject: [PATCH 049/381] update docs --- src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts b/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts index ee51a1961448..a12c0fdc32f2 100644 --- a/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts +++ b/src/libs/API/parameters/PayMoneyRequestOnSearchParams.ts @@ -2,7 +2,7 @@ type PayMoneyRequestOnSearchParams = { hash: number; /** * Stringified JSON object with type of following structure: - * Array<{reportID: string, amount: number, paymentMethod: string}> + * Array<{reportID: string, amount: number, paymentType: string}> */ paymentData: string; }; From 317183449f69eb0b1f6486e8e4b14c0a713f6ddd Mon Sep 17 00:00:00 2001 From: layacat Date: Wed, 6 Nov 2024 10:31:09 +0700 Subject: [PATCH 050/381] fix: 50485 mWeb/Chrome - IOU- Continue and green button not working in scan page --- .../new-expensify/expenses-&-payments/Create-an-expense.md | 5 +++++ src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/articles/new-expensify/expenses-&-payments/Create-an-expense.md b/docs/articles/new-expensify/expenses-&-payments/Create-an-expense.md index cf6a13f9d5ac..5b43223ae3c3 100644 --- a/docs/articles/new-expensify/expenses-&-payments/Create-an-expense.md +++ b/docs/articles/new-expensify/expenses-&-payments/Create-an-expense.md @@ -40,6 +40,11 @@ You can create an expense to request payment from an employer’s workspace or f You can also forward receipts to receipts@expensify.com using an email address that is your primary or secondary email address. SmartScan will automatically pull all of the details from the receipt and add it to your expenses. {% include end-info.html %} +{% include info.html %} +If the Continue button doesn't open the camera on your mobile web browser, +it might be because you denied camera permission. Learn how to enable camera permission in your browser [here](https://support.google.com/chrome/answer/2693767). +{% include end-info.html %} + # Manually add an expense {% include selector.html values="desktop, mobile" %} diff --git a/src/languages/en.ts b/src/languages/en.ts index 21f220b747f2..5a56363ad3da 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -779,7 +779,7 @@ const translations = { dragReceiptAfterEmail: ' or choose a file to upload below.', chooseReceipt: 'Choose a receipt to upload or forward a receipt to ', takePhoto: 'Take a photo', - cameraAccess: 'Camera access is required to take pictures of receipts.', + cameraAccess: "Camera access still hasn't been granted, please follow these instructions", cameraErrorTitle: 'Camera error', cameraErrorMessage: 'An error occurred while taking a photo. Please try again.', locationAccessTitle: 'Allow location access', diff --git a/src/languages/es.ts b/src/languages/es.ts index ac06741f467e..a1ef94209c88 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -773,7 +773,7 @@ const translations = { dragReceiptAfterEmail: ' o elije un archivo para subir a continuación.', chooseReceipt: 'Elige un recibo para subir o reenvía un recibo a ', takePhoto: 'Haz una foto', - cameraAccess: 'Se requiere acceso a la cámara para hacer fotos de los recibos.', + cameraAccess: 'Si aún no se ha concedido el acceso a la cámara, siga estas instrucciones', cameraErrorTitle: 'Error en la cámara', locationAccessTitle: 'Permitir acceso a la ubicación', locationAccessMessage: 'El acceso a la ubicación nos ayuda a mantener tu zona horaria y moneda precisas dondequiera que vayas.', From 2d8e017514c80c23f255d32a5511379b6bcd2491 Mon Sep 17 00:00:00 2001 From: layacat Date: Wed, 6 Nov 2024 18:39:05 +0700 Subject: [PATCH 051/381] Fix show only when denied --- src/languages/en.ts | 4 ++- src/languages/es.ts | 4 ++- .../request/step/IOURequestStepScan/index.tsx | 28 +++++++++++++------ 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 5a56363ad3da..065470c1eba8 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -779,7 +779,9 @@ const translations = { dragReceiptAfterEmail: ' or choose a file to upload below.', chooseReceipt: 'Choose a receipt to upload or forward a receipt to ', takePhoto: 'Take a photo', - cameraAccess: "Camera access still hasn't been granted, please follow these instructions", + cameraAccess: 'Camera access is required to take pictures of receipts.', + deniedCameraAccess: "Camera access still hasn't been granted, please follow ", + deniedCameraAccessInstructions: 'these instructions', cameraErrorTitle: 'Camera error', cameraErrorMessage: 'An error occurred while taking a photo. Please try again.', locationAccessTitle: 'Allow location access', diff --git a/src/languages/es.ts b/src/languages/es.ts index a1ef94209c88..d8e2ccf206e4 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -773,7 +773,9 @@ const translations = { dragReceiptAfterEmail: ' o elije un archivo para subir a continuación.', chooseReceipt: 'Elige un recibo para subir o reenvía un recibo a ', takePhoto: 'Haz una foto', - cameraAccess: 'Si aún no se ha concedido el acceso a la cámara, siga estas instrucciones', + cameraAccess: 'Se requiere acceso a la cámara para hacer fotos de los recibos.', + deniedCameraAccess: 'Si aún no se ha concedido el acceso a la cámara, siga ', + deniedCameraAccessInstructions: 'estas instrucciones', cameraErrorTitle: 'Error en la cámara', locationAccessTitle: 'Permitir acceso a la ubicación', locationAccessMessage: 'El acceso a la ubicación nos ayuda a mantener tu zona horaria y moneda precisas dondequiera que vayas.', diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 4ed956e5ce7e..e3a6fc1f8cb5 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -20,6 +20,7 @@ import LocationPermissionModal from '@components/LocationPermissionModal'; import PDFThumbnail from '@components/PDFThumbnail'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; +import TextLink from '@components/TextLink'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; @@ -629,14 +630,25 @@ function IOURequestStepScan({ additionalStyles={[styles.pb5]} /> {translate('receipt.takePhoto')} - {translate('receipt.cameraAccess')} -