Merge pull request Expensify#75990 from software-mansion-labs/@zfurtak/migrate-CountrySelection

Make `CountrySelection` use new `SelectionList`

Author: grgia

src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx

@@ -2,8 +2,8 @@ import {isUserValidatedSelector} from '@selectors/Account';
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
-import SelectionList from '@components/SelectionListWithSections';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -69,30 +69,43 @@ function CountrySelection({isEditing, onNext, formValues, resetScreenIndex, fiel
     );
 
     const searchResults = searchOptions(debouncedSearchValue, countries);
-    const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
+
+    const textInputOptions = useMemo(
+        () => ({
+            label: translate('common.search'),
+            value: searchValue,
+            onChangeText: setSearchValue,
+            headerMessage: debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '',
+        }),
+        [translate, searchValue, setSearchValue, debouncedSearchValue, searchResults.length],
+    );
+
+    const confirmButtonOptions = useMemo(
+        () => ({
+            showButton: true,
+            text: isEditing ? translate('common.confirm') : translate('common.next'),
+            isDisabled: isOffline,
+            onConfirm: onCountrySelected,
+        }),
+        [isEditing, isOffline, onCountrySelected, translate],
+    );
 
     return (
         <FullPageOfflineBlockingView>
             <View style={styles.ph5}>
                 <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('addPersonalBankAccount.countrySelectionStepHeader')}</Text>
             </View>
             <SelectionList
-                headerMessage={headerMessage}
-                sections={[{data: searchResults}]}
-                textInputValue={searchValue}
-                textInputLabel={translate('common.search')}
-                onChangeText={setSearchValue}
-                onSelectRow={onSelectionChange}
-                onConfirm={onCountrySelected}
+                data={searchResults}
                 ListItem={RadioListItem}
-                initiallyFocusedOptionKey={currentCountry}
+                onSelectRow={onSelectionChange}
+                textInputOptions={textInputOptions}
+                confirmButtonOptions={confirmButtonOptions}
+                initiallyFocusedItemKey={currentCountry}
                 shouldSingleExecuteRowSelect
-                shouldStopPropagation
-                shouldUseDynamicMaxToRenderPerBatch
-                showConfirmButton
-                confirmButtonText={isEditing ? translate('common.confirm') : translate('common.next')}
-                isConfirmButtonDisabled={isOffline}
                 shouldUpdateFocusedIndex
+                shouldStopPropagation
+                disableMaintainingScrollPosition
             />
         </FullPageOfflineBlockingView>
     );