From f4f7eb1f44a53810d6cb824ae276a3378f730f92 Mon Sep 17 00:00:00 2001
From: Samran Ahmed <samranahmed03@gmail.com>
Date: Tue, 2 Dec 2025 20:19:23 +0500
Subject: [PATCH] fix: reset card details when navigating from expensify card
 page

---
 .../settings/Wallet/ExpensifyCardPage/index.tsx  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
index f4dfeebb2248..767db3d05424 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
+++ b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
@@ -1,4 +1,5 @@
-import React, {useContext, useEffect, useMemo, useState} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -13,7 +14,6 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
-import useBeforeRemove from '@hooks/useBeforeRemove';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -132,10 +132,14 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
 
     const {cardsDetails, setCardsDetails, isCardDetailsLoading, cardsDetailsErrors} = useExpensifyCardContext();
 
-    // This resets card details when we exit the page.
-    useBeforeRemove(() => {
-        setCardsDetails((oldCardDetails) => ({...oldCardDetails, [cardID]: null}));
-    });
+    // Resets card details when navigating away from the page.
+    useFocusEffect(
+        useCallback(() => {
+            return () => {
+                setCardsDetails((oldCardDetails) => ({...oldCardDetails, [cardID]: null}));
+            };
+        }, [cardID, setCardsDetails]),
+    );
 
     const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext);