From db65acec2a4fe710e6f2b00359e57e23e64de734 Mon Sep 17 00:00:00 2001
From: Eric Han <hanyl_fight@126.com>
Date: Wed, 18 Oct 2023 00:16:35 +0800
Subject: [PATCH] fix inconsistent text selection of currency selection list

---
 src/pages/iou/IOUCurrencySelection.js | 46 ++++++++++-----------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index cd14dcd25f11..2e287bcd0502 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -6,7 +6,6 @@ import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
-import OptionsSelector from '../../components/OptionsSelector';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
@@ -15,11 +14,8 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import {withNetwork} from '../../components/OnyxProvider';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import ROUTES from '../../ROUTES';
-import themeColors from '../../styles/themes/default';
-import * as Expensicons from '../../components/Icon/Expensicons';
 import {iouPropTypes, iouDefaultProps} from './propTypes';
-
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+import SelectionList from '../../components/SelectionList';
 
 /**
  * IOU Currency selection for selecting currency
@@ -99,8 +95,7 @@ function IOUCurrencySelection(props) {
                 text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`,
                 currencyCode,
                 keyForList: currencyCode,
-                customIcon: isSelectedCurrency ? greenCheckmark : undefined,
-                boldStyle: isSelectedCurrency,
+                isSelected: isSelectedCurrency,
             };
         });
 
@@ -117,9 +112,7 @@ function IOUCurrencySelection(props) {
                 ? []
                 : [
                       {
-                          title: translate('iOUCurrencySelection.allCurrencies'),
                           data: filteredCurrencies,
-                          shouldShow: true,
                           indexOffset: 0,
                       },
                   ],
@@ -133,27 +126,20 @@ function IOUCurrencySelection(props) {
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
             testID={IOUCurrencySelection.displayName}
         >
-            {({safeAreaPaddingBottomStyle}) => (
-                <>
-                    <HeaderWithBackButton
-                        title={translate('iOUCurrencySelection.selectCurrency')}
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID))}
-                    />
-                    <OptionsSelector
-                        sections={sections}
-                        onSelectRow={confirmCurrencySelection}
-                        value={searchValue}
-                        onChangeText={setSearchValue}
-                        textInputLabel={translate('common.search')}
-                        headerMessage={headerMessage}
-                        safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                        initiallyFocusedOptionKey={initiallyFocusedOptionKey}
-                        shouldHaveOptionSeparator
-                        autoFocus={false}
-                        ref={optionsSelectorRef}
-                    />
-                </>
-            )}
+            <HeaderWithBackButton
+                title={translate('iOUCurrencySelection.selectCurrency')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID))}
+            />
+            <SelectionList
+                sections={sections}
+                textInputLabel={translate('common.search')}
+                textInputValue={searchValue}
+                onChangeText={setSearchValue}
+                onSelectRow={confirmCurrencySelection}
+                headerMessage={headerMessage}
+                initiallyFocusedOptionKey={initiallyFocusedOptionKey}
+                showScrollIndicator
+            />
         </ScreenWrapper>
     );
 }