From b9799bf34dbe53da7dfe84a8b64ff100ad203fb9 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 13:16:32 +0700 Subject: [PATCH 01/10] rename --- src/CONST.ts | 4 ++-- .../SettlementButton/AnimatedSettlementButton.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 8698c59f8b84..1d30e57fff92 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -189,8 +189,8 @@ const CONST = { }, // Multiplier for gyroscope animation in order to make it a bit more subtle ANIMATION_GYROSCOPE_VALUE: 0.4, - ANIMATION_PAY_BUTTON_DURATION: 200, - ANIMATION_PAY_BUTTON_HIDE_DELAY: 1000, + ANIMATION_PAID_DURATION: 200, + ANIMATION_PAID_BUTTON_HIDE_DELAY: 1000, BACKGROUND_IMAGE_TRANSITION_DURATION: 1000, SCREEN_TRANSITION_END_TIMEOUT: 1000, ARROW_HIDE_DELAY: 3000, diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx index c2dc4937503d..839c439a3bce 100644 --- a/src/components/SettlementButton/AnimatedSettlementButton.tsx +++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx @@ -56,17 +56,17 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is return; } // eslint-disable-next-line react-compiler/react-compiler - buttonScale.value = withTiming(0, {duration: CONST.ANIMATION_PAY_BUTTON_DURATION}); - buttonOpacity.value = withTiming(0, {duration: CONST.ANIMATION_PAY_BUTTON_DURATION}); - paymentCompleteTextScale.value = withTiming(1, {duration: CONST.ANIMATION_PAY_BUTTON_DURATION}); + 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}); // Wait for the above animation + 1s delay before hiding the component - const totalDelay = CONST.ANIMATION_PAY_BUTTON_DURATION + CONST.ANIMATION_PAY_BUTTON_HIDE_DELAY; + const totalDelay = CONST.ANIMATION_PAID_DURATION + CONST.ANIMATION_PAID_BUTTON_HIDE_DELAY; height.value = withDelay( totalDelay, - withTiming(0, {duration: CONST.ANIMATION_PAY_BUTTON_DURATION}, () => runOnJS(onAnimationFinish)()), + withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()), ); - paymentCompleteTextOpacity.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAY_BUTTON_DURATION})); + paymentCompleteTextOpacity.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION})); }, [isPaidAnimationRunning, onAnimationFinish, buttonOpacity, buttonScale, height, paymentCompleteTextOpacity, paymentCompleteTextScale, resetAnimation]); return ( From 13ee2d7fd69ce0d3c7f27b448852c3d0f15127cf Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 13:17:59 +0700 Subject: [PATCH 02/10] animate the checkmark --- .../ReportActionItem/ReportPreview.tsx | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 1b4d51088019..3b0ef3f62d60 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -1,9 +1,10 @@ import truncate from 'lodash/truncate'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import {useOnyx, withOnyx} from 'react-native-onyx'; +import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import Button from '@components/Button'; import DelegateNoAccessModal from '@components/DelegateNoAccessModal'; import Icon from '@components/Icon'; @@ -151,6 +152,11 @@ function ReportPreview({ const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(iouReport); const iouSettled = ReportUtils.isSettled(iouReportID) || action?.childStatusNum === CONST.REPORT.STATUS_NUM.REIMBURSED; + const checkMarkOpacity = useSharedValue(iouSettled ? 1 : 0); + const checkMarkStyle = useAnimatedStyle(() => ({ + ...styles.defaultCheckmarkWrapper, + opacity: checkMarkOpacity.value, + })); const moneyRequestComment = action?.childLastMoneyRequestComment ?? ''; const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport); @@ -400,6 +406,18 @@ function ReportPreview({ const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport); + useEffect(() => { + if (!iouSettled) { + return; + } + + if (isPaidAnimationRunning) { + checkMarkOpacity.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION}); + } else { + checkMarkOpacity.value = 1; + } + }, [isPaidAnimationRunning, iouSettled]); + return ( {getDisplayAmount()} {iouSettled && ( - + - + )} From a524085a0670a76d8c3c8f8b0e62efcef10b79dd Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 13:18:09 +0700 Subject: [PATCH 03/10] animate the spacing too --- src/components/ReportActionItem/ReportPreview.tsx | 2 +- src/components/SettlementButton/AnimatedSettlementButton.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 3b0ef3f62d60..c4c98e7c0ec3 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -447,7 +447,7 @@ function ReportPreview({ /> )} - + diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx index 839c439a3bce..b22586756027 100644 --- a/src/components/SettlementButton/AnimatedSettlementButton.tsx +++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx @@ -19,6 +19,7 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is const paymentCompleteTextScale = useSharedValue(0); const paymentCompleteTextOpacity = useSharedValue(1); const height = useSharedValue(variables.componentSizeNormal); + const buttonMarginTop = useSharedValue(styles.expenseAndReportPreviewTextButtonContainer.gap); const buttonStyles = useAnimatedStyle(() => ({ transform: [{scale: buttonScale.value}], opacity: buttonOpacity.value, @@ -33,6 +34,7 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is height: height.value, justifyContent: 'center', overflow: 'hidden', + marginTop: buttonMarginTop.value, })); const buttonDisabledStyle = isPaidAnimationRunning ? { @@ -66,6 +68,7 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is 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})); }, [isPaidAnimationRunning, onAnimationFinish, buttonOpacity, buttonScale, height, paymentCompleteTextOpacity, paymentCompleteTextScale, resetAnimation]); From a4beb090ca897f1a95f806de4a354f151c75c2ab Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 13:27:12 +0700 Subject: [PATCH 04/10] replace withOnyx with useOnyx --- .../ReportActionItem/ReportPreview.tsx | 61 ++++--------------- 1 file changed, 11 insertions(+), 50 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index c4c98e7c0ec3..2b6808691e05 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -2,8 +2,7 @@ import truncate from 'lodash/truncate'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import Button from '@components/Button'; import DelegateNoAccessModal from '@components/DelegateNoAccessModal'; @@ -40,33 +39,14 @@ import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Policy, Report, ReportAction, Transaction, TransactionViolations, UserWallet} from '@src/types/onyx'; +import type {ReportAction} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import ExportWithDropdownMenu from './ExportWithDropdownMenu'; import type {PendingMessageProps} from './MoneyRequestPreview/types'; import ReportActionItemImages from './ReportActionItemImages'; +import usePolicy from '@hooks/usePolicy'; -type ReportPreviewOnyxProps = { - /** The policy tied to the expense report */ - policy: OnyxEntry; - - /** ChatReport associated with iouReport */ - chatReport: OnyxEntry; - - /** Active IOU Report for current report */ - iouReport: OnyxEntry; - - /** All the transactions, used to update ReportPreview label and status */ - transactions: OnyxCollection; - - /** All of the transaction violations */ - transactionViolations: OnyxCollection; - - /** The user's wallet account */ - userWallet: OnyxEntry; -}; - -type ReportPreviewProps = ReportPreviewOnyxProps & { +type ReportPreviewProps = { /** All the data of the action */ action: ReportAction; @@ -102,24 +82,24 @@ type ReportPreviewProps = ReportPreviewOnyxProps & { }; function ReportPreview({ - iouReport, - policy, iouReportID, policyID, chatReportID, - chatReport, action, containerStyles, contextMenuAnchor, - transactions, - transactionViolations, isHovered = false, isWhisper = false, checkIfContextMenuActive = () => {}, onPaymentOptionsShow, onPaymentOptionsHide, - userWallet, }: ReportPreviewProps) { + const policy = usePolicy(policyID); + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`); + const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`); + const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION); + const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -580,23 +560,4 @@ function ReportPreview({ ReportPreview.displayName = 'ReportPreview'; -export default withOnyx({ - policy: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, - }, - chatReport: { - key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, - }, - iouReport: { - key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`, - }, - transactions: { - key: ONYXKEYS.COLLECTION.TRANSACTION, - }, - transactionViolations: { - key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, - }, - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, -})(ReportPreview); +export default ReportPreview; From aaeef2e975b573439aea42dabb434a381cc988fa Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 13:43:26 +0700 Subject: [PATCH 05/10] lint --- src/components/ReportActionItem/ReportPreview.tsx | 5 +++-- src/components/SettlementButton/AnimatedSettlementButton.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 2b6808691e05..e363c4ae87f5 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -18,6 +18,7 @@ import Text from '@components/Text'; import useDelegateUserDetails from '@hooks/useDelegateUserDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import usePolicy from '@hooks/usePolicy'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; @@ -44,7 +45,6 @@ import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import ExportWithDropdownMenu from './ExportWithDropdownMenu'; import type {PendingMessageProps} from './MoneyRequestPreview/types'; import ReportActionItemImages from './ReportActionItemImages'; -import usePolicy from '@hooks/usePolicy'; type ReportPreviewProps = { /** All the data of the action */ @@ -392,11 +392,12 @@ function ReportPreview({ } if (isPaidAnimationRunning) { + // eslint-disable-next-line react-compiler/react-compiler checkMarkOpacity.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION}); } else { checkMarkOpacity.value = 1; } - }, [isPaidAnimationRunning, iouSettled]); + }, [isPaidAnimationRunning, iouSettled, checkMarkOpacity]); return ( From b382e0e308d33493a7d14ed9f4eb63015a98b5e2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 15:26:29 +0700 Subject: [PATCH 06/10] fix missing spacing --- src/components/SettlementButton/AnimatedSettlementButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx index 7411154022bb..648c1dad36c3 100644 --- a/src/components/SettlementButton/AnimatedSettlementButton.tsx +++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx @@ -50,7 +50,8 @@ function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, is paymentCompleteTextScale.value = 0; paymentCompleteTextOpacity.value = 1; height.value = variables.componentSizeNormal; - }, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height]); + buttonMarginTop.value = styles.expenseAndReportPreviewTextButtonContainer.gap; + }, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height, buttonMarginTop, styles.expenseAndReportPreviewTextButtonContainer.gap]); useEffect(() => { if (!isPaidAnimationRunning) { From 5bdbedf280b05fa3faaa9d6bb49af43b41674529 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 15:26:37 +0700 Subject: [PATCH 07/10] animate preview text --- .../ReportActionItem/ReportPreview.tsx | 43 ++++++++++++++++--- 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index e363c4ae87f5..b2ff3b98a3cd 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -132,6 +132,13 @@ function ReportPreview({ const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(iouReport); const iouSettled = ReportUtils.isSettled(iouReportID) || action?.childStatusNum === CONST.REPORT.STATUS_NUM.REIMBURSED; + const previewMessageOpacity = useSharedValue(1); + const previewMessageStyle = useAnimatedStyle(() => ({ + ...styles.flex1, + ...styles.flexRow, + ...styles.alignItemsCenter, + opacity: previewMessageOpacity.value, + })); const checkMarkOpacity = useSharedValue(iouSettled ? 1 : 0); const checkMarkStyle = useAnimatedStyle(() => ({ ...styles.defaultCheckmarkWrapper, @@ -271,14 +278,14 @@ function ReportPreview({ return !Number.isNaN(amount) && amount === 0; } - const getPreviewMessage = () => { + const previewMessage = useMemo(() => { if (isScanning) { return translate('common.receipt'); } let payerOrApproverName; if (isPolicyExpenseChat) { - payerOrApproverName = ReportUtils.getPolicyName(chatReport); + payerOrApproverName = ReportUtils.getPolicyName(chatReport, undefined, policy); } else if (isInvoiceRoom) { payerOrApproverName = ReportUtils.getInvoicePayerName(chatReport, invoiceReceiverPolicy); } else { @@ -296,7 +303,20 @@ function ReportPreview({ payerOrApproverName = ReportUtils.getDisplayNameForParticipant(chatReport?.ownerAccountID, true); } return translate(paymentVerb, {payer: payerOrApproverName}); - }; + }, [ + isScanning, + isPolicyExpenseChat, + chatReport, + isInvoiceRoom, + invoiceReceiverPolicy, + managerID, + isApproved, + iouSettled, + iouReport?.isWaitingOnBankAccount, + hasNonReimbursableTransactions, + chatReport?.ownerAccountID, + translate, + ]); const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); @@ -386,6 +406,17 @@ function ReportPreview({ const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport); + useEffect(() => { + if (!isPaidAnimationRunning) { + return; + } + + // eslint-disable-next-line react-compiler/react-compiler + previewMessageOpacity.value = withTiming(0.75, {duration: CONST.ANIMATION_PAID_DURATION / 2}, () => { + previewMessageOpacity.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION / 2}); + }); + }, [previewMessage, previewMessageOpacity]); + useEffect(() => { if (!iouSettled) { return; @@ -431,9 +462,9 @@ function ReportPreview({ - - {getPreviewMessage()} - + + {previewMessage} + {shouldShowRBR && ( Date: Thu, 19 Sep 2024 15:32:52 +0700 Subject: [PATCH 08/10] lint --- src/components/ReportActionItem/ReportPreview.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index b2ff3b98a3cd..3e7cec3d07f0 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -306,6 +306,7 @@ function ReportPreview({ }, [ isScanning, isPolicyExpenseChat, + policy, chatReport, isInvoiceRoom, invoiceReceiverPolicy, @@ -413,8 +414,11 @@ function ReportPreview({ // 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}); }); + // We only want to animate the text when the text changes + // eslint-disable-next-line react-hooks/exhaustive-deps }, [previewMessage, previewMessageOpacity]); useEffect(() => { From 5afcac45f13354f3ea407c7cd0cf18d87724ddf5 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 19 Sep 2024 15:55:42 +0700 Subject: [PATCH 09/10] lint --- src/components/ReportActionItem/ReportPreview.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 3e7cec3d07f0..d7f1c7a3a875 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -315,7 +315,6 @@ function ReportPreview({ iouSettled, iouReport?.isWaitingOnBankAccount, hasNonReimbursableTransactions, - chatReport?.ownerAccountID, translate, ]); @@ -418,7 +417,7 @@ function ReportPreview({ previewMessageOpacity.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION / 2}); }); // We only want to animate the text when the text changes - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [previewMessage, previewMessageOpacity]); useEffect(() => { From a46ffb82d454203f3389239476da1b7529e6a7f0 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 20 Sep 2024 21:16:54 +0700 Subject: [PATCH 10/10] change the checkmark animation to bounce and add delay --- src/CONST.ts | 1 + src/components/ReportActionItem/ReportPreview.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index e9a79e9ec735..55648dd82b91 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -190,6 +190,7 @@ const CONST = { // Multiplier for gyroscope animation in order to make it a bit more subtle ANIMATION_GYROSCOPE_VALUE: 0.4, ANIMATION_PAID_DURATION: 200, + ANIMATION_PAID_CHECKMARK_DELAY: 300, ANIMATION_PAID_BUTTON_HIDE_DELAY: 1000, BACKGROUND_IMAGE_TRANSITION_DURATION: 1000, SCREEN_TRANSITION_END_TIMEOUT: 1000, diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index d7f1c7a3a875..50ab8e9ee08c 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; -import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated'; import Button from '@components/Button'; import DelegateNoAccessModal from '@components/DelegateNoAccessModal'; import Icon from '@components/Icon'; @@ -139,10 +139,10 @@ function ReportPreview({ ...styles.alignItemsCenter, opacity: previewMessageOpacity.value, })); - const checkMarkOpacity = useSharedValue(iouSettled ? 1 : 0); + const checkMarkScale = useSharedValue(iouSettled ? 1 : 0); const checkMarkStyle = useAnimatedStyle(() => ({ ...styles.defaultCheckmarkWrapper, - opacity: checkMarkOpacity.value, + transform: [{scale: checkMarkScale.value}], })); const moneyRequestComment = action?.childLastMoneyRequestComment ?? ''; @@ -427,11 +427,11 @@ function ReportPreview({ if (isPaidAnimationRunning) { // eslint-disable-next-line react-compiler/react-compiler - checkMarkOpacity.value = withTiming(1, {duration: CONST.ANIMATION_PAID_DURATION}); + checkMarkScale.value = withDelay(CONST.ANIMATION_PAID_CHECKMARK_DELAY, withSpring(1, {duration: CONST.ANIMATION_PAID_DURATION})); } else { - checkMarkOpacity.value = 1; + checkMarkScale.value = 1; } - }, [isPaidAnimationRunning, iouSettled, checkMarkOpacity]); + }, [isPaidAnimationRunning, iouSettled, checkMarkScale]); return (