diff --git a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx
index 2f5249fd5951..9b1e0565d8d0 100644
--- a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx
+++ b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx
@@ -1,8 +1,8 @@
import React, {useCallback, useMemo, useState} from 'react';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SelectionList from '@components/SelectionListWithSections';
+import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
import useLocalize from '@hooks/useLocalize';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -56,16 +56,6 @@ function CountrySelectionPage({route}: CountrySelectionPageProps) {
[route],
);
- const textInputOptions = useMemo(
- () => ({
- value: searchValue,
- label: translate('common.country'),
- onChangeText: setSearchValue,
- headerMessage,
- }),
- [headerMessage, searchValue, translate, setSearchValue],
- );
-
return (
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.tsx b/src/pages/settings/Profile/TimezoneSelectPage.tsx
index a2bb66be4911..39414b8264ca 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.tsx
+++ b/src/pages/settings/Profile/TimezoneSelectPage.tsx
@@ -1,9 +1,9 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useState} from 'react';
import type {ValueOf} from 'type-fest';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SelectionList from '@components/SelectionListWithSections';
+import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
import useInitialValue from '@hooks/useInitialValue';
@@ -42,33 +42,20 @@ function TimezoneSelectPage({currentUserPersonalDetails}: TimezoneSelectPageProp
updateSelectedTimezone(text as SelectedTimezone, currentUserPersonalDetails.accountID);
};
- const filterShownTimezones = useCallback(
- (searchText: string) => {
- setTimezoneInputText(searchText);
- const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) ?? [];
- setTimezoneOptions(
- allTimezones.filter((tz) =>
- searchWords.every((word) =>
- tz.text
- .toLowerCase()
- .replaceAll(/[^a-z0-9]/g, ' ')
- .includes(word),
- ),
+ const filterShownTimezones = (searchText: string) => {
+ setTimezoneInputText(searchText);
+ const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) ?? [];
+ setTimezoneOptions(
+ allTimezones.filter((tz) =>
+ searchWords.every((word) =>
+ tz.text
+ .toLowerCase()
+ .replaceAll(/[^a-z0-9]/g, ' ')
+ .includes(word),
),
- );
- },
- [allTimezones],
- );
-
- const textInputOptions = useMemo(
- () => ({
- headerMessage: timezoneInputText.trim() && !timezoneOptions.length ? translate('common.noResultsFound') : '',
- value: timezoneInputText,
- label: translate('timezonePage.timezone'),
- onChangeText: filterShownTimezones,
- }),
- [filterShownTimezones, timezoneInputText, timezoneOptions.length, translate],
- );
+ ),
+ );
+ };
return (
Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
/>
tz.text === timezone.selected)?.keyForList}
+ sections={[{data: timezoneOptions, isDisabled: timezone.automatic}]}
+ initiallyFocusedOptionKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
showScrollIndicator
shouldShowTooltips={false}
ListItem={RadioListItem}
+ shouldPreventActiveCellVirtualization
/>
);