From 6e254fbb465ea970c6177c15cf5e6692f6716e4b Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Tue, 28 Oct 2025 22:19:29 +0700
Subject: [PATCH 1/2] fix: footer text flickers in expensify card list

---
 .../expensifyCard/WorkspaceExpensifyCardListPage.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
index 64367d7b1bc3b..b8736c66b8144 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -83,7 +83,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
     const isBankAccountVerified = !cardOnWaitlist;
     const {windowHeight} = useWindowDimensions();
     const headerHeight = useEmptyViewHeaderHeight(shouldUseNarrowLayout, isBankAccountVerified);
-    const [footerHeight, setFooterHeight] = useState(0);
+    const [footerHeight, setFooterHeight] = useState<number | undefined>(undefined);
 
     const settlementCurrency = useCurrencyForExpensifyCard({policyID});
 
@@ -259,10 +259,10 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
                         data={filteredSortedCards}
                         renderItem={renderItem}
                         ListHeaderComponent={renderListHeader}
-                        contentContainerStyle={[styles.flexGrow1, {minHeight: windowHeight - headerHeight + footerHeight}]}
+                        contentContainerStyle={[styles.flexGrow1, {minHeight: windowHeight - headerHeight + (footerHeight ?? 0)}]}
                         ListFooterComponent={
                             <Text
-                                style={[styles.textMicroSupporting, styles.p5]}
+                                style={[styles.textMicroSupporting, styles.p5, footerHeight === undefined && styles.opacity0]}
                                 onLayout={(event) => setFooterHeight(event.nativeEvent.layout.height)}
                             >
                                 {translate(isUkEuCurrencySupported ? 'workspace.expensifyCard.euUkDisclaimer' : 'workspace.expensifyCard.disclaimer')}

From 3aac01ed2a6ac6ddbc48ba54d2b2f1d6bba4e6d3 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 30 Oct 2025 10:41:37 +0700
Subject: [PATCH 2/2] using simpler solution

---
 .../expensifyCard/WorkspaceExpensifyCardListPage.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
index b8736c66b8144..1fbf549d39ea8 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -83,7 +83,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
     const isBankAccountVerified = !cardOnWaitlist;
     const {windowHeight} = useWindowDimensions();
     const headerHeight = useEmptyViewHeaderHeight(shouldUseNarrowLayout, isBankAccountVerified);
-    const [footerHeight, setFooterHeight] = useState<number | undefined>(undefined);
+    const [footerHeight, setFooterHeight] = useState(0);
 
     const settlementCurrency = useCurrencyForExpensifyCard({policyID});
 
@@ -259,10 +259,10 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
                         data={filteredSortedCards}
                         renderItem={renderItem}
                         ListHeaderComponent={renderListHeader}
-                        contentContainerStyle={[styles.flexGrow1, {minHeight: windowHeight - headerHeight + (footerHeight ?? 0)}]}
+                        contentContainerStyle={[styles.flexGrow1, {minHeight: windowHeight - headerHeight + footerHeight}]}
                         ListFooterComponent={
                             <Text
-                                style={[styles.textMicroSupporting, styles.p5, footerHeight === undefined && styles.opacity0]}
+                                style={[styles.textMicroSupporting, styles.p5, footerHeight === 0 && {opacity: 0}]}
                                 onLayout={(event) => setFooterHeight(event.nativeEvent.layout.height)}
                             >
                                 {translate(isUkEuCurrencySupported ? 'workspace.expensifyCard.euUkDisclaimer' : 'workspace.expensifyCard.disclaimer')}