From c1126e8d98953d936e3259a365161386a821cb8d Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 18 Nov 2025 14:16:04 +0100 Subject: [PATCH 1/2] refactor: migrate `TransactionReceiptModalContent` to dismissModal callback --- src/components/Modal/BaseModal.tsx | 13 ++++++++----- .../routes/TransactionReceiptModalContent.tsx | 9 ++------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 74fecb97dbebd..ddfcf105f575a 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -1,8 +1,8 @@ -import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; -import type {LayoutChangeEvent} from 'react-native'; +import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import type { LayoutChangeEvent } from 'react-native'; // Animated required for side panel navigation // eslint-disable-next-line no-restricted-imports -import {Animated, View} from 'react-native'; +import {Animated, DeviceEventEmitter, View} from 'react-native'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import NavigationBar from '@components/NavigationBar'; import ScreenWrapperOfflineIndicatorContext from '@components/ScreenWrapper/ScreenWrapperOfflineIndicatorContext'; @@ -16,16 +16,17 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ComposerFocusManager from '@libs/ComposerFocusManager'; -import {canUseTouchScreen as canUseTouchScreenCheck} from '@libs/DeviceCapabilities'; +import { canUseTouchScreen as canUseTouchScreenCheck } from '@libs/DeviceCapabilities'; import NarrowPaneContext from '@libs/Navigation/AppNavigator/Navigators/NarrowPaneContext'; import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay'; import Navigation from '@libs/Navigation/Navigation'; -import {areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible} from '@userActions/Modal'; +import { areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible } from '@userActions/Modal'; import CONST from '@src/CONST'; import ModalContext from './ModalContext'; import ReanimatedModal from './ReanimatedModal'; import type BaseModalProps from './types'; + function BaseModal({ isVisible, onClose, @@ -156,6 +157,8 @@ function BaseModal({ [], ); + useEffect(() => () => DeviceEventEmitter.emit(CONST.MODAL_EVENTS.CLOSED), []); + const handleShowModal = useCallback(() => { if (shouldSetModalVisibility) { setModalVisibility(true, type); diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx index ed52569e23ee5..95e974fc12505 100644 --- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx @@ -1,5 +1,4 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {InteractionManager} from 'react-native'; import ConfirmModal from '@components/ConfirmModal'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; @@ -159,10 +158,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre icon: Expensicons.Camera, text: translate('common.replace'), onSelected: () => { - Navigation.dismissModal(); - // eslint-disable-next-line @typescript-eslint/no-deprecated - InteractionManager.runAfterInteractions(() => { - Navigation.navigate( + Navigation.dismissModal({callback: () => Navigation.navigate( ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( action ?? CONST.IOU.ACTION.EDIT, iouType, @@ -170,8 +166,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre report?.reportID, Navigation.getActiveRoute(), ), - ); - }); + )}); }, }); } From 31f6e5b1835a8abbb7195bd702f9cd8fbd4f930a Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 18 Nov 2025 14:23:38 +0100 Subject: [PATCH 2/2] chore: fix prettier --- src/components/Modal/BaseModal.tsx | 9 ++++----- .../routes/TransactionReceiptModalContent.tsx | 19 +++++++++++-------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index ddfcf105f575a..3f0b68c72b545 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -1,5 +1,5 @@ -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import type { LayoutChangeEvent } from 'react-native'; +import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; +import type {LayoutChangeEvent} from 'react-native'; // Animated required for side panel navigation // eslint-disable-next-line no-restricted-imports import {Animated, DeviceEventEmitter, View} from 'react-native'; @@ -16,17 +16,16 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ComposerFocusManager from '@libs/ComposerFocusManager'; -import { canUseTouchScreen as canUseTouchScreenCheck } from '@libs/DeviceCapabilities'; +import {canUseTouchScreen as canUseTouchScreenCheck} from '@libs/DeviceCapabilities'; import NarrowPaneContext from '@libs/Navigation/AppNavigator/Navigators/NarrowPaneContext'; import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay'; import Navigation from '@libs/Navigation/Navigation'; -import { areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible } from '@userActions/Modal'; +import {areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible} from '@userActions/Modal'; import CONST from '@src/CONST'; import ModalContext from './ModalContext'; import ReanimatedModal from './ReanimatedModal'; import type BaseModalProps from './types'; - function BaseModal({ isVisible, onClose, diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx index 95e974fc12505..90e9c9206ffad 100644 --- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx @@ -158,15 +158,18 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre icon: Expensicons.Camera, text: translate('common.replace'), onSelected: () => { - Navigation.dismissModal({callback: () => Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( - action ?? CONST.IOU.ACTION.EDIT, - iouType, - draftTransactionID ?? transaction?.transactionID, - report?.reportID, - Navigation.getActiveRoute(), + Navigation.dismissModal({ + callback: () => + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( + action ?? CONST.IOU.ACTION.EDIT, + iouType, + draftTransactionID ?? transaction?.transactionID, + report?.reportID, + Navigation.getActiveRoute(), + ), ), - )}); + }); }, }); }