fix: Wallet - Unable to scroll the page from assigned cards mid section

Author: drminh2807

src/pages/settings/Wallet/PaymentMethodList.tsx

@@ -1,8 +1,9 @@
+import {FlashList} from '@shopify/flash-list';
 import lodashSortBy from 'lodash/sortBy';
 import type {ReactElement, Ref} from 'react';
 import React, {useCallback, useMemo} from 'react';
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
-import {FlatList, View} from 'react-native';
+import {View} from 'react-native';
 import type {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG';
 import type {ValueOf} from 'type-fest';
 import type {RenderSuggestionMenuItemProps} from '@components/AutoCompleteSuggestions/types';
@@ -71,9 +72,6 @@ type PaymentMethodListProps = {
     /** React ref being forwarded to the PaymentMethodList Button */
     buttonRef?: Ref<View>;
 
-    /** To enable/disable scrolling */
-    shouldEnableScroll?: boolean;
-
     /** List container style */
     style?: StyleProp<ViewStyle>;
 
@@ -187,7 +185,6 @@ function PaymentMethodList({
     shouldShowAssignedCards = false,
     selectedMethodID = '',
     onListContentSizeChange = () => {},
-    shouldEnableScroll = true,
     style = {},
     listItemStyle = {},
     shouldShowRightIcon = true,
@@ -475,14 +472,14 @@ function PaymentMethodList({
     return (
         <>
             <View style={[style, {minHeight: (filteredPaymentMethods.length + (shouldShowAddBankAccount ? 1 : 0)) * variables.optionRowHeight}]}>
-                <FlatList
+                <FlashList
+                    estimatedItemSize={variables.optionRowHeight}
                     data={filteredPaymentMethods}
                     renderItem={renderItem}
                     keyExtractor={keyExtractor}
                     ListEmptyComponent={shouldShowEmptyListMessage ? renderListEmptyComponent : null}
                     ListHeaderComponent={listHeaderComponent}
                     onContentSizeChange={onListContentSizeChange}
-                    scrollEnabled={shouldEnableScroll}
                 />
                 {shouldShowAddBankAccount && renderListFooterComponent()}
             </View>

src/pages/settings/Wallet/WalletPage/WalletPage.tsx

@@ -441,7 +441,6 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
                                     activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
                                     buttonRef={addPaymentMethodAnchorRef}
                                     onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
-                                    shouldEnableScroll={false}
                                     style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
                                     listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
                                 />
@@ -460,7 +459,6 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
                                         shouldShowAddPaymentMethodButton={false}
                                         shouldShowAssignedCards
                                         shouldShowEmptyListMessage={false}
-                                        shouldEnableScroll={false}
                                         onPress={assignedCardPressed}
                                         style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
                                         listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}

src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

@@ -191,7 +191,6 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
                 activePaymentMethodID={transferBankAccountID}
                 actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
                 buttonRef={addPaymentMethodAnchorRef}
-                shouldEnableScroll={false}
                 style={[styles.mt5, hasBankAccount && [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
                 listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
             />