Make SelectBankStep use new SelectionList

src/components/SelectionList/BaseSelectionList.tsx

@@ -45,6 +45,7 @@ function BaseSelectionList<TItem extends ListItem>({
     onEndReached,
     onEndReachedThreshold,
     confirmButtonOptions,
+    children,
     customListHeader,
     customListHeaderContent,
     footerContent,
@@ -445,6 +446,7 @@ function BaseSelectionList<TItem extends ListItem>({
                             </>
                         }
                     />
+                    {children}
                 </>
             )}
 

src/components/SelectionList/types.ts

@@ -1,9 +1,10 @@
 import type {ReactElement, RefObject} from 'react';
 import type {GestureResponderEvent, InputModeOptions, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {ListItem, ValidListItem} from './ListItem/types';
 
-type SelectionListProps<TItem extends ListItem> = {
+type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Array of items to display in the list */
     data: TItem[];
 

src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

@@ -1,13 +1,13 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionListWithSections';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -38,7 +38,7 @@ function SelectBankStep() {
     const [hasError, setHasError] = useState(false);
     const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER;
 
-    const submit = () => {
+    const submit = useCallback(() => {
         if (!bankSelected) {
             setHasError(true);
         } else {
@@ -55,7 +55,7 @@ function SelectBankStep() {
                 isEditing: false,
             });
         }
-    };
+    }, [addNewCard?.data.selectedBank, bankSelected, isBetaEnabled, isOtherBankSelected]);
 
     useEffect(() => {
         setBankSelected(addNewCard?.data.selectedBank);
@@ -88,6 +88,17 @@ function SelectBankStep() {
         ),
     }));
 
+    const confirmButtonOptions = useMemo(
+        () => ({
+            showButton: true,
+            text: translate('common.next'),
+            onConfirm: submit,
+            isDisabled: isOffline,
+            style: !hasError && styles.mt5,
+        }),
+        [hasError, isOffline, styles.mt5, submit, translate],
+    );
+
     return (
         <ScreenWrapper
             testID={SelectBankStep.displayName}
@@ -101,20 +112,16 @@ function SelectBankStep() {
             />
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.addNewCard.whoIsYourBankAccount')}</Text>
             <SelectionList
+                data={data}
                 ListItem={RadioListItem}
                 onSelectRow={({value}) => {
                     setBankSelected(value);
                     setHasError(false);
                 }}
-                sections={[{data}]}
+                initiallyFocusedItemKey={addNewCard?.data.selectedBank ?? undefined}
+                confirmButtonOptions={confirmButtonOptions}
                 shouldSingleExecuteRowSelect
-                initiallyFocusedOptionKey={addNewCard?.data.selectedBank}
                 shouldUpdateFocusedIndex
-                showConfirmButton
-                confirmButtonText={translate('common.next')}
-                onConfirm={submit}
-                isConfirmButtonDisabled={isOffline}
-                confirmButtonStyles={!hasError && styles.mt5}
                 addBottomSafeAreaPadding
             >
                 {hasError && (